How To Setup SharePoint Framework Development Environment

Recently, I got a new laptop and wanted to set up SharePoint Framework development environment. I thought to document it with a screenshot so that it would be useful for those who are doing it for the first time. As SPFx development is open source driven, and a whole new set of toolchains are used to develop the SPFx solution. There are many introductory articles on understanding this toolchain and how it can be compared with typical previous SharePoint development models, so I won't get into those details. Our focus on this article will be to set up a development environment.

Please note that I will follow official Microsoft link but we will see each step in detail in this article. I am assuming, that we already have an Office 365 tenant which will be used later. If not, use this link to set up. Please note that we will be setting up the environment for a Windows 10 64 bit machine.

Step 1 - Download and Install Node JS LTS Version 10

Download MSI installer from https://nodejs.org/en/

Run the installer

On the welcome screen, click next
Next screen would be End-user license agreement, check 'I agree...' and click next
Next screen select destination path 'c:\Program files\nodejs', you can choose to install on another path also.
In the next screen, to select features, keep everything default

In 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 completed your will get the below screen, click Finish

That's it, Node JS is installed. Click on Windows Icon and we will see Node JS command prompt. Open Node JS command prompt.

We should get the below screen,

Step 2 - Installing Visual Studio Code

We can use any code editor to develop SPFx solution but mostly it's used in Visual Studio code. Download Visual Studio code stable version from the below link.

https://code.visualstudio.com/ - Please make sure you download System installer(refer below screenshot)

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

You should get the below success message when completed.

Step 3 - Install Yeoman and Gulp

These are Node JS based tools which help in creating, building, and debugging SPFx solutions.

Go to Node JS command prompt
Enter the below command

npm install -g yo gulp

It will download yeoman and gulp packages, we are using -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

Step 4

Install SharePoint Yeoman generator.

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

npm install -g @microsoft/generator-sharepoint

You should see the below success message.

Step 5 - 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 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 Node JS command prompt.
1. gulp trust-dev-cert

Step 6 - Create Hello World Web part

You can refer to this link for more detailed steps.

Go to Node JS command prompt, go to the required path where you wanted to create the SPFx project.
Use 'md helloworld-webpart' command to create a directory and go to that directory using 'cd helloworld-webpart'
Once in your folder, use below command to create a new SPFx project

yo @microsoft/sharepoint

It will take you to some questions one by one to create a required project based on your requirements.
Use the below options

Once created we will see the below screen

Now let's run 'gulp trust-dev-cert', you will be asked to install a certificate. Click yes

Once completed, we will see the below screen.

Step 7

Preview web part in local workbench.

Run the below command.

gulp serve

It should open local workbench like below, click on Add icon and add Hello world web part to the page.

You should see the below output,

If you see the above output, it means you have successfully set up your SPFx development environment and created your first client-side web part.

Thanks for reading, Happy Coding...!!!

6 Comments

Join the conversation! Your thoughts help the community grow.

JAY WIEGMANN4y ago
Workbench.html is not in my /temp
- Vinay Ayinapurapu4y ago
  Please note that local workbench is deprecated starting from 1.12.1. Hence you would not find it in your temp. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.12.1
Akash Kumhar5y ago
Good one, thanks for sharing..
Vinay Ayinapurapu5y ago
Nice one siddarth. able to follw the steps in sequence and helped us
Merid Fikadu5y ago
Hi #Siddharth Vaghasia i hope you are great and fine t have one question about SharePoint ?? our company need to implement sharepoint 2019 on-prepesses for document management and internal notification and collaboration so can i get some support? please send me some important thing using [email protected]
Rushi Mehta6y ago
Nice Information. Thanks for sharing