Setting Up Multiple Environments in React.js

When working on a React project, you may need different setups for development, testing, and production. Each environment may require unique API links, features, or settings. Here’s how to set up multiple environments in a simple way. Why Use Different Environments? Testing: Ensure new features work before going live. Security: Keep production data safe. Performance: Identify issues in different setups. Smooth Deployment: Update without breaking the live site. Steps to Set Up Multiple Environments Create Environment Files React allows you to use .env files for different setups: .env (default) .env.development .env.staging .env.production Define Variables In each .env file, add variables prefixed with REACT_APP_: Example .env.development: REACT_APP_API_URL=https://dev-api.example.com REACT_APP_FEATURE=true In each .env file, add variables prefixed with REACT_APP_: Example .env.staging: REACT_APP_API_URL=https://staging-api.example.com REACT_APP_FEATURE=true Example .env.production: REACT_APP_API_URL=https://api.example.com REACT_APP_FEATURE=false Use Variables in Code Access them in your React app like this: const apiUrl = process.env.REACT_APP_API_URL; const featureEnabled = process.env.REACT_APP_FEATURE === "true"; console.log("API URL:", apiUrl); console.log("Feature Enabled:", featureEnabled); Set Up Environment-Based Commands Update package.json to specify environments: "scripts": { "start": "react-scripts start", "start:development": "env-cmd -f .env.development npm-run-all -p start-js", "start:staging": "env-cmd -f .env.staging npm-run-all -p start-js", "start:.production": "env-cmd -f .env.production npm-run-all -p start-js", "build:development": "env-cmd -f .env.development react-scripts build", "build:staging": "env-cmd -f .env.staging react-scripts build", "build:.production": "env-cmd -f .env.production react-scripts build", } Using env-cmd lets you load specific .env files. Add Environment Variables in Deployment For hosting services like Netlify, Vercel, or AWS Amplify, set environment variables in their settings. If using Docker or Kubernetes, pass them through configuration files. Debugging Environment Variables To check if variables are loaded, run: echo $REACT_APP_API_URL Or log them in your app: console.log(process.env); Conclusion Using multiple environments in React makes development easier and safer. By setting up .env files and using specific scripts, you can seamlessly switch between different setups.

Feb 16, 2025 - 12:44

Setting Up Multiple Environments in React.js

When working on a React project, you may need different setups for development, testing, and production. Each environment may require unique API links, features, or settings. Here’s how to set up multiple environments in a simple way.

Why Use Different Environments?

Testing: Ensure new features work before going live.
Security: Keep production data safe.
Performance: Identify issues in different setups.
Smooth Deployment: Update without breaking the live site.

*Steps to Set Up Multiple Environments
*

Create Environment Files

React allows you to use .env files for different setups:

.env (default)
.env.development
.env.staging
.env.production

Define Variables In each .env file, add variables prefixed with REACT_APP_: Example .env.development:

REACT_APP_API_URL=https://dev-api.example.com
REACT_APP_FEATURE=true

In each .env file, add variables prefixed with REACT_APP_:
Example .env.staging:

REACT_APP_API_URL=https://staging-api.example.com
REACT_APP_FEATURE=true

Example .env.production:

REACT_APP_API_URL=https://api.example.com
REACT_APP_FEATURE=false

Use Variables in Code Access them in your React app like this:

const apiUrl = process.env.REACT_APP_API_URL;
const featureEnabled = process.env.REACT_APP_FEATURE === "true";

console.log("API URL:", apiUrl);
console.log("Feature Enabled:", featureEnabled);

Set Up Environment-Based Commands Update package.json to specify environments:

"scripts": {
  "start": "react-scripts start",
  "start:development": "env-cmd -f .env.development npm-run-all -p start-js",
  "start:staging": "env-cmd -f .env.staging npm-run-all -p start-js",
  "start:.production": "env-cmd -f .env.production npm-run-all -p start-js",  
  "build:development": "env-cmd -f .env.development react-scripts build",
  "build:staging": "env-cmd -f .env.staging react-scripts build",
  "build:.production": "env-cmd -f .env.production react-scripts build",
}

Using env-cmd lets you load specific .env files.

Add Environment Variables in Deployment For hosting services like Netlify, Vercel, or AWS Amplify, set environment variables in their settings. If using Docker or Kubernetes, pass them through configuration files.
Debugging Environment Variables To check if variables are loaded, run:

echo $REACT_APP_API_URL

Or log them in your app:

console.log(process.env);

Conclusion
Using multiple environments in React makes development easier and safer. By setting up .env files and using specific scripts, you can seamlessly switch between different setups.