“A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.” – Wikipedia.

“Software versioning is the process of assigning either unique version names or unique version numbers to unique states of computer software. Within a given version number category (major, minor), these numbers are generally assigned in increasing order and correspond to new developments in the software.” – Wikipedia.

It goes without saying that most modern day web applications are fast catching up to be single page applications, that are proving to be as interactive as a desktop application with fluid user experience with responsive attributes to fit any device. This article attempts to describe the software application versioning schemes of modern web applications that can adopt two different application versioning schemes – an internal version number that may be incremented many times a day, such as per revision, and a released version that typically changes far less often such as semantic versioning, such as per release.

The application versioning of single page applications holds critical significance as modern day web applications are built with a host of dependencies, the bigger your system grows the more packages we integrate into software. Here comes semantic software versioning, with simple set of rules as follows:

MAJOR.MINOR.PATCH

  • Increment major version when you make incompatible API changes,
  • Increment minor version when you add functionality in a backwards compatible manner,
  • Increment patch version when you make bug fixes that are backward compatible.

The actual numbers used to denote major, minor and patches in real-world software applications is hardly universal and in most scenarios version numbers are mostly tags used for troubleshooting software issues.

Tools for versioning single page application

The starting point of setting up a single page app undoubtedly is the package.json file. This file can simply be initialized using npm as follows:

$ npm init

npminit

 

This command will walk through a set of questions about your applications, one of them will be a version number. For a brand new application, it is a good practice to start off with a minor version say 0.1.0 and then increment the minor version with every new release. When your application gets deployed to production for the first time you have a 1.0.0.

While there are numerous utilities that increment application version specified in your package.json file, your choice of tools should specifically work with semantic versioning (SemVer 2.0 Specification) that is used in package.json file.

  • Incrementing application version using npm-version

Application version specified in package.json file above, can be easily bumped using npm-version. This command is as simple as:

$ npm version

This option has multiple options to update major, minor or patch revision numbers. For more information, please visit: https://docs.npmjs.com/cli/version

  • Incrementing application version using gulp-bump.

Depending upon if your preferred build tooling is gulp or grunt, you may want to choose something similar to gulp-bump or grunt-bump and include a task to update the package version. This process includes the following steps:

Install Gulp-Bump

$ npm install gulp-bump –save

Using Gulp-Bump

var gulp = require('gulp');
var bump = require('gulp-bump');

Lastly, specify the key to versioning off and include the task in your gulp build action.

gulp.task('bump', function(){
gulp.src('./package.json')
.pipe(bump({key: "version"}))
.pipe(gulp.dest('./'));
});

Great! It is so much easier to increment the version number using bump. The next common question would be publishing/displaying the version number on the single page application.
If you are using a tool like webpack, it makes perfect sense to find a json loader such as json-loader that can be used to include the package.json in the packed version of the software, define an alias for package.json file and require it in the component used to display the version number. The following section details this process as follows:

Install json-loader

npm install json-loader

Add json loader to your list of loaders in webpack config.

loaders: [{ test: /\.json$/, loader: "json-loader"}]

Define an alias to package.json

resolve: {
alias: {
packageJson: path.resolve('../../package.json'),

Add a requires to packageJson alias created above and use in your JS component used to present the version information.

var pjson = require('packageJson');
{ pjson.version }

Happy Coding!