Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, SharePoint Add-ins.




SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In this article, we would be covering the steps required to get developer machine ready for starting with SharePoint Development using SharePoint Framework as well as we would be building our first Webpart using SharePoint Framework.

Before we dive into the details, it is good to revisit the SharePoint development models we had.

84. SharePoint development models revisit

As you see above, we never had a simple way to support the SharePoint Online development.

The SharePoint framework is JavaScript. SharePoint Framework brings the new SharePoint UX, using open source tools like Yeoman scaffolding, Gulp and REST-based APIs for building SharePoint web parts. It allows any Java script frameworks like React JS, Angular or Knockout JS. 


  • Full client-side development
  • Central to Microsoft’s office development story going forward
  • A controlled and supported way to allow you to inject custom functionality
  • Works in both classic site collections and modern team sites
  • Cross platform, the next evolution in SharePoint development

Following are the steps required to set up the development machine

  • Install Node JS
  • Install Windows Build Tools
  • Install Visual Studio Code
  • Install Yeoman
  • Install SharePoint Yeoman Template
  • Install Gulp
  • Install SPFX Developer Certificate
  • Create a new SharePoint solution
  • Build and deploy the SharePoint solution

86. 1. SharePoint framework tools details



NodeJS can be downloaded from here: As per recommendation from the Technical Community, it is advisable to go for LTS Version of NodeJS.

93. Download NodeJS

Visual Studio Code:
You can download the Visual Studio Code from here :

94. vscode


Other Tools:
You can install the remaining tools from NPM as shown below, please note that I have used PowerShell to run the NPM commands.


95. Install Typescript




SharePoint solution:
Next step is to create a SharePoint solution, build and deploy.


At times, it would throw an error stating that SSL is invalid or something like that. To fix this, you may have to run the following command.


96. create a solution

It would open the local workbench where you can find your webpart and play around.

97. local workbench

You can also access the SharePoint Online workbench as shown below, as long as the gulp serve command is running you can add your local webpart on the SharePoint Online workbench.

98. online workbench


Visual Studio Code:
The following command would open your solution in Visual Studio Code editor 


99. vscode editor

Some of the most useful Gulp commands

  • gulp –tasks
  • gulp build
  • gulp bundle
  • gulp package-solution

Usually you would use the following commands to package your solution for production

  • gulp clean
  • gulp build –ship
  • gulp bundle –ship
  • gulp package-solution –ship

The following NPM command would install all the required packages are mentioned in package.json


The following NPM command would initiate the start task.




Production ready package:

As you see above, SharePoint Online workbench would work as long as “gulp serve” is running, this is fine for development. To make the package production ready, we have to let the package use either CDN or SharePoint Online to serve the required dependencies.

In the real wold, we would be using the actual CDN but for demo purposes, I would be hosting it on my local machine.

Step#1: Add an entry on the host file 


Step#2: Update the CDN Path

100. cdn path

Step#3: Update the package.json to include the lite-server

101. lite server

Step#4: Add a new config file for lite-server


and update as mentioned below


Step#5: Package the solution


Step#6: Start the lite-server, remember our CDN is hosted on the lite-server.


Step#7: Ensure that your CDN is working.

103. cdn access

So, your CDN Url would be



104. cdn browser access

Step#8: Upload the package into the appcatalog

105. upload into app catalog

Step#9: Deploy the package

106. Deploy package

Step#10: Add the app

107. add app

Step#11: Add the app

108. add webpart



Customizing webpart:
Now lets see how to add an additional property on the webpart.

110. add property

111. default value

Run the command

109. new property


If you want to enable apply  button 

112. disable auto apply


As we now know, this is basically javascript, we can definitely use the SharePoint REST APIs.

The following webpart would  display the site contents information


113. display list details

Finally would suggest reading more on the following topics.

  • Typescript
  • AngularJS/React
  • Webpack
  • Tslint