- Install NodeJS
- Install Code editor
- Install Yeoman and gulp
- Install Yeoman SharePoint generator
- Trusting the self-signed developer certificate
Step 1: Install NodeJSIn 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 leaner of SPFx because most of the example 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 if you have already installed NodeJS. How to verify this? Just run the below command in the command-line tool:
node -vIf 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.
- 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 editorWe can use any of the below code editor or IDE that supports client-side development to build your web part:
- Visual Studio Code
- Note pad++
Step 3: Install Yeoman and gulpNow, we need to install the Yeoman and gulp package – open the command-line tool or PowerShell.
npm install -g yo gulpThis will take sometimes 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 generatorThis 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 certificateWe 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.
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.
- 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
- 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