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? :)

score 11 · Accepted Answer · answered Oct 29 '20 at 10:09

11

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

For example:

npm version minor

answered Oct 29 '20 at 10:09

Bertrand P

820
7
24

3

that's part of the solution but doesn't explain how to get it displayed – Andy Apr 10 '21 at 18:10

score 10 · Answer 2 · answered Sep 03 '21 at 16:24

10

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

answered Sep 03 '21 at 16:24

mikebridge

4,209
2
40
50

Thanks, this is working with `yarn` too. Is it okay to use `REACT_APP_VERSION=$npm_package_version` with `yarn`? – Sanka Sanjeewa May 26 '23 at 07:58
@SankaSanjeewa Yes, that should work – mikebridge Jun 26 '23 at 15:52

score 2 · Answer 3 · answered Apr 10 '21 at 18:19

2

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:

npm install genversion --save-dev
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)
In the React app, import { version } from './autobuild_version' and use as appropriate
Add src/autobuild_version.js to .gitignore (other source code control tools are available)
npm run build

answered Apr 10 '21 at 18:19

Andy

10,412
13
70
95

have to give version whole app, then should I add it in index.js file or anything else – hu7sy Feb 09 '22 at 07:36
genversion creates a separate file containing just the version number. you can import it wherever you like – Andy Feb 09 '22 at 15:19
we can import from .env file also why should I use this package :-| – hu7sy Feb 10 '22 at 07:15

score 1 · Answer 4 · edited Mar 16 '23 at 12:36

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.

score 0 · Answer 5 · answered Jan 30 '20 at 06:03

0

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?.

answered Jan 30 '20 at 06:03

VulfCompressor

1,390
1
11
26

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. – Andy Apr 10 '21 at 18:10

How to do app versioning in create react app?

5 Answers5