Skip to main content

SPFx environment setup with multiple Node.js version

"How to set up SPFx development environment" is the first question that came when we want to develop client-side solutions using SPFx. This blog will share the steps to set up the SPFx environment with multiple Node.js versions.
This article also include steps to setup the nvm on windows machine. Using nvm we can manage multiple node versions on the windows.
There may be times when using Node.js that you need to run numerous instances of the software on the same computer. To work with SPFx solutions which are created with different versions of  Node.js, You need multiple Node.js versions on your machine. To install and set up the SPFx environment with multiple Node.js versions, use the steps mentioned below. 

If Node.js is already installed on your computer, use the instructions below to remove it.
1. Uninstall Node.js  
2. Remove the Node.js  related folders from the location "C:\Users<user>\AppData\Roaming\npm"

SPFx Node.js supported versions are:
SharePoint Framework is supported on the following Node.js versions and you can check the compatibility. Click on this SharePoint version matrix.

Install nvm for Windows:
1. Download the latest version of nvm and install it. Use the stable NVM setup  

2. Now open the PowerShell command prompt in an administrative mode.
    

3. Install the node with the version using the command. (We need to install the node version which is supported by SPFx).
    nvm install 10.19.0
4. To check the installed versions of Node.js run the command mentioned below:
    nvm list
5. Now you need to use the version with which you want to work.
    nvm use 10.19.0
6. To create SPFx solutions, we need to install the required dependencies. run the commands mentioned below.
    npm install -g yo gulp
    npm install -g @microsoft/generator-sharepoint 
 Now the Environment setup is done and now you can create SPFx web part.

Conclusion:
This blog provides you answers to the questions like "how do I install multiple node JS versions on the same machine" and "How do I work with the multiple node JS version using SPFx". I explain the steps to set up an NVM with your machine and also provide steps to set up the SPFx environment. 

FAQs:
Can I have 2 versions of node installed? 
Yes.
How do I manage multiple versions of Nodejs?
You can manage multiple Node.js version on the system using NVM.
How to list all NodeJS versions?
If you are using the NVM then using nvm list command, you can get all the installed version of node.

Comments

Popular posts from this blog

SPFx Interview Questions With Answers

In this article, we are going to discuss interview questions related to the SPFx (SharePoint Framework Development ). It will help you to prepare for the interview and in getting clarity on the core concepts of SPFx development. What is SPFx? SPFx, short for SharePoint Framework,  SPFx  allows us for client-side SharePoint development, we can easily connect with SharePoint data and it also supports for open source tools. What is the major difference between SPFx web part and the SharePoint app? Both the development model supports client-side development but the major difference between these two is that the SharePoint app(add-in) runs on the iframe. What you can build with SPFx? Using SPFx framework we can customize the SharePoint pages. We can build things mentioned below using the SharePoint Framework(SPFx). Web parts, Extensions, Adaptive Card, Library Component How many types of extensions we can create using SPFx? SPFx has three extension types: Application Customizers: U...

How to register an app in SharePoint

In this article, we are going to learn how to register an app/add-in in SharePoint online. If you have created a Sharepoint provider-hosted add-in or other SharePoint solution and to access the SharePoint site or list using the app/add-in you need to register the add-in on SharePoint and to grant permission. Register app in SharePoint 1. Login into SharePoint and Navigate to register an app page. Use the URL mentioned below:          [Sitecollection URL]/_layouts/15/appregnew.aspx 2.  Once you navigate to the Register app page, a form will open. You need to fill all the fields on the form. Client Id and Client Secret  generated when we click on the generate button available next to the fields.  Title : Name of the add-in which you want to give. App Domain : Where your domain is hosted, for the local environment you can place             "www.localhost.com". Do not include HTTP or HTTPS...

SharePoint Framework SPFx Node Version Compatibility

How to check the compatibility between the SPFx version and the Node.js version The SharePoint Framework (SPFx) is a client-side development platform used to develop web parts and extensions for SharePoint. The SharePoint Framework (SPFx) is compatible with the Node.js versions. Existing SPFx solutions may have different SPFx versions as compared to the current solutions. To make the SPFx solution run, Node.js is required, and in this blog, I am sharing steps to check the compatible node module for SPFx.  Find the SPFx version from the solution:  Open the project solution and navigate to the "package.json" file. In package.json file you will find  "@microsoft/sp-core-library" key and value of this particular key is the version of the SPFx.       Ex:    "@microsoft/sp-core-library": "1.14.0" Another way to find the SPFx version is by command, open the command prompt and run the command mentioned below: npm ls -g --depth=0 @microsoft/generator-s...