Easily work across multiple config environments in your React / Node.js app
Tags: react, javascript, node, webdev
Published: 2020-07-23 00:36:34

# 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_`**

```bash
# 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 
```json
"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:
```react
import React from 'react'

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


export default App;
```

### Now start the app!
Run
```bash
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.