Setup dev environment for spfx

So lets setup dev environment for SharePoint Framework abbreviated as SPFX. for an Introduction of What is SPFX and What are the capebilities of SPFX you can have a look on my previous post here.

Basics of SPFX

Step 1 : Install Node and npm

Go to http://nodejs.org and download latest stable release of nodejs. npm is installed with node js.
node provides run time for javascript and npm is package manager for managing packages and dependencies.
once installed open command prompt and type  node -v , it should display version number of nodejs installed on the machine.
similarly you can type npm -v to know the version number of npm.

Step 2 :   Install Gulp 

next  open a command prompt and type below command
npm install -g gulp 
this command will deploy gulp globally.
so gulp provides build process task runner for your spfx project.
for now you need not to know much about gulp except some commands for example for running the project in local workbench you will use command like gulp serve
Gulp actually does a lot of tasks which you will know as you progress with

Step 3 : Install Yeoman

Next install Yeoman globally. type below command to do that.

npm install -g yo

Yeoman provides starter templates not for spfx only but also for other types of node based projects.
it is similar to the visual studio starter templates.

Step 4 : Install  generators

Next install starter templates for spfx using below commands.
npm instal -g @microsoft/generator-sharepoint

this command will install SPFX generators.


Step 5 : Create and Run your Project

now you are ready to create your first project. open command prompt and navigate to your workspace (a folder in your machine where you want to place your source files). and run below command.

yo @microsoft/sharepoint

it will ask  a few questions like solution name etc as bellow

give answer to questions and you can do that easily. in one of the questions it will ask which framework you would like to use?
it gives three options for now you can choose any of them how ever i will be using react microsoft is also using react.

after this your project will be created. navigate to your project. on command prompt.

and type below command .
gulp trust-dev-cert

it will trust the development certificate. now for running the application use below command

gulp serve

When you run your project using gulp serve then you also need to allow in windows firewall so just allow when prompted.

it will run the project in local workbench as below.

you can click on Plus icon and add the webpart.

Workbench

Workbench is a page where you can test the spfx components before you actually deploy your component to office 365. 

there are two workbench one is local and called local workbench.

When you run gulp serve then your solution is opened in local workbench. so you can use local workbench for testing components before deploying them to office 365. but there are several scenarios that can not be tested in local workbench for example if you have written code to add a list item then you can not test in local workbench.

So for that case you have a hosted Workbench open your office 365 site and append following after domain name 

/_layouts/15/workbench.aspx

you will notice that when you click plus icon there then your local web part will be shown there.

 

.