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

In this article I am going to explain the steps to be followed to setup development environment.

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.

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

SharePoint Framework (SPFx) - Development Environment Setup

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.

SharePoint Framework (SPFx) - Development Environment Setup 

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

npm install -g yo gulp

SharePoint Framework (SPFx) - Development Environment Setup 

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

yo --version 

SharePoint Framework (SPFx) - Development Environment Setup 

Then, install 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

SharePoint Framework (SPFx) - Development Environment Setup 

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

npm -g list --depth=0

SharePoint Framework (SPFx) - Development Environment Setup 

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 set up.

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

Thanks for reading the article.