How to version new SharePoint Framework projects (addition)

By | 2016-11-22

Today I came across the excellent blogpost of Stefan Bauer on how to version your new SharePoint Framework projects. And I just wanted to add a small piece to his idea.

Each WebPart in your SharePoint Framework project has a separate Manifest file with a version number in there too. This version number is also in the format of the semantic version number format. And you can keep this semver in sync with your solution semver.

Add the following gulp task code to the gulp task Stefan already laid out in his blogpost:

  // process webpart manifests too
  gulp.src('./src/webparts/*/*.manifest.json').pipe(tap(function(file,f){
    // load the webpart manifest
    var wpManifest = require(file.path);
    // update the version nr of the webpart manifest
    wpManifest.version = pkgConfig.version;
    // log the new version
    gutil.log('New Manifest Version ' + wpManifest.alias + ' \t' +pkgConfig.version);
    // write changed webpart manifest file
    fs.writeFile(file.path, JSON.stringify(wpManifest, null, 4));
  }));

Now when you use “npm version patch” to update the semver of your solution your webpart manifests will be updated too:

MacBook-Pro-2:HelloWorld stefvanhooijdonk$ npm version patch
v1.0.26

> hello-world@1.0.26 postversion /Users/stefvanhooijdonk/Documents/Projects/HelloWorld
> gulp version-sync

Build target: DEBUG
[15:00:09] Using gulpfile ~/Documents/Projects/HelloWorld/gulpfile.js
[15:00:09] Starting gulp
[15:00:09] Starting 'version-sync'...
[15:00:09] Old Version:	1.0.25.0
[15:00:09] New Solution Version:	1.0.26.0
[15:00:09] Finished 'version-sync' after 8.03 ms
[15:00:09] New Manifest Version HelloWorldPartWebPart 	1.0.26
[15:00:10] ==================[ Finished ]==================
[15:00:10] Project hello-world version: 1.0.26
[15:00:10] Build tools version: 0.11.1
[15:00:10] Node version: v6.1.0
[15:00:10] Total duration: 2.46 s

The complete gulpfile.js would become:

'use strict';

const gulp = require('gulp');
const tap = require('gulp-tap');
const build = require('@microsoft/sp-build-web');

build.initialize(gulp);

gulp.task('version-sync', function () {

  // 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;  

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

  // write changed package-solution file
  fs.writeFile('./config/package-solution.json', JSON.stringify(pkgSolution, null, 4));

  // process webpart manifests too
  gulp.src('./src/webparts/*/*.manifest.json').pipe(tap(function(file,f){
    // load the webpart manifest
    var wpManifest = require(file.path);
    // update the version nr of the webpart manifest
    wpManifest.version = pkgConfig.version;
    // log the new version
    gutil.log('New Manifest Version ' + wpManifest.alias + ' \t' +pkgConfig.version);
    // write changed webpart manifest file
    fs.writeFile(file.path, JSON.stringify(wpManifest, null, 4));
  }));
});

 

2 thoughts on “How to version new SharePoint Framework projects (addition)

  1. Sumit Gupta

    When Stefan wrote this post, I wanted to comment on his blog as to how you can add a bit more code snippet and improve the whole thing and I am glad you did 🙂
    Thanks a ton for the post, keep’em coming!

    Reply
  2. Yonas Jongkind

    Hi,

    In the recent template from yo, the webpart template has this text in it:

    // The “*” signifies that the version should be taken from the package.json
    “version”: “*”,

    And seems to grab the version from the package. So the updating in the web part versions is no longer necessary.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

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