6

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

Vinay Sharma
  • 2,594
  • 2
  • 20
  • 51

4 Answers4

5

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

For example:

npm version minor
Bertrand P
  • 640
  • 5
  • 21
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

mikebridge
  • 3,739
  • 2
  • 36
  • 45
1

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
Andy
  • 9,149
  • 11
  • 61
  • 85
  • 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
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?.

VulfCompressor
  • 1,356
  • 1
  • 11
  • 25
  • 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