Setup Development Environment

Getting started with SharePoint Framework SPFx


In this post we will walk through the process of installing developer tools within our development environment, including recommendations on additional tools you should use.

Let’s setting up our developement tools !



As the first step, we will need to install NodeJS Long Term Support Version (LTS) which sets up the development environment and adds NPM.

Figure 1 : NodeJS Long Term Support (LTS) version


After installing NodeJS LTS version check node and npm version by using the following command :

node -v & npm -v

Figure 2 : NodeJS & NPM Versions


Code Editors

Install a code editor, In my case i will use visual studio code but you can use any code editor or IDE that supports client-side development to build your web part, such as :

Figure 3 : Code Editors


Install Yeoman and gulp

Enter the following command to install Yeoman and gulp:

npm install -g yo gulp

Figure 4 : Yeoman and Gulp Installation


Install Yeoman SharePoint generator

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

Enter the following command to install the Yeoman SharePoint generator globally:

npm install -g @microsoft/generator-sharepoint

But If you need to switch between the different projects created using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command:

 npm install @microsoft/generator-sharepoint --save-dev

In the end of your installation Yeoman SharePoint web part generator you will get like image below :

Figure 5 : Yeoman SharePoint web part generator Installation


Other useful tools for development

Here are some tools that might come in handy as well:

Next Post :

After setting up our SharePoint development environment in the next post we will setup our Office 365 Tenant (Trial Teanant and 1 year subscription) and we will create our App Catalog where we will deploy our package and Developer Site where we will install and test our client side WebPart.