How to do app versioning in create react app? - reactjs

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

Answer 1

To bump the version of your app you can use npm version.
For example:
npm version minor

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

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

Answer 4

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

Answer 5

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