Control Node.js versions with Node Version Manager (NVM) to develop SPFx solutions for different SharePoint environments

NVM for Windows

The Microsoft/npm/Google recommended Node.js version manager for Windows.

NVM (Node Version Manager) is a tool that allows you to install and switch between different versions of Node.js on your machine. This can be useful for developing SPFx (SharePoint Framework) solutions that require specific Node.js versions. For example, SPFx v1.17.1 requires Node.js v16 LTS, while SPFx v1.4.1 for SharePoint Server 2019 requires Node.js v8 LTS .

To use NVM for SPFx development, you need to follow these steps :

• Install NVM from https://github.com/coreybutler/nvm-windows/releases or use choco install nvm if you have Chocolatey installed.
• Run nvm install <version> to install the desired Node.js versions, such as nvm install 16.13.0 and nvm install 8.17.0.
• Run nvm use <version> to switch between Node.js versions, such as nvm use 16.13.0 or nvm use 8.17.0.
• Install the SPFx development tools with npm install -g yo @microsoft/generator-sharepoint gulp.
• Create a new SPFx project with yo @microsoft/sharepoint and follow the prompts.
• Run gulp serve to start the local web server and test your SPFx solution.

Using NVM can help you avoid compatibility issues and errors when developing SPFx solutions for different SharePoint environments.

I did an example after running nvm install 16.18.0 and nvm use 16.18.0:

1) I ran in the Powershell cli:

npm install gulp-cli yo @microsoft/generator-sharepoint --global

2) Created boiler plate web part code

yo @microsoft/sharepoint

3) Updated SharePoint URL

Locate and open the file ./config/serve.json in your project.

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}

4) Trust local environment.

gulp trust-dev-cert
gulp serve

or  you can use 

gulp serve --nobrowser

5) Here is the result

Keep learning, testing, and deploying. Then, repeat. Have fun!

Source:
Setup dev environment

Webpart hello world

Comments

[Jaime López]

Nice article!!!!

One quick question from here: do you need to specify the @microsoft/generator-sharepoint version package depending on the Node.js version you currently are or does it do it automatically?

[WilliamRamirez]

The answer is that the package does not automatically detect the Node.js version and adjust accordingly. You need to manually specify the version of the package that matches your Node.js version. For example, if you are using Node.js 10.x, you need to use @microsoft/generator-sharepoint@1.12.1 or higher. If you are using Node.js 14.x, you need to use @microsoft/generator-sharepoint@1.13.0 or higher. This ensures that you have the latest features and bug fixes for your Node.js environment.

[Jaime López]

Thanks!!!

Do you have a list with the relationship of the packages and tools versions? Like the one above that you answered. It would be really useful when working with some kind of "legacy" (understood in terms of old SPFX versions) developments.

[WilliamRamirez]

Here is the Microsoft documentation URL related to that.
SharePoint Framework development tools and libraries compatibility