Article
0 comment

How to use specific NodeJS version with your SPFx project

Like I promised yesterday. You can even run a specific SPFx generator version with a specific NodeJS version through the help of NPM.
While it might not is a practical approach it can help you sometimes when you like to run for example an older version of the project to test some behaviour before you fix the issues.

The NPM package ‘node’

Yes, there is an NPM package named ‘node’, and this allows you to install the node binaries to your project. So instead of running the globally installed version, you use the local runtime.

Node the npm package – not to confuse with NodeJS – this is just a runtime

So let us try out to create a new project using SPFx 1.2 and run it on NodeJS version 6.0.

npx -p node@6 -p yo -p @microsoft/[email protected] yo @microsoft/sharepoint

The new package reference in this command responsible for a specific NodeJS version is defined by ‘-p node@6’ was added. Another thing to change is the ‘generator-sharepoint’ version number to ‘1.2.0’.

The running generator - on NodeJS version 6.x.x

The running generator – on NodeJS version 6.x.x

Now the generator ran and used NodeJS 6.x.x. Since ‘NPX’ uses the command once and then forget about it when you launch now the workbench through ‘gulp serve’ you still fall back on your currently installed version.

For this situation, there is also a solution available and again through the help of ‘NPX’.

Check the run context and run workbench on NodeJS 6.0

To make sure that now ‘gulp server’ now runs on a different version than the global installed let’s add a marker to the gulp file.

console.log('You are running on NodeJS: ', process.version);

This line of JavaScript should print the current NodeJS version on the console

Testing the NodeJS version gulp is running on

Testing the NodeJS version gulp is running on – obviously the latest

Well, we get an error on the console too, but this is expectable. We installed the new project based on NodeJS 6.x.x not the version 8.x.x. All binary component like the SASS compiler was created using the wrong NodeJS version.

Errors cause because the projects was created with a different NodeJS version

Running the project that was built on NodeJS version 6 and not for NodeJS version 8 is not possible because all binary components, yes there are some binaries included, cannot be started. It can be fixed fairly quickly through a rebuild.

npm rebuild

We like to run ‘gulp serve’ on version 6 of NodeJS directly from our project, so, for now, we are okay with this issue. The solution is to launch the gulp server through NPX again instead of running it directly.

npx -p node@6 gulp serve

The gulp task and workbench launch now without any error we can test run, for example, old project on the version initially used.

Project runs now on NodeJS version 6 - the same used for project creation

The project runs now on NodeJS version 6 – the same used for project creation

What else?

The possibilities through NPX are endless. It is an excellent tool for going back in time and run projects on specific older NodeJS version. In case you do a hotfix old project without upgrading them directly, which you should do. You decide when it is the right time to move forward, and there are might issues that arise during the upgrade.

Another use case I like to use in future is to run the PNP/SPFx generator on different NodeJS versions to see possible problems I face with future releases. Oh yes and by the way you can give the PNP/SPFx generator a try through the following command.

npx -p yo -p @pnp/generator-spfx yo @pnp/spfx
Running @pnp/spfx generator through npx

Running @pnp/spfx generator through npx

If you like what you see, you can then install it to your global package collection through:

npm i -g @pnp/generator-spfx

As I said, NPX can be super useful for many situations where you might now need a full setup of a new NVM environment.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.