Set up SharePoint Framework (SPFx) Development Environment

Before getting started with setting up SharePoint Framework (Spfx) development environment, it’s better to read about SPFx. If you don't know what SPFx is, then you can read all about it in my previous blogpost (SharePoint Framework Development). It is an overall guide for SPFx where you will find the introduction, key features and must know things related to the subject.

What you need for SharePoint Framework (SPFx) development?

A code editor

Use any editor or IDE of your choice that supports client-side development to build your extensions and web parts, such as:

  • Visual Studio Code
  • Atom
  • WebStorm

Node.JS command prompt

Open Node.JS command prompt from your system’s start menu

Node JS command prompt

Install NPM

Enter the following command onto Node.JS command prompt

npm install

Install NPM

Install Yeoman and gulp

Enter the following command onto Node.JS command prompt to install Yeoman and gulp:

npm install -g yo gulp

Install Yeoman and gulp

It will take some time to install Yeoman and gulp. After successful installation of Yeoman and gulp you will see the screen similar to the screenshot below:

Yeoman and gulp

Note: -g in the command is to install Yeoman and gulp globally

Install Yeoman SharePoint generator

The Yeoman SharePoint generator helps you quickly create a SharePoint client-side solution with the right toolchain and project structure.

To install SharePoint generator, enter the following command onto Node.JS command prompt:

 npm install @microsoft/generator-sharepoint@1.4 -g

Yeoman SharePoint generator

It will take some time to install Yeoman SharePoint generator. After successful installation of SharePoint generator, you will see the below given screenshot:

Yeoman SharePoint generator 2

Note: -g in the command is to install SharePoint generator globally

You are all set to build your first SPFx web part or extension.

Validate and version check for installations

To validate that everything is installed correctly and to know the version details for installed Yeoman, gulp and SharePoint generator, enter the following command onto Node.JS command prompt:

gulp and SharePoint generator

npm ls -g --depth=0

You will see all the installations and version details for Yeoman, gulp and SharePoint generator like in below screenshot:

Installed versions for gulp, Yeoman and SharePoint generator are:

Gulp: 4.0.0

Yeoman: 2.0.5

SharePoint generator: 1.7.1

SharePoint generator

Conclusion

After successful installation of all the pre-requisites for SPFx development such as: Yeoman, gulp and SharePoint generator, you are all set to build your first SPFx web part or extension. In the next blog, we will build our first client side SPFx web part where we will not need to install gulp, Yeoman and SharePoint generator again because we have already installed all these globally.

Leave a Reply

Your email address will not be published. Required fields are marked *