how to add versions to UI framework (React, VueJS, etc) application within the build

One of the frequently asked questions around is how to add versions to UI framework (React, VueJS, etc) application within the build process on Production or other environments, to avoid caching issues with Recursive pages.

 

Simply Adding a version to your index.html, would help the browser to understand that there's a new version of your JS/CSS been added or changed, which would include a new version number for all the auto-generated files as well.

 

I will take ReactJS as an example in this tutorial for the simple reason, and easy to implement.

1- We will start with the index.html file where we are going to assign the version 

...
<meta build-version="%REACTBUILDVERSION%"/>
...

 

2- We will look into the building process by adding some extra variables changer depending on the time of deployment as below, this would be a simple build generate process. Add the script below to the package.json file or any shell script file if needed to load the new version and attached it to the UI application.

scripts:

...

     "newVersion": "
REACTBUILDVERSION=$(date +%Y-%m-%d)-$(date +%T) && sed -i -- 's/%REACTBUILDVERSION%/'$REACTBUILDVERSION'/g' build/index.html && echo React Build Version = $REACTBUILDVERSION
",

...

 

The code above would read the index.html file from the build, and change the Variable we assigned in step one to write a new meta version instead of the variable. we can add this script after any build as below

 

scripts: 

 "newVersion": "
REACTBUILDVERSION=$(date +%Y-%m-%d)-$(date +%T) && sed -i -- 's/%REACTBUILDVERSION%/'$REACTBUILDVERSION'/g' build/index.html && echo React Build Version = $REACTBUILDVERSION
",
"buildNew": "npx react-scripts build && npm run newVersion"

 

and we are done here to add a version to our new UI application, now when we run build the react would automatically generate new date and update your build version after.

Another way:

You can modify the version or variable process the way you like.

 

The best practice process of versioning your Modern Framework is to use Environmental variables as below

1- Add the version variable within the .env file of your root

VERSIONNOW='1' // modify it when needed to deploy new version

2- Add the meta version for the index.html file within your UI public folder

<meta build-version="%VERSIONNOW%"/>

 

2- Create a new shell/bash file script to generate the version and modify the HTML file. buildVersion.sh

# buildVersion.sh

#!/bin/bash

# By Sam Ayoub

source .env
 sed -i -- 's/%VERSIONNOW%/'$VERSIONNOW'/g' build/index.html

echo UI Application Build Version = $VERSIONNOW

 

3- Now we just add the script after the build in our package.json file

scripts: 
"buildNew": "npx react-scripts build && source ./buildVersion.sh"

and we are done!

please leave comments if you find this helpful