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:
The SharePoint Framework is supported on the following Node.js versions:
Node.js v16.15.0+  
Node.js v14.15.0+  
Node.js v12.13.0+  
Node.js v10.19.0+

Install nvm for Windows:
1. Download the latest version of nvm and install it.  Click here to download nvm setup for windows
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.

Labels:

Comments

Post a Comment

Popular posts from this blog

Permission XML for SharePoint Add-in

In this article, we will be discussing the permission XMLs, which are used to provide permission to SharePoint add-in. You can set the App only permission, by setting "true" or "false" in  AllowAppOnlyPolicy=“true” in these permission XMLs.   If add-in granted permission to tenant scope, It includes all children in scope. Before granting access to the app, need to register an app. Follow this link for step by step guide to  How to register an app/add-in in SharePoint   Providing access to add-in at tenant level: To provide access at tenant level user must have the tenant admin level permission. To grant this permission tenant admin can use this URL   https://tenantName-admin.sharepoint.com/_layouts/appinv.aspx Search the App Id (Client ID) and it will fetch all the information which you provide at time of registration of app.   Assign full control at tenant level : <AppPermissionRequests AllowAppOnlyPolicy="true">   <AppPermissionRequest  Scop
Post a Comment
Read more

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 in App Domain. Redirect URL :  Insert the redirect URL, for t
Post a Comment
Read more

How to create list from template in sharepoint

In this article, we are going to learn how to create a list from list template or using(.stp) file or we can say create list from existing list. Once you save the list as a template, It appears into List template option under the web designer gallery on site setting page. Steps to create list from list template: 1 Move to the site setting section where you have saved the list template. 2. When you click on the List templates, you will redirect to the List template gallery and from the list template gallery. 3. Now click on the File in ribbon and click on the upload document. 4. Browse the location where your list template is downloaded. I am uploading the template of an address list. 5.  After browsing the template, now you can give the name what you want to give to the list template and click on save. 6. Now the list template file appears into the list template gallery. Now click on the gear  icon and click on the Add an app. 7. On clicking add an app,
Post a Comment
Read more