SharePoint Framework (SPFx) development environment Setup step by step

No comments

In this tutorial, we’ll learn about how to set up the development environment for the SharePoint framework aka SPFx. Before that, we should know what is SharePoint framework or SPFx – These days, it is a buzz word in the Sharepoint market, in the long run, SPFx is the way to go when it comes to customizing the SharePoint solution as Microsoft does not recommend to use any javascript directly into the SharePoint Online page, in fact by the design out of the box the script editor web part is disabled.

The definition from MSDN as – The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. With the SharePoint Framework, we can use modern web technologies like React JS, Angular JS, etc.  The SharePoint Framework works for SharePoint Online both for classic and modern experience and also for on-premises (SharePoint 2016 Feature Pack 2 and SharePoint 2019).

Step by step process to set up the SharePoint Framework (SPFx) development machine:

Now, I will explain how to set up the development environment for the SharePoint Framework (SPFx) for your development environment. In just 5 steps, we can prepare the development environment for SPFx – we just need to install the below tools or Softwares one by one:

  1. Install NodeJS
  2. Install Code editor
  3. Install Yeoman and gulp
  4. Install Yeoman SharePoint generator
  5. Trusting the self-signed developer certificate

Step 1: Install NodeJS

In this process, the very first step is to install the NodeJS. When it comes to installing the NodeJS – people generally just google it and land into the below page and download from there.

https://nodejs.org/en/download/

Download NodeJS - https://nodejs.org/en/download/
Download NodeJS – https://nodejs.org/en/download/

If we download from here – we’ll get the latest version of NodeJS but it will be very difficult to work with as a leaner of SPFx because most of the example we will refer during the course of our learning either from GitHub or blogging site – these solutions were developed or built on previous or older version of NodeJS, so while we will try to use those solutions, we will struggle to build it. So, as per my experience, we must go with the older version of NodeJS i.e. 8x.

Before installing the new NodeJS – it is good to verify whether if you have already installed NodeJS.

How to verify this?

Just run the below command in the command-line tool:

</p><p>node -v</p><p>

NodeJS - Node -v
NodeJS – Node -v

If you have a higher version of NodeJS installed in your machine – before installing the new one, you need to uninstall the already installed one.

Where can we download the 8x version of NodeJS?

It can be downloaded from here. Once the below page gets opened – search with the “node-v8.17.0-win-x64.zip” and download this zip file.

NodeJS - node-v8.17.0-win-x64.zip
NodeJS – node-v8.17.0-win-x64.zip

Now, extract this zip and run the .exe file.

Notes:

  • Over a period of time – the above v8.<17> gets changed, so while you are referring it might be different.

After successful installation, if we run the “node -v” command again, we can see NodeJS version v8.17.0 earlier it was v13.7.0

NodeJS Installation - node-v8.17.0-win-x64.zip
NodeJS Installation – node-v8.17.0-win-x64.zip

 

Notes:

  • With these being said, if you still face this version issue, don’t be panic, just follow the below link, here you need to downgrade the node.js using the NVM tool and this tool can be downloaded from here.
  • Complete instruction to downgrade, please click here.

 

Step 2: Install Code editor

We can use any of the below code editor or IDE that supports client-side development to build your web part:

  • Visual Studio Code
  • Atom
  • Webstorm
  • Note pad++
  • EditPlus

I prefer to use “Visual Studio Code” editor, we can download it from here Visual Studio Code

Install Visual Studio Code Editor
Install Visual Studio Code Editor

Step 3: Install Yeoman and gulp

Now, we need to install the Yeoman and gulp package – open the command-line tool or PowerShell.

</p><p>npm install -g yo gulp</p><p>

npm install -g yo gulp - Installation
npm install -g yo gulp – Installation

This will take sometimes around 2 to 3 minutes, after that, we will get the below message on the successful installation – “Everything looks all right”.

npm install -g yo gulp - Installation - success message
npm install -g yo gulp – Installation – success message

The above “npm install -g yo gulp” command is used to import NPM packages YO and GULP

Step 4: Install Yeoman SharePoint generator

This package is needed for the SharePoint web part project development using SPFx – this is a scaffolding for the project – we need to run the below command in the windows command-line tool or node JS command-line tool or in PowerShell.

</p><p>npm install -g @microsoft/generator-sharepoint</p><p>

Install Yeoman SharePoint generator
Install Yeoman SharePoint generator

Step 5: Trusting the self-signed developer certificate

We need to run the below command in the command prompt or PowerShell window or Node JS command line. This is one time set up to trust the certificate which can be executed before started developing the project or during the first build of the project.

</p><p>gulp trust-dev-cert</p><p>

What is the use of Trusting the self-signed developer certificate?

The SharePoint Framework’s local webserver, used when testing your custom solutions from your development environment, uses HTTPS by default. This is implemented using a development self-signed SSL certificate. Self-signed SSL certificates are not trusted by your developer environment. We must first configure your development environment to trust the certificate.

Key take-away:

  • SharePoint Framework (SPFx) can be used on any platform with any JavaScript framework to build SharePoint customizations.
  • It is purely based on the Java scripting language.
  • SPFx executes the code in the context of the user, no permission elevations are allowed.
  • SPFx Solutions built on the SharePoint Framework are supported both in classic SharePoint sites and Modern SharePoint sites.
  • SPFx solutions are responsive to all devices like desktop, laptop, mobile tablet, etc.
  • Other notable advantages of SPFx are Custom Properties, Remote Development, Local Workbench, Code Security and  Scalable.

Summary:

Thus, in this article we have learned the below:

  • What is SharePoint Framework (SPFx)?
  • How to set up a development environment for the SharePoint Framework (SPFx).
  • How to install NodeJS
  • How to install Code editor
  • How to install Yeoman and gulp
  • How to install Yeoman SharePoint generator
  • Trusting the self-signed developer certificate

References:

See Also:

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:




 

 
FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.