Have you ever wanted to run an older version of the SPFx generator? Maybe on an existing project to add some new assets? It is possible without any installation of the generator at all. Recently a tool was released inside your NPM installation that is named ‘NPX‘.
In short, NPX is a tool that allows you to run npm binaries and packages without having them installed locally. This tool got first released in NPM 5.2.0.
How it works then?
I not go into the details too much what this npxcommand is capable of and focus more on the fundamental understanding. The first step is to define the packages you need to execute a specific command. In the case of the SPFx generator, those are two packages needed.
- yo
- @microsoft/generator-sharepoint
With that the command needs to look like this:
npx -p yo -p @microsoft/generator-sharepoint
When you execute this command, it gives you the latest SPFx generator, but you can also target a specific version. Just add the version you are aiming for at the end of the ‘@microsoft/generator-sharepoint’ definition. In case of SPFx version 1.4.1, the command looks like this then.
npx -p yo -p @microsoft/[email protected]
If you have some additional packages all, define them you using a simple ‘-p’ as for packages option.
To run the generator then you need to add the regular start command after your packages definition, and the final command looks like this:
npx -p yo -p @microsoft/[email protected] yo @microsoft/sharepoint
With this options, you are ready to go and run an older or newer version of the generator without the need to have it installed.
NPX allow you to create a new project on a specific SPFx version
To check that the project has successfully executed an older version of the generator check the version numbers in the package.jsonfile.
Verification of the correct package references ins package.json
How to add a new web part to an existing project?
Just use the same command as shown before. Got to your project directory and run.
npx -p yo -p @microsoft/[email protected] yo @microsoft/sharepoint
The output on your screen should look similar to mine.
Add an additional web part to the project
Create a command shortcut in your project?
While you can always look up your project version in the ‘package.json’ file to figure out what the exact version, an easier approach would be to have a shortcut for that. The easiest way to accomplish this is to define an npm script entry in the ‘package.json’ file.
NPM Script shortcut to create a new asset
I defined a new key with the name add that, and as a value, I defined the command with the specific SPFx version number included.
To run this script execute:
npm run add
This way you use it more like a regular CLI command but leads to the same result.
Execution of npm script to add a new asset
Last words to succeed
Like I demonstrated before it is a pretty charming way to run and execute event older SPFx versions. There is one thing essential to succeed. The ‘@microsoft/generator-sharepoint’ need to be entirely removed from your system before — the reason is that the generator internally always look up the globally installed generator and always uses the generator you have globally install rather than the specified one. Let us say you already have installed version ‘1.7.0’ of the SPFx generator then ‘1.7.0’ instead of ‘1.4.1’.
To uninstall:
npm uninstall @microsoft/generator-sharepoint
Tomorrow I extend this example a bit more because you can also target the NodeJS version directly from your project but have the most recent one installed on your machine.
What do you think about this method, please let me know in the comments below.