Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

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

Setting up development enviroment for SPFx - Evolvous

SharePoint Framework : Run the installer 

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

SPFx run the installer - Evolvous

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

Installer - Evolvous

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

SPFx path selection - Evolvous

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

Select Features SPFx - Evolvous

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

install the necessary tool SharePoint Framework SPFx - Evolvous

    • 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 

SharePoint Framework SPFx - Evolvous

SharePoint Framework SPFx - Evolvous

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

SharePoint Framework

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 

SharePoint Framework visual code editor - Evolvous

    • 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

SharePoint Framework Microsoft software license terms - Evolvous

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

SharePoint Framework AppData LocalProgramsMicrosoft VS Code

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

  SharePoint Framework SPFx Installation - Evolvous

    • 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. 

SharePoint Framework SharePoint Framework - Evolvous

    • 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. 

SharePoint Framework

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