15,205 total views, 52 views today
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:
- 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 into the below page and download from there.
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 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:
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.
Now, extract this zip and run the .exe file.
- 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
- 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
- Note pad++
I prefer to use “Visual Studio Code” editor, we can download it from here Visual 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.
</p><p>npm install -g yo gulp</p><p>
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”.
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>
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.
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.
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
Free download SharePoint Online & Office 365 Administration eBook(238 Pages)
Get the PDF eBook from here:
Send download link to: