How to set up development environment for SharePoint framework

Set up development environment for SharePoint framework

Let me tell you, you can develop SharePoint Framework (SPFx) solutions in Windows, Linus or macOS.

Step-1 (Install Code Editor like Visual Studio Code

For developing a SharePoint client-side web part using SPFx, you need a code editor.

You can use any editor like:

  • Visual Studio Code

  • Atom

  • Webstorm

You can also use Visual Studio for SPFx development

I am using Windows 10 here, so I will download visual studio code for windows.

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

Then click on Next.

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

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

Step-2 Install NodeJS LTS version 10

Next, we will have to install NodeJS for SPFx framework development set up.

At the time of writing this blog post, the supported version of NodeJS is Version 10 (10.19.0).

  • Download NodeJS 10.19.0 (64 Bit)

  • Download NodeJS 10.19.0 (32 Bit)

SPFx supports Node.js v8.x and Node.js v10.x versions and DOES NOT SUPPORTS Node.js 9.x and Node.js 11.x, Node.js 12.x.

Nodejs installation is also very straight forward and simple. Double click on the set up file.

You can see like below, here click Next.

Click on Next and Nodejs installation will start.

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

This way we can install NodeJS.

Once you install the NodeJS in Windows 10, NPM (Node Package Manager) will be installed automatically.

We will use NPM to install other commands required to set up the spfx development environment.

Now, if you will search for Nodejs, you can see the Nodejs command prompt will appear like below:

We can use Node.js command prompt to run various commands.

If you will check the Node.js version by running the below command:

node -v

It looks like below:

Step-3 Install Yeoman and gulp

Now, you can now install Yeoman and gulp.

Yeoman helps to kick start new projects. SharePoint client-side development tools include a Yeoman generator for creating new web parts.

Run the below command in Node.js command prompt to install Yeoman and gulp:

npm install -g yo gulp

Step-4 Install Yeoman SharePoint generator

Next, we need to install Yeoman SharePoint generator, which helps to create a SharePoint client-side solution project with the right toolchain and project structure.

Run the below command in Node.js command prompt.

npm install -g @microsoft/generator-sharepoint

Step-5 Trust self-signed developer certificate

The below command we need to run after creating the SharePoint client-side web part.

Do not the command without creating the client-side web part in SharePoint. You have to run the command in the root folder of the SharePoint client-side project.

When you run the client side web part, it will open in the local workbench (local server) which we use for testing the SPFx custom solutions.

By default it will open in HTTPS which is implemented using a development self-signed SSL certificate. Self-signed SSL certificates are not trusted by your developer environment.

So you must first configure your development environment to trust the certificate by running the below command in the same client side solution root folder of the project.

gulp trust-dev-cert
You need to run gulp trust-dev-cert command only once in your local system.