Setting up Development Environment for SPFx (SharePoint Framework)

Introduction

In the previous article, we get some basic information related to SPFX such as features, solution types, etc., which is helpful to start further learning in SPFx development. We can check this article here. In this article, we will learn to set up an SPFX environment to develop SPFx web parts and extensions. We will also discuss the required tools, IDE, and packages that are required to starting the development in SPFx.

Prerequisites

To start with the development in SharePoint Framework we need an Office 365 tenant where we can create SharePoint sites and create web parts and extensions according to the SharePoint site context and from SharePoint lists and Libraries, so we can store and fetch data and files. Also, we can provide appropriate permission to the users before starting the development and we can use that permission level in the web parts. We also need an app catalog site to deploy our created package. To create Office 365 tenant and SharePoint app catalog site we can follow the given MSDN blog here.

Setup Development Environment

We can start development in SharePoint Framework using MacOS, Windows, and Linux. We need to install the below set of tools to start development:

Node.js

There are two types of Node.js versions available to download which are LTS and Current but we need to install the LTS version of Node.js because SharePoint Framework is only supported on Node.js LTS versions as Node.js. We can download Node.js from here. If we have already installed Node.js then we can check the current version of Node.js by running the below command in Node.js Command Prompt.

node -v

Some SharePoint Framework supported Node.js versions are given below so we can download specific SharePoint Supported Version from here.

Node.js v10.13.0+ (Dubnium)
Node.js v12.13.0+ (Erbium)
Node.js v14.15.0+ (Fermium)

Development IDE

We can install a good IDE or we can say a good Code Editor tool to Manage our Code that supports SharePoint Framework development. Below are the tools that we can use to start development in SharePoint Framework. Not all IDE given below is required but we can install one of them to start development.

Gulp

Gulp toolkit is used to Automate repetitive tasks. It is a Javascript based task runner toolkit. We can install it using npm from Nodejs command prompt or Nodejs Terminal in Visual studio. Using Gulp we can perform certain tasks with our solution like build, bundle, serve, deploy, etc. We can download Gulp using the below command:

npm install gulp –global

--global will install the package globally in our system so we don’t need to install it for every project solution that we will create. We can also use –g instead of –global here.

Yeoman

Yeoman is a Generator tool that is used to generate the required file structure to begin development with SPFx. We can use a different type of project using Yeoman. It helps to set up a new project with the required tools and files that make our project more productive. Also, it saves time for manually creating a required file structure and generating a file structure according to our selected options like Project name, Web part name, project type, etc. We can install Yeoman by running the below command in Node.js Command Prompt.

npm install yo –global

This command will install Yeoman globally so the user doesn’t need to install it every time before creating a new project.

Yeoman SharePoint Generator

Yeoman tool can work with different types of project generators. To generate a specific type of project Yeoman needs a specific blueprint of the project that we want to create. For the SharePoint Framework project, we need to install SharePoint Generator. Using this we can Scaffold our SharePoint Framework projects and generate a file structure that is required to start with the new SPFx project.

The below command is used to install Yeoman SharePoint Generator:

npm install @microsoft/generator-sharepoint –global

Command will install SharePoint generator globally so we need to install it only once.

Install Gulp, Yeoman, and SharePoint Generator at once

We can install Gulp, Yeoman, and SharePoint Generator using a single command so there is no need to run each npm command separately to install these tools. We can run the below command to install all these tools globally at once.

npm install gulp yo @microsoft/generator-sharepoint –global

After installing all the required tools we can start creating web parts and extensions using SharePoint Framework. We can gather more information about SPFX tools and libraries here.

Conclusion

In this article, we learn about setting up a development environment to start development with SPFX. Also, we learn about the required tools and libraries for SPFx and how to install them. If you find anything that I am missing in this article or you find it useful please provide your valuable feedback.