When you like to version your SPFx solutions correctly, then it is not enough to upgrade only the ‘package-solution.json’ in the config folder. You might also want to upgrade the ‘package.json’ file with a corresponding version number too.
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.
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.
In case you recently upgrade NPM to Version 6.0 and created a new SharePoint Project through the Yeoman generator. There is a chance that you recognised the following new notification at the end of the NPM installation process.
What there are five vulnerabilities, one with severity low and four with severity high and I can run ‘npm audit’ to get a detailed report?
Don’t start to scream “fire” and run in panic through your office, uninstall all your SPFx projects from all your tenants, clean up your CDN, keep calm and learn the reason why this gets now reported after the installation.
A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.
To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.
Now the SharePoint Framework has become general available I expect that it requires only to update only the npm packages mostly. A simple upgrade of the installed packages will be enough in future. During the beta phase you add to do manual step in addition to upgrade your project to the latest drop.
With every new drop of the SharePoint Framework it seems that always the same procedure needs to be executed to update existing projects.
npm is capable of scripting. To be able to execute a script, it needs to be added to the ‘package.json’ file.
Open the ‘package.json’ and look out for the script section. To register the update script create a new entry “update-spfx” and chain all commands delimited by ampersand together.
"build": "gulp bundle",
"clean": "gulp nuke",
"test": "gulp test",
*** Update 21.09.2016 for Drop 4 of SPFX use the following update-spfx command ***
"update-spfx": "npm install @microsoft/sp-client-base@latest @microsoft/sp-client-preview@latest --save & npm install @microsoft/sp-build-web@latest @microsoft/sp-module-interfaces@latest @microsoft/sp-webpart-workbench@latest --save-dev & npm prune & npm dedupe & gulp nuke & gulp"
Now you are ready to execute the following command
npm run update-spfx
After all the steps have been finished, you are ready to go with your new drop of the new SharePoint Framework.
If you think it feels like hacking. Well, it is the normal way to handle such things in NodeJS.
For the next drop or a version of the SharePoint framework you just need to execute the script again. In case something have changed please check out the documentation or simply modify the update script to the changed requirements.
How it works
Like mentioned before you can chain all the commands together. The first part contains
npm update. After the update you can specify all the node modules you like to update. You can simply add all packages right after the update and don’t need to update them individually.
You also don’t need to fumble around with the package versions the
npm update command does this for you.
I this case we had three packages to update.
Right after the package name you see and additional @-sign. This defines to which version you like to update. ‘@latest’ indicates the latest version which actually is the version of the current drop. Luckily, there is only latest version with every new drop.
The next commands that needs to be executed are
npm prune, followed by
npm dedupe, followed by
gulp nuke, followed by
In case you like to make sure you really rebuild your project can use
gulp build. This will explicitly call a rebuild. The next update can come and you only need to execute
npm run update-spfx again. Before you execute you should definitely check if something might have been changed.
In this case you can add or modify the commands.
Final hint – npm rebuild
The new SharePoint Framework contains a lot of binary components. Those components needs to be rebuilt / recompiled on your client first.
Sadly rebuild only happens when you install a package, but not during an update. The additional command that needs to be executed in this case is.
Optionally you can change this command to your
npm update script too. In this case make sure that all those components are freshly built. Eve if not required it won’t hurt your installation.