SharePoint Framework (SPFx) - Part One - Development Environment Setup

In this article, I am going to explain the steps to be followed to set up a development environment to create Client Side Webpart using the SPFx framework.

Install node.js

To install node js click Here. Then, click on 8.11.4 LTS as shown below and a .msi file will be downloaded.

Once you install the MSI file, it will also install the NPM package. After this, restart your computer. To check whether node.js and npm are installed, run the below commands in the Windows command prompt (or PowerShell command).

Install yeoman and gulp

Before installing yo and gulp, don't forget to restart your computer after installing node.js because when I tried to install yo and gulp without a restart, I got the below error.

To fix this issue, I have uninstalled node.js and then reinstalled the .msi file. Then, I restarted my computer and installed yo and gulp successfully. To install you and gulp, enter the commands as shown below.

npm install -g yo gulp

To check whether yo are installed, run the below commands.

yo --version

Then, install the yeoman generator for SharePoint.

Yeoman generator for SharePoint helps you to create a SharePoint client-side solution project structure.

npm install -g @microsoft/generator-sharepoint

To check all the installed files, enter the below command.

npm -g list --depth=0

Install VS code editor

You can use any code editor that supports client-side development to build your web part. One of them is Visual Studio Code editor -- Click Here to install.

With this, we have completed the development environment setup.

In the next article, I will explain about how to create a client-side hello web part.

Thanks for reading the article.