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.

 

.

Basics of SPFX

SPFX is the new way or you can say a new development model in SharePoint based on open source technologies like nodejs , Gulp , Yeoman , webpack , reactjs , angularjs typescript etc.
SPFX is a development model that provides full support for client side development and deployment.

Normally, SharePoint developers work on  SharePoint Solutions that are based on features/solutions / javascript JSOM using Script Editor / content editor webpart or Apps (now addin). and so it is hard for them to learn and work on above mentioned open source technologies.

Since SPFX is based on client side development so it is going to be very popular in fact it is already. so every SharePoint developer should now start learning these technologies as these are going to be future of SharePoint.
We can use SPFX to develop powerful client side solutions for office 365 and Feature pack 2 of on-premise SharePoint 2016.

lets see some problems with old client side development ways and some problems with that

Script Editor

Script Editor is probably one of the most popular web part in SharePoint which developer uses to inject scripts in pages but the problems are.

1.  It is not marked as safe for scripting.
2. There are certain cases where NOSCRIPT feature is enables on most of self service sites. simply it can not be used there.
3. You can not provide configuration options easily.

Addin Model

Addin model provides app parts which can be used in No Scripts scenarios but the biggest downside of  this App Part is that it loads in IFrame and caused several issue. if you solve them then it will take much time to load.

Key Features of SPFX Model

Now lets see what are some of the key features of SPFX.

1. You should be using some javascript framework for development and of course you need to know at least one of them like Angular , Knockout , React etc.
2. You can access the life cycle of controls like render , load , serialise , deserialise etc.
3. Controls are responsive in nature , the solution runs in browser with current user credentials
4.  Solutions are based on tools like TypeScript , gulp, yeoman etc
5. End users can add/use the solutions developed by developer once it is approved by tenant admins. 
6. Solutions developed can be used on both modern and classic pages.
7. There is something called workbench which can be used to test the web parts etc locally before they actually deployed to SharePoint

What a developer should know to get started with SPFX

1.  First you should create office 365 tenant or join office developer program if you already have then create a developer site collection and app catalog site.
2. TypeScript : if you know C# then it will be easy to learn. it is a super set of javascript that provides strong typing in javascript like classes , interfaces , modules and much more.
3. Nodejs : you should have some basic understanding of node js and npm (node package manager)
4. JavaScript Framework : you should know at least one javascript framework like React , Angular 1.x , Angular 2 with TypeScript 2.x .  to learn react you can have a look on ReactJS Tutorial
5. Yeoman : Yeoman provide generators or project templates. its like similar as visual studio uses project templates.  so you should have some basic understanding on Yeoman and basically you will be using some npm commands to generate your SPFX project templates.
6. Gulp : gulp provides build process task runner. you should have some basic understanding of gulp and you will learn more as you progress with SPFX.  it does alot of task for you like building and minifing css files and much more.
7. WebPack : Webpack is used to create bundle for webpart files and dependencies.   

For a SharePoint developer, initially it is relatively complicated to learn these but you should have a basic understanding of these to get started with code samples on Microsoft Pantterns and Practices

and slowly you will learn a lot of things.

Capabilities of SPFX

What you know about spfx will never be of use until you do not know what SPFX can do.

It is realy hard to write what SPFX can not do. but what it already does can be written down here.

Community is working to add more capability so you should always look on Microsoft Patterns and Practices

Lets have a look on what kind of stuff we can develop for now with SPFX.

1. Client Side Web Parts :  you can write client side web parts that can be added on a page . two webparts can have connection with each other.
2. Field Customizers :  it is like JS Link . It is a javascript object that can change the rendering of a field in a list or library .  with field customizers you can change the rendering of a cell based on the data in cell.
3. Application Customizers  : with Application customizers you can add some object on each page of SharePoint. this also comes with a contract from microsoft with specific named div elements on the page. Application customizer allows us to create custom header and footer or add some google analitics or any thing there. it is like delegate controls it not that?.
4.   Command Sets : if you want to add some button in ECB menus (context menu of list or library) or toolbars of lists or libraries then you should be writing command sets. its like custom actions, it not that ?

Whats Next

You can have a look on how to setup dev environment for spfx

https://sppractices.blogspot.in/2017/09/setup-dev-environment-for-spfx.html

To know what are the new things coming with SPFX you should always have a look on the Microsoft Patterns and Practices.

https://dev.office.com/patterns-and-practices