Versioning Your Web Apps

Version Control helps you keep track of which users are using what version of your app.

With native apps you have to maintain the versioning of your app with each build, only then would you be able to release a new version of your app to App Store/Play Store.

But how will you maintain the version for your web apps?

Story Time!

In the early 90’s there were server-side languages like PHP, Java and JSP, RoR where you rested assured that all your users will always get the latest version of your web app.

But now Web Apps have reached a new level. Everything is client-side! Hence we can take advantage of the concepts like pre-caching, on-demand load, rendering meaningful data at a time, etc.

But this can also introduce issues if the user always accesses the cached copy of our web app.

Imagine a Saas company whose end users are laymen and are unaware of using the web apps/next generation web apps/PWAs in the right way.

When it comes to modern web apps like PWAs you cannot ensure that all your users are using the latest copy of your app’s code.

Assume that you have shipped your web app for the first time and the users have started using it. The app gets cached after the first visit and thereafter on each repetitive visit, the user will get the cached copy of your app until the new version of your app’s code is available. Everything works smoothly but now assume that after some time over the next iteration, you added some new functionality to your existing web app and deployed the new piece of code/bundles.

***BOOM***

How will you ensure that your users are using the latest version of your web app?

How will you identify how many users are still using the old version of your app?

All these questions encourage you to maintain and store the version of your web app so that whenever the users are using your app the app version is also getting stored in the DB server.

The mystery of “How” to maintain versions remains unsolved!

Git Revision Webpack Plugin comes to your rescue if you use webpack for bundling your code.

It is a Simple webpack plugin that generates VERSION and COMMITHASH files during build based on a local git repository.

Usage

1. Add a tag to your commit.

syntax: git tag <tag-name>
git tag v1.0

2.  Add the following to your webpack config file.

const GitRevisionPlugin = require("git-revision-webpack-plugin");
const gitRevisionPlugin = new GitRevisionPlugin();

3. Add webpack DefinePlugin in your plugin array.

const plugins = [
.....
new webpack.DefinePlugin({
APP_VERSION_INFO: {
  VERSION: gitRevisionPlugin.version(), //returns the output of git- describe command
  COMMITHASH: gitRevisionPlugin.commithash(), // returns last commit hash
  BRANCH: gitRevisionPlugin.branch() // returns the branch name from which the build was run
};
})
...
]

4. Now use APP_VERSION_INFO anywhere inside your app as it will be globally available.

console.log('Check App Version ', APP_VERSION_INFO);
If you enjoyed reading this article don't forget to share with others!
This site is registered on wpml.org as a development site.