SharePoint Framework (SPFx) - Development setup

Its been a great journey to creating the JSOM , REST API with combination jQuery  call in the SharePoint and Office 365 developmentt activities [Provider Hosted App and SharePoint hosted Apps] , Now Its really the time to look into embrace latest SharePoint development framework "SharePoint Framework (SPFx).

SPFx based on purely client context based without any server control usage on the SharePoint.
All the controls you will developing using the html5,JS,CSS and other Javascript based UI extensions like NodeJs,yeoman,gulp ,npm and webpack.

Yeoman is a client side solution generator for SharePoint package.

In next post, I am going to write all the tool chain technologies and how the SPFx differs from its predecessors paradigm.

Just keep in mind , SPFx is all about enhancing the user interface (UI) and user experience with modern web development technologies such as (TypeScript,Yeoman,Gulp,NodeJs,npm and webpack).

Ready to dive or dirty your hand in these technologies you often requires the solid play ground, I mean your own development environment with equipped all installation.

Here is the steps to follow.

Install the NodeJS - Download from here :
https://nodejs.org/en/download/ [Go with default settings, including PATH]

Install the Visual Studio Code (VS Code - Lightweight editor to implement the tool chain based application for all platform including Linux and iOS).

https://code.visualstudio.com/download

Post installation of the NodeJS and Visual Studio Code

Open your windows powershell and type the npm - v

ensure you installed the version 3.10.10 or greater.

Now type the following command in powershell to install the yeoman gulp

Step 1,

npm install -g yo gulp

after completion of the above command, you will be see it like

Installing the Yeoman gulp for SPFx development setup

Step 2,

You need to installl the microsoft SharePoint related package . Type the below command 

npm -install -g @microsoft/generator-sharepoint

This will install all packages those are required for SharePoint Client Webpart creation.

Step 3,

Create your webpart by creating template

Type yo @microsoft/sharepoint

Here is the output window of mine,

SharePoint Client WebPart - Yeoman template

Now you are ready to play around your webpart. This will create the directory structure for all source code, and you can start your journey.

Here is my successful  webpart creation

Read further on the next post : SharePoint Framework (SPFx) - Client WebPart Implementation