How to do app versioning in create react app?

Question

I need to display version of my react app in the footer in x.y.z format.

I need this version to increment every time I deploy the app by being provided a choice if I want to increment x or y or z.

How do I achieve this? :)

Dhow

Answer 1

To bump the version of your app you can use npm version.

For example:

npm version minor

Whoa

that's part of the solution but doesn't explain how to get it displayed – Fulgurous

Answer 2

Once you have a way to bump the version in package.json (e.g. npm version, as suggested by @bertrand-p), you can then assign the version to an environment variable. For example, in .env you can set:

REACT_APP_VERSION=$npm_package_version

Then you can access the variable from within your app via process.env.REACT_APP_VERSION.

See also: https://github.com/facebook/create-react-app/issues/2466#issuecomment-357490359

Katerinekates

Thanks, this is working with yarn too. Is it okay to use REACT_APP_VERSION=$npm_package_version with yarn? – Gavra

@SankaSanjeewa Yes, that should work – Katerinekates

Do you know if I could link that to git's branch hash (git rev-parse HEAD)? – Diandre

@Diandre I would assume you could override it with an arbitrary value from the shell e.g. REACT_APP_VERSION=$(git rev-parse HEAD) npm run build – Katerinekates

Answer 3

I don't think the answers from @Bertrand P or @VulfCompressor tell the complete picture. I used genversion https://www.npmjs.com/package/genversion. The steps I did were:

1. npm install genversion --save-dev
2. Modify the build script in package.json to genversion --es6 src/autobuild_version.js && react-scripts build (I couldn't figure out a way to import the generated module from the lib directory as suggested in the genversion documentation so I had to put it in the src directory instead)
3. In the React app, import { version } from './autobuild_version' and use as appropriate
4. Add src/autobuild_version.js to .gitignore (other source code control tools are available)
5. npm run build

Fulgurous

have to give version whole app, then should I add it in index.js file or anything else – Ahimsa

genversion creates a separate file containing just the version number. you can import it wherever you like – Fulgurous

we can import from .env file also why should I use this package :-| – Ahimsa

Answer 4

You can use npm commands below in different conditions mentioned below and the commands will effect the version number in package.json in your react project. You can access that version by installing dotenv by npm i dotenv oryarn add dotenv and use the .env file in your root folder and access the version number in the whole app with REACT_APP_VERSION=$npm_package_version. You can find more commands at npm version documentation page. commands below will add to version numbers like this: "version":"{major}.{minor}.{patch}"

If its a major change(bug fixing) in your app use:

npm version major

If its a minor change(bug fixing) in your app use:

npm version minor 

And if it's just a patch upgrade such as changing some styles use:

npm version patch

You can use versioning for many purposes and one of them is for making sure client's cache will be renew and they would have the updated content.

Nodarse

Answer 5

You can use grunt-bump to handle your app versioning. As for displaying your app version, refer to Is there a way to get version from package.json in nodejs code?.

Flatting

create react app isn't nodejs code - it's client-side javascript code and the accepted answer to that question is dangerous to do in the client. – Fulgurous