Setup SPFx environment - SharePoint Framework (SPFx) development environment Set up step by step

In just 5 steps best way to Setup SPFx environment: SharePoint Framework (SPFx) development environment set up step by step

No comments

Loading

In just the 5 steps best way to setup SPFx environment article, we will learn how to set up the development environment for the SharePoint Framework (SPFx) development environment step by step. The SharePoint framework is also known as SPFx.  Before that, we should know what is SharePoint framework or SPFx.

What is SharePoint framework?

These days, it is a buzzword 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 using 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).

SharePoint Framework (SPFx) development environment Set up step by step (setup SPFx environment)

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 Software 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 on 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 learner of SPFx because most of the examples we will refer to during the course of our learning either from GitHub or blogging site – these solutions were developed or built on the 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 you have already installed NodeJS.

SPFx version check (SPFx SharePoint development)

How do we verify this? Just run the below command in the command-line tool:

node -v
NodeJS - Node -v
NodeJS – Node -v

Downgrade SPFx version

If you have a higher version of NodeJS installed on 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 this being said, if you still face this version issue, don’t 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.
  • For complete instructions 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 the “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.

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

This will take some time 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.

npm install -g @microsoft/generator-sharepoint
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 a one-time setup to trust the certificate which can be executed before starting to develop the project or during the first build of the project.

gulp trust-dev-cert

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 takeaway: setup SPFx environment (SPFx SharePoint development)

  • 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 desktops, laptops, mobile tablets, etc.
  • Other notable advantages of SPFx are Custom Properties, Remote Development, Local Workbench, Code Security, and  Scalable.

Summary: SharePoint Framework (SPFx) development environment Set up (Setup SPFx environment)

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: Setup SPFx environment (SPFx SharePoint development)

See Also: SharePoint Online tutorial

You may also like the below SharePoint Online tutorials:

Download SharePoint Online PDF Book

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:



Buy SharePoint Online & Office 365 Administration eBook


 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

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

About Post Author

Do you have a better solution or question on this topic? Please leave a comment