I like automatic revision numbers while I’m developing. I don’t have to manually be making changes while pushing packages out and testing. While working on a team I can see that others have made changes based on the build number alone. By seeing the number go up I am more confident that their change was deployed and I am testing a new release of their deployed code. In general I believe that is often overlooked for developers to manually update build numbers before deploying their test code or production code for that matter.

Skip to the bottom there is a nice write up from Stefan Bauer on ‘How to version new SharePoint Framework projects’. I like how he use npm for it’s versioning and then he ties it into SharePoint project versioning.


New call-to-actionThis article can be used in conjunction to his versioning or by itself and you can continue to manually increment your major/minor/patch versions.

Let’s Begin

You will make these changes in your projects gulpfile.js. The last line inside your gulpfile.js should be:


Modifications to the gulpfile.js

At the top require fs for file reading & writing

const fs = require('fs');

Add the function that will read json files.

var getJson = function (file) {
  return JSON.parse(fs.readFileSync(file, 'utf8'));

Add the function which will perform the version update and define a task called ‘bump-build-version’

let bumpRevisionSubTask = build.subTask('bump-revision-subtask', function(gulp, buildOptions, done) {
  var pkgSolution = getJson('./config/package-solution.json');
  var oldVersionNumber = String(pkgSolution.solution.version);
  gutil.log('Old Version: ' + oldVersionNumber);
  var oldBuildNumber = parseInt(oldVersionNumber.split('.')[3]);
  gutil.log('Old Build Number: ' + oldBuildNumber);
  var newBuildNumber = oldBuildNumber+1;
  gutil.log('New Build Number: ' + newBuildNumber);
  var newVersionNumber = oldVersionNumber.substring(0, String(oldVersionNumber).length - String(oldBuildNumber).length) + String(newBuildNumber);
  gutil.log('New Version: ' + newVersionNumber);
  pkgSolution.solution.version = newVersionNumber;
  fs.writeFile('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4));
  return gulp.src('./config/package-solution.json')

let bumpRevisionTask = build.task('bump-revision', bumpRevisionSubTask);

Finally add the line of code that will register your task as a pre-build task


Now when you run gulp serve, your packages.json file will automatically increment the 4th position (revision)

That’s it! each time you build it will auto increment the last digit here. Once I decide that I’m satisfied in the changes I will reset the build to zero and then bump the major, minor or patch depending on the level of change.

I find it useful to add in my projects, do you? Tell me what you think below.

More on NPM versioning

This is an older post that I came across while looking in to how to best version these SPFx projects. This gave some motivation and some better insight into how to leverage npm versioning inside my SPFx projects.



About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles