Summary

The article outlines a method for setting up multiple environments (Development, Testing, Staging, and Production) in a React application using the env-cmd npm package to manage environment-specific variables.

Abstract

The provided content discusses the limitations of default environment handling in React applications, which are typically confined to 'development' and 'production' settings. It introduces a solution using the env-cmd package to extend support for additional environments such as 'testing' and 'staging'. The article guides developers through installing the package, defining environment-specific .env files, and modifying the package.json scripts to accommodate builds for each environment. Despite setting up multiple environments, the NODE_ENV variable remains 'production' for builds, and the article suggests using a custom REACT_APP_ENV variable to differentiate between them.

Opinions

The author implies that the default two-environment setup in React is insufficient for complex projects that require more granular environment control.
The use of env-cmd is presented as a practical solution to manage multiple environments without altering the NODE_ENV variable, which is a common practice in React applications.
Prefixing custom environment variables with REACT_APP_ is recommended as a best practice for React applications to ensure they are accessible during the build process.
The author emphasizes the importance of distinguishing builds from different environments, even when NODE_ENV is set to 'production', by using a custom REACT_APP_ENV variable.
The article suggests that adding more environments enhances the development process, allowing for better testing and staging practices before deployment to production.

How to Handle Multiple Environments in a React App

Set up your React app for environments beyond development and production

When developing a React web application, developers can only use two environments by default.

Development — NODE_ENV=development when developing the application locally. Uses .env.development by default, if available.
Production — NODE_ENV=production when building the application for deployment. Uses .env.production by default, if available.

When we use create-react-app, the package.json has the following scripts:

"scripts": {
  "start": "react-scripts start", // NODE_ENV=development as default
  "build": "react-scripts build", // NODE_ENV=production as default
}

Imagine my project has four environments:

Development
Testing
Staging
Production

But, react-scripts only supports development and production.

Now, I want testing and staging environments. We cannot alter the value of NODE_ENV, it can only be “development” or “production”.

So, we use an npm package env-cmd. It is available at the link below.

env-cmd

Executes a command using the environment variables in an env file

www.npmjs.com

The above npm package helps the user to change the env variables based on the environments. To do so, execute the following steps.

1. Install env-cmd npm Package

npm install env-cmd --save

Add env files according to the environments and a .env file with the common variables.

2. Define Environment Files

.env

REACT_APP_NAME = "Rockin MAT"

.env.development

REACT_APP_API_ENDPOINT = "https://api-dev.endpoint.com/"

.env.testing

REACT_APP_API_ENDPOINT = "https://api-testing.endpoint.com/"

.env.staging

REACT_APP_API_ENDPOINT = "https://api-staging.endpoint.com/"

.env.production

REACT_APP_API_ENDPOINT = "https://api.endpoint.com/"

Note: Prefix “REACT_APP_” is required for creating custom variables in React.

3. Add Scripts to package.json

To test your work, run the following commands.

For the testing environment:

npm run build:testing

For the staging environment:

npm run build:staging

Note: Even though you are adding two new different environments when you build the app, NODE_ENV will be production. To distinguish the builds, I recommend that you add REACT_APP_ENV and specify your environment there.

Hooray! Now you can add more than two environments to your React code.