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:

* PORT - dev server port
* NODE_PATH - directory name to be resolved to the current directory as well as its ancestors, and searched for modules. It is resolve.modulesDirectories for webpack. More details at node official doc "Loading from the global folders"

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:

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

$3

use --env-file* flag

`
react-app-env --env-file=configs/local.env start
`

$3

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

$3

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