A way to know the version of the build of an React App

user_334963 0
Viewed 9879

We are using the create-react-app to create our client React app. We are deploying the app several times a week. We'd like to version every build so we can check which version is online.

I'm thinking about adding a meta tag with the version to the index.html file. So currently the header has:

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="/manifest.json" />
  <title>React App</title>
  <link href="/static/css/main.b100e6da.chunk.css" rel="stylesheet">
</head>

What do you think about adding a meta like this one:

<meta name="build-version" content="2019-10-08-15-42" />

With the content using the format: YYYY-MM-DD-HH-MM

What do you think about this idea? Or is there another way to version every build.

If it is a good idea, can you help me with some ideas on how to do it?

create-react-app reactjs
3 Answers

Thanks to the help of @Bhojendra Rauniyar I got this solution:

  1. Add this line to public/index.html:

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

  1. Run this 3 commands:
REACTBUILDVERSION=$(date +%Y-%m-%d)-$(date +%T)
sed -i -- 's/%REACTBUILDVERSION%/'$REACTBUILDVERSION'/g' build/index.html
echo React Build Version = $REACTBUILDVERSION

To make it comfortable, these 3 commands can be added to the build in package.json:

Original build in package.json:

"build": "react-scripts build",

NEW build in package.json:

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

After the build you can see this meta tag in the build/index.html:

<meta build-version="2019-10-16-16:31:43"/>
user_3349630

I follow the following approach (will add git branch name in the version):

# First add '<!-- version: %VERSION% -->' to your public/index.html file
$ yarn run build # npm run build (if using npm)
$ VERSION=`git rev-parse --abbrev-ref HEAD`
$ sed -i -- "s/%VERSION%/$VERSION/g" build/index.html

Now your build/index.html should contain <!-- version: name-of-the-current-branch -->.

source

To make it comfortable, you may add version command in package.json:

"build": "VERSION=`git rev-parse --abbrev-ref HEAD` && 
         react-scripts build && 
         sed -i -- 's/%VERSION%/$VERSION/g' build/index.html"

Now, you can simply run:

yarn build # or, npm run build
user_21387520

You can also add a version key pair to your package.json file "version": "1.0.0" and then you can read it anywhere in your code as follows let packageJson = require('./package.json') then doing packageJson.version should give you access to the version that is set in the package.json file a similar thing happens when the version is placed in app.json

user_111679620
Related