Create-react-app: App Version

[iamdoron]

Hi,

I'm looking for a way to inject an app version, so it could be used by the app (for analytics, debugging, etc). Usually I use the app's package.json, taking advantage of npm version command. But import is only allowed from within src/ as can be seen in ModuleScopePlugin.

I wanted to know if there's another solution to this general problem (app versioning), or if the app's package.json can just be allowed to be imported by the scope plugin

As a workaround I just created a symlink to package.json in src/, which is nice, in a way, because you can see the app is dependent on it, but for me it's a common pattern (using the package.json), so maybe it's better just to allow it

[Timer]

I'm open to allowing package.json; we discussed this on some other issue but I'm not sure which.
We're open to a PR that allows this!

[iamdoron]

@Timer cool. opened PR https://github.com/facebookincubator/create-react-app/pull/2468

[evenchange4]

I have done the similar use case by adding REACT_APP_VERSION to build script:

+ "build": "REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') react-scripts build",

Also, you can set it to a constant while developing/testing.

// .env.development

REACT_APP_VERSION=0.0.0

source code

[jimniels]

As mentioned above, setting an environment variable in package.json prior to executing react-scripts can work (more info in this gist):

"build": "REACT_APP_VERSION=$(node -p 'require(\"./package.json\").version') react-scripts build"

The only problem there is when you need npm build (or npm start) to run in both windows and mac environments. You could try using cross-env to set the environment variable, i.e.

"build": "cross-env REACT_APP_VERSION=$(node -p 'require(\"./package.json\").version') react-scripts build"

But the problem there is windows won't execute the command substitution REACT_APP_VERSION=$(...) (idk what the equivalent of this is on windows...)

The only way i've figured out how to do this cross-platform is to hard-code the version info in package.json multiple times: once in version, and once in every scripts command where you need it (obviously less than ideal) i.e.

// package.json
"version": "1.0.0",
"scripts": {
  "build": "cross-env REACT_APP_VERSION=1.0.0 react-scripts build",
  "start": "cross-env REACT_APP_VERSION=1.0.0 react-scripts start"
}

This would give you access to your version number via process.env.REACT_APP_VERSION.

To me, a clearer, more straightforward approach that would work across platforms would be to enable support for importing package.json, i.e.

// in package.json
"version": "1.0.0"

// in index.js
import packageJson from '../package.json';
console.log(packageJson.version); // "1.0.0"

[jimniels]

Just learned this little trick: you can use $npm_package_version to access the current value of version in package.json (before react-scripts strips out all the env variables). To make this work across windows and Mac, you could leverage cross-env to do:

// in package.json
"scripts": {
  "start": "cross-env REACT_APP_VERSION=$npm_package_version react-scripts start"
}

This will make the current value of version in package.json accessible from inside your project via process.env.REACT_APP_VERSION (or in public/index.html via %REACT_APP_VERSION%)

If you're just targeting Mac, no need for cross-env. You can do:

// in package.json
"scripts": {
  "start": "REACT_APP_VERSION=$npm_package_version react-scripts start"
}

[Aprillion]

FTR: the PR is merged, so import { version } from '../package.json' works just fine as of react-scripts 1.0.13 (but as mentioned below, it will expose the whole package.json in the bundle, so don't use if you have sensitive info there)

[ZoeDreams]

Awesome! @Aprillion Works great, just tested it

I was having to do it like this before:

let remote = window.require('electron').remote;
let appVersion = remote.app.getVersion();

[moos]

BEWARE: import { version } from '../package.json' exposes the whole of package.json in the build bundle, not just the version!

[moos]

Since #3387 has been merged (available in 1.1.0), and following @jimniels awesome discovery, the version (and many other npm config params) can now be accessed from the .env* files and made available to the app:

// .env
REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name

[AhmedSayed77]

can this be extended to include "homepage"? so that we can use it as the base url for routing and ajax calls, etc

[Timer]

@AhmedSayed77 use process.env.PUBLIC_URL 😄 Please open an issue if you need more help.