Run create-react-app application with env variables
Switch branches/tags
Clone or download
Latest commit 98adb3a Oct 18, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ add trims and udpate REAMDE Dec 22, 2016
bin initial Dec 22, 2016
lib parse-env-file.js Oct 18, 2018
.gitignore initial Dec 22, 2016
README.md Update README.md Nov 22, 2017
package.json v1.2.3 Oct 18, 2018
yarn.lock fix windows issue Jun 13, 2018

README.md

Deprecated

CRA supports multiple .env configs out of the box Feature/different env config files #1343

Docs - Adding Development Environment Variables


Run create-react-app application with env variables.

Create react app PR

There is Issue and PR to create-react-app repository to support different env configs. https://github.com/facebookincubator/create-react-app/issues/1343

Better Use dotenv

create-react-app read variables from .env config out of the box. But if you need to read from custom config - update npm scripts:

"scripts": {
  "start": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=development.env",
  "build": "node -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=production.env"
}

React app env

Cozy and cross OS create-react-app application runner with environment variables.

Default environment files:

  • start and test script - development.env
  • build script - production.env

Environment file example ./development.env

GOOGLE_CLIENT_ID = XXX_YYY_ZZZ
API_PROTOCOL = http:
API_HOST = localhost:9876
API_PREFIX = api
API_SECURITY_TOKEN = access_token

NODE_PATH = src/scripts
PORT = 9001

react-app-env will automatically add REACT_APP prefix to each env variable except:

With this environment file defined above:

react-app-env start

equals to

cross-env REACT_APP_GOOGLE_CLIENT_ID=XXX_YYY_ZZZ REAC_APP_API_PROTOCOL=http: REACT_APP_API_HOST=localhost:9876 REACT_APP_API_PREFIX=api REACT_APP_API_SECURITY_TOKEN=acess_token NODE_PATH=src/scripts PORT=9001 react-scripts start

Use environment variables:

const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
const apiHost = process.env.REACT_APP_API_HOST;

Custom env files

  • use --env-file flag
react-app-env --env-file=configs/local.env start

Install

npm i --save-dev react-app-env

npm scripts

"scripts": {
  "start": "react-app-env start",
  "build": "react-app-env build",
  "test": "react-app-env test",
}