Skip to content

Instantly share code, notes, and snippets.

@paulfermoreyes
Created March 22, 2023 14:19
Show Gist options
  • Save paulfermoreyes/60575067fbdd2f6e126266aad550acdb to your computer and use it in GitHub Desktop.
Save paulfermoreyes/60575067fbdd2f6e126266aad550acdb to your computer and use it in GitHub Desktop.
React version in prod

There are several ways to get the current version of a deployed React application in the browser, but one recommended approach is to use a package called "react-scripts" which comes with Create React App, a popular React development tool.

To get the current version using react-scripts, follow these steps:

  1. Install react-scripts by running the following command in your project's root directory:
npm install react-scripts --save-dev
  1. In your React app, create a new file called version.js in the public folder.
  2. Inside the version.js file, add the following code:
const version = process.env.REACT_APP_VERSION;
console.log(`Version: ${version}`);

This code reads the REACT_APP_VERSION environment variable, which can be set in your build pipeline to contain the current version number.

  1. In your index.html file, add a script tag to include the version.js file:
<script src="%PUBLIC_URL%/version.js"></script>

In your build pipeline, set the REACT_APP_VERSION environment variable to the current version number before building and deploying the app.

After the app is deployed, open the developer console in your browser and you should see the current version number logged.

By using this approach, you can easily get the current version of your deployed React app in the browser, which can be useful for debugging and troubleshooting purposes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment