DEV Community

Ravi surani
Ravi surani

Posted on

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
*

  1. Create Environment Files

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

  • .env (default)
  • .env.development
  • .env.staging
  • .env.production
  1. 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Example .env.production:

REACT_APP_API_URL=https://api.example.com
REACT_APP_FEATURE=false
Enter fullscreen mode Exit fullscreen mode
  1. 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);
Enter fullscreen mode Exit fullscreen mode
  1. 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",
}
Enter fullscreen mode Exit fullscreen mode

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

  1. 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.
  2. Debugging Environment Variables To check if variables are loaded, run: 
echo $REACT_APP_API_URL
Enter fullscreen mode Exit fullscreen mode

Or log them in your app:

console.log(process.env);
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
lamri_abdellahramdane_15 profile image
Lamri Abdellah Ramdane •

Great guide on setting up multiple environments in React.js! I’ve been using ServBay to keep my local dev setups clean and reproducible, and it really helps manage dependencies and configurations across projects.