如何在创建反应应用程序中进行应用程序版本控制？

Question

I need to display version of my react app in the footer in xyz 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

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

Answer 4

Once you have a way to bump the version in package.json (eg 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