loading...
Cover image for Easily work across  multiple config environments in your React / Node.js app

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

turck__ profile image Mike Turck ・2 min read

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

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.

Posted on by:

turck__ profile

Mike Turck

@turck__

Full Stack Engineer | Cofounder @OmniscapeXR

Discussion

markdown guide