SharePoint Framework SPFx : Set up Development Environment

Introduction

Let us see how to set up the development environment to kick start with SharePoint Framework development (SPFx).

For Setting up of development environment for SharePoint Framework, you will have to:

• • Install Developer tools 
  • Install Node JS. Make sure you install LTS (Long Term Support) version. 
  • Download MSI installer from https://nodejs.org/en/  

Let’s discuss your project

SharePoint Framework : Run the installer 

• • Nodejs installation is also straightforward. Double click on the setup file. 
  • On the welcome screen, click next. 

• • The next screen would be End-user license agreement, check ‘I agree…’ and click Next. 

• • In the following screen, select destination path ‘C:Program Filesnodejs’ , you can choose to install on another path also. 

• • In the next screen, to select features, keep everything default. 

• • Then check on Automatically install the necessary tool and click on Next.

• • On the next screen, we will get the Install button. Click on Install.  
  • Based on your security settings, it might ask to allow the below. Click Yes 

• • Once the installation will over, it will display a successful message like below: 

SharePoint Framework (SPFx) Install code editor 

We can use any of the below code editors or IDE that supports client-side development to build your web part: 

• • Visual Studio Code  
  • Atom 
  • WebStorm 
  • Note pad++ 

I prefer to use the “Visual Studio Code” editor. We can download it from here: Visual Studio Code 

• • End-user license agreement, there are two choices a) I accept the agreement b) I do not accept the agreement choose “I accept the agreement” and click Next. 

• • In the following screen, select destination path ‘C:UsersNitin puriAppDataLocalProgramsMicrosoft VS Code’, you can choose to install on another path also. and Click Next 

• • Once you download the visual studio code, double click on the setup file to start the installation. 

 

• • Run the setup wizard and follow along with the instructions to install. It is pretty much self-explanatory. In the Additional task link below, use the below-preferred option. It will help you later. 

On the next screen, we will get the Install button. Click on Install.  

• • Once you click on the Install button, the installation will start like below: 

• • Then you can see the installation over, and it will show a successful message. 

Node.JS command prompt 

• • Open Node.JS command prompt from your system’s start menu 

Install NPM 

• • Enter the following command onto the Node.JS command prompt 

• • It will download yeoman and gulp packages. We are using the -g parameter so that it would be installed globally across your Node JS environment. 

• •  You should see the below screen once the installation is completed. 

 

 

Install Yeoman SharePoint generator 

• • Next, we will install the SharePoint Yeoman generator, which will help create the SPFx solution project structure. 
  • Run the below command in the Node JS command prompt. 

• • You should see the below success message. 

Trusting self-signed Developer certificate 

• • SharePoint local server to test web parts uses HTTPS. This is developed using a self-signed developer certificate. So, we need to trust the self-signed developer certificate for our development environment. 
  • This needs to be done only once, but it would need to run on the SPFx project root folder. So, you can do this once we create our first Hello world client-side web part. 
  • Run the below command in the Node JS command prompt. 

npm ls -g –depth=0 

You will see all the installations and version details for Yeoman, gulp and SharePoint generator like in the below screenshot: 

Installed versions for gulp, Yeoman and SharePoint generator are: 

Gulp: 4.0.2 

Yeoman: 4.3.0 

SharePoint generator: 1.12.1 

____

Written by Nitin Puri

Nitin is SharePoint Developer at Evolvous Limited – specialists in Microsoft Technologies