Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-app-env
Advanced tools
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.
There is Issue and PR to create-react-app repository to support different env configs. https://github.com/facebookincubator/create-react-app/issues/1343
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"
}
Cozy and cross OS create-react-app application runner with environment variables.
Default environment files:
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;
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",
}
FAQs
Run create-react-app application with env variables
The npm package react-app-env receives a total of 1,917 weekly downloads. As such, react-app-env popularity was classified as popular.
We found that react-app-env demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.