logo
Navigate back to the homepage

How to use version control to keep your web apps up to date

Kamlesh Chandnani
July 8th, 2017 · 2 min read

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. Then only you will be able to release the new version of your app to App Store/Play Store.

But how will you maintain versioning for your web apps?

Story Time!

In the early 90’s, there were server side languages like PHP, Java, and JSP, which helped all your users 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 advantages of the concepts like pre-caching, on demand load, rendering meaningful data at the same time, and so on.

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 not aware of how to use 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 apps 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 do 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 current 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.

But 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 builds based on a local Git repository.

Usage

  1. Add a tag to your commit.
1git tag <tag-name>
2git tag v1.0
  1. Add the following to your webpack config file:
1const GitRevisionPlugin = require("git-revision-webpack-plugin");
2const gitRevisionPlugin = new GitRevisionPlugin();
  1. Add webpack DefinePlugin in your plugins array.
1const plugins = [
2 new webpack.DefinePlugin({
3 APP_VERSION_INFO: {
4 VERSION: gitRevisionPlugin.version(), //returns the output of git- describe command
5 COMMITHASH: gitRevisionPlugin.commithash(), // returns last commit hash
6 BRANCH: gitRevisionPlugin.branch() // returns the branch name from which the build was run
7 };
8 })
9]
  1. Now use APP_VERSION_INFO anywhere inside your app as it will be globally available.
1console.log('Check App Version ', APP_VERSION_INFO);

Join the Newsletter

Subscribe to get the latest write-ups about my learnings from JavaScript, React, Design Systems and Life

No spam, pinky promise!

More articles from Kamlesh Chandnani

Service Worker and Server Side Rendering, hmm? 🤔

Create an offline experience for server side rendered applications

October 30th, 2020 · 4 min read

Server Side Rendering, the better way!

Set up Server Side rendering from scratch the easier and the scalable way

September 22nd, 2020 · 8 min read
Link to https://github.com/kamleshchandnaniLink to https://twitter.com/@_kamlesh_Link to https://www.youtube.com/playlist?list=PLpATFO7gaFGgwZRziAoScNoAUyyR_irFMLink to https://linkedin.com/in/kamleshchandnani