Automating SharePoint Framework Solution Versioning with Gulp and NPM
Tags: spfx, gulp, npm
Published: 2024-06-27 06:57:42

---
title: Automating SharePoint Framework Solution Versioning with Gulp and NPM
published: true
date: 2024-06-26 09:00:00 UTC
tags: SPFx, gulp, npm
canonical_url: https://iamguidozam.blog/2024/06/26/automating-sharepoint-framework-solution-versioning-with-gulp-and-npm/
---

If you’re like me and want to automate the versioning of a SharePoint Framework solution you’re in the right place!

I use this in most of my SPFx projects to keep synchronized the property **version** of the _package.json_ and _package-solution.json_ files.

* * *

If you’re interested in the code you can find a sample web part solution [here](https://github.com/GuidoZam/blog-samples/tree/main/web%20parts/MaintainPackageVersion).

* * *

To enable the synchronization automation first add the following code to the _gulpfile.js_:

```
gulp.task("sync-version",
 gulp.series(function (resolve) {
 // import gulp utilits to write error messages
 const gutil = require("gulp-util");

 // import file system utilities form nodeJS
 const fs = require("fs");

 // read package.json
 var pkgConfig = require("./package.json");

 // read configuration of web part solution file
 var pkgSolution = require("./config/package-solution.json");

 // log old version
 gutil.log("Old Version:\t" + pkgSolution.solution.version);

 // Generate new MS compliant version number
 var newVersionNumber = pkgConfig.version.split("-")[0] + ".0";

 // assign newly generated version number to web part version
 pkgSolution.solution.version = newVersionNumber;

 // Update every feature version
 for (var i = 0; i < pkgSolution.solution.features.length; i++) {
  let f = pkgSolution.solution.features[i];
  f.version = newVersionNumber;
 }

 // log new version
 gutil.log("New Version:\t" + pkgSolution.solution.version);

 var pkgSolutionString = JSON.stringify(pkgSolution, null, 4);

 if (pkgSolutionString && pkgSolutionString.length > 0) {
  // write changed package-solution file
  fs.writeFile("./config/package-solution.json",
				pkgSolutionString,
				(err) => {}
  );
 }

 resolve();
}));
```

The code adds a custom **sync-version** command that execute the following steps:

- read the _package.json_ file
- read the _package-solution.json_ file
- parse the version of the _package.json_ file and set it to the _package-solution.json_ file.

At this time the question would be: Ok, but how do it increase the version?

The answer is simple, the version increase is handled by the following NPM command:

```
npm version patch
```

The command increase the patch part of the version string, there are other supported parameters that you can check on [the official documentation](https://docs.npmjs.com/cli/v6/commands/npm-version).

> For a quick reference about how is the version string composed you can have a look at the NPM semantic versioning documentation [here](https://docs.npmjs.com/about-semantic-versioning%C3%B9).

Proceding with the setup the next thing would be to add a custom script in the _package.json_ file where, beside the build/clean/bundle and package-solution commands, there are also the NPM increase version and the custom gulp command to synchronize the version:

```
"scripts": {
  ...omitted for brevity...
  "package": "gulp build && npm version patch && gulp sync-version && gulp clean && gulp bundle && gulp package-solution"
},
```

Finally, to execute all the previous commands you can simply run the following:

```
npm run package
```

This will perform all the following operations just by running a simple command:

- `gulp build`
- `npm version patch`: the NPM script to increment the version patch.
- `gulp sync-version`: the custom GULP command to synchronize the version from the _package.json_ file to the _package-solution.json_ file.
- `gulp clean`
- `gulp bundle`
- `gulp package-solution`

In the end an SPPKG file of the solution will be created with the updated version.

For a production package you can enhance the commands using the `--ship` flag:

```
"scripts": {
  ...omitted for brevity...
  "package:prod": "gulp build && npm version patch && gulp sync-version && gulp clean && gulp bundle --ship && gulp package-solution --ship"
},
```

The NPM command to execute the production package will be:

```
npm run package:prod
```

I sincerely hope that this article helped you with your SharePoint Framework solution versioning and if you have any improvements or suggestions please let me know.

Hope this helps!