Run create-react-app application with env variables.
Better Use dotenv
"scripts": {
"run": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=dev.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 expect:
- 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:
const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
const apiHost = process.env.REACT_APP_API_HOST;- use --env-file flag
react-app-env --env-file=configs/local.env start
npm i --save-dev react-app-env
"scripts": {
"start": "react-app-env start",
"build": "react-app-env build",
"test": "react-app-env test",
}