Easily work across multiple config environments in your React / Node.js app

Use Case

You work on a React or Node.js app that exists in multiple environments i.e. dev, staging, production.

Each environment has a unique configuration. Perhaps your dev environment calls localhost to simulate external API calls while your production environment calls a live server.

In these types of scenarios, you'd like an easy way to switch between environment configurations during development/deploymnet without modifying your app code. Ideally, you would like to store all your environment variables in a single config file based on environment i.e. your might use env.dev, env.staging, env.prod. Then you can activate these environment variables on app startup.

The env-cmd package saves the day!

env-cmd allows you to select a desired config file to be used in your package.json startup scripts.

For example, you might use yarn start:dev to select your .env.dev configuration for testing on your local machine.

How To use env-cmd

You will want to navigate to a sample project or create a new one. For this example, I will create a new project using create-react-app

# create a new project
npx create-react-app multiple-env-example

# navigate into the project folder
cd multiple-env-example

bash

Install the env-cmd package

yarn add env-cmd

Create your .env files

For this example, we'll create two environment files: one for dev, and one for production. Each file will list a single REACT_APP_TEST_VAR variable.

DO NOT STORE SENSITIVE INFO IN THESE FILES. This configuration is intended for public info such as API endpoints and urls. Secret keys should be stored separately and not placed into version control.

Note: If you are using React, your environment variables must start with REACT_APP_

# create a .env.dev file with one env var
cat >> .env.dev << EOF 
REACT_APP_TEST_VAR=development 
EOF

# create a .env.prod file with one env var
cat >> .env.prod << EOF
REACT_APP_TEST_VAR=production
EOF

Add env-cmd into your package.json start scripts

In your package.json file, add the following into scripts

"scripts": {
    "start:prod": "env-cmd -f .env.prod react-scripts start",
    "start:dev": "env-cmd -f .env.dev react-scripts start",
}

Add the environment variable into your file

Environment variables should be prepended with process.env.

For this example, replace src/App.js ( if using create-react-app ) with the following:

import React from 'react'

const App = () => <h1>{process.env.REACT_APP_TEST_VAR} environment</h1>


export default App;

Now start the app!

Run

yarn start:dev

Your screen should say development environment!

Likewise, if you run yarn start:prod it will say 'production environment`!

Conclusion

Working with multiple environment configurations in your app doesn't need to be difficult. The env-cmd package makes it easy to declare which environment file you would like to use.

These environment configurations can be version controlled as a way of documenting external services over time. Just remember not to store sensitive information in these files as they will be public.

Comments

[José Pablo Ramírez Vargas]

Hello. Your post caught my eye because I actually can offer a superior solution: wj-config.

• Can add multiple data sources, from imported JSON to hardcoded JSON to fetched JSON and environment variables.
• Extensible. One can create custom data sources.
• It actually has a mechanism that converts URL values into functions that can do route value replacement and dynamic query strings.

And more. Check it out! I will be grateful for any feedback.