Environment Variables: .env files and env-cmd

Environment Variables, .env files and env-cmd¹⁰.1.0, React¹⁷.0.2, Created at July 21, 2021, Read Series…

Environment Variables are variables that are set by the Operating System. They are decoupled from application logic. They can be accessed from applications and programs through various APIs.

Chose most traditional approach, .env.* files, to define environment variables. This feature is available with react-scripts@1.0.0 and higher.

env-cmd ^10.1.0 npm package: A simple node program for executing commands using an environment from an env file.

npm install env-cmd or npm install -g env-cmd
npm run start:qa

.env.* files:

.env: Default.

.env.local: Local overrides. for all environments except test.

.env.development, .env.test, .env.production: Environment-specific settings.

.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

usage of .env.*:

npm start:.env.development.local, .env.local, .env.development, .env

npm run build:.env.production.local, .env.local, .env.production, .env

npm test:.env.test.local, .env.test, .env (note .env.local is missing)

definition of custom environment variables:

React custom environment variables starts with REACT_APP_.
Any other variables except NODE_ENV will be ignored.

reference custom environment variables:

React custom environment variables starts with REACT_APP_.
Any other variables except NODE_ENV will be ignored.

Example of qa environment

qa environment is not React default environment, as a custom environment example.

Example data file: public/todos_envTest.qa.json

Example environment file: .env.qa

REACT_APP_TODOLIST_DATAFILE_URL="/todos_envTest.qa.json"

Replace ‘/todos.json’ with process.env.REACT_APP_TODOLIST_DATAFILE_URL

// axios
- const url = '/todos.json';
+ const url = process.env.REACT_APP_TODOLIST_DATAFILE_URL;
// Or React fetch()
- fetch('/todos.json')
+ fetch(process.env.REACT_APP_TODOLIST_DATAFILE_URL)

scripts section in package.json

{
...
  "scripts": {    
    "start": "env-cmd -f .env.local react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build",
  }, 
...
}

npm run instead of npm

// todos_envTest.local.json should be used
// Start the web site with local environment variables in local
npm run start 
// todos_envTest.production.json should be used
// Build with production environment variables
npm run build
// todos_envTest.qa.json should be used
// Start the web site with qa environment variables in local
npm run start:qa 
// Build qa environment variables, built result under build folder.
npm run build:qa

Github commits is here: Basic-1.9. .env and env-cmd

Conclusion

.env.* files is most traditional approach to define environment variables
env-cmd also accepts other file format, e.g. .json files, which will define all environment variables per environment in one file.
Some env-cmdalternatives: e.g. dotenv, dotenv-webpack, cross-env