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.
Table of Contents
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:
- Install NodeJS
- Install Code Editor
- Install Yeoman and gulp
- Install Yeoman SharePoint generator
- 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/
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
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.
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
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.
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 hereVisual Studio Code
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
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”.
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
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 (SPFxSharePoint development)
See Also: SharePoint Online tutorial
You may also like the below SharePoint Online tutorials:
- 3 ways add a picture library in the communication site – SharePoint Online
- SharePoint generation or version history from the year 2000 to 2020
- Office 365: Getting started with SharePoint PnP PowerShell – installation
- In 2 steps convert a classic SharePoint page to modern using PnP
- Office 365: Retrieve hub sites and associated sites using PnP Powershell
- Create a modern team site using PnP PowerShell in SharePoint
- In 4 steps access SharePoint online data using postman tool
- SharePoint admin center: Learn SharePoint online administration in an hour – step by step
- SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
- Office 365: Understanding the hub site in SharePoint online
- Create SharePoint online list using PnP provisioning template
- List Template IDs In SharePoint Online/SharePoint 2019/2016/2013/2010/2007
About Post Author
SP Maven
As a SharePoint and Power Platform Maven, my greatest joy comes from sharing my expertise with colleagues, friends, and the tech community, helping them navigate the ever-evolving world of technology and guiding them through the dynamic landscape of modern technology.
See author's posts
