Hello friends, in this series of SPFx web part development, we are going to start with setting up the development environment for SharePoint Framework (SPFx).

SharePoint SPFx Development Environment Setup in 6 Simple Steps

Step 1: Install NodeJS

  • Installing NodeJS is the prerequisite for SPFx
  • Node.js v9.x, v11.x, and v12.x are not currently supported with SharePoint Framework development.
  • If you are on the Windows machine, you can download msi installers from this link: NodeJS LTS version 10.

  • Follow the on-screen instructions and install the NodeJS on your machine.
  • Once the installation is finished, you can check the installed node version using node -v command as shown below.

Step 2: Install gulp

  • Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. In SPFx, we will be using gulp to run our builds, bundling and packaging solutions. These tasks can be run using Shell or Bash scripts on the command line.
  • To install gulp, execute below command in command prompt.
npm install gulp --global

Step 3: Install Yeoman 

  • Yeoman is a scaffolding tool which will scaffold (create a folder structure/ starter template) our SPFx solution to make out life easy :)
  • The starter template will have a default HelloWorld SPFx webpart.
  • To install Yeoman, execute below command in command prompt.
npm install yo --global

Step 4: Install Yeoman SharePoint generator 

  • To install the Yeoman SharePoint generator, execute below command in command prompt.
npm install @microsoft/generator-sharepoint --global

Step 5: Trusting the self-signed developer certificate

  • You must first configure your development environment to trust the Self-signed SSL certificate.
gulp trust-dev-cert

Step 6: Install Visual Studio Code

  • Install the latest version of the Visual Studio Code from the official site.

Infographic for setting up development environment for SPFx