Environment Variables – Multi-Environment Configuration in React

When developing a React app, you often need different configurations for development, testing, and production environments. For example — you might want to use a local API during development, but a live server after deployment.

This is where environment variables come in handy. They help you manage configuration securely and efficiently, without hardcoding sensitive or environment-specific data into your React code.

What Are Environment Variables?

Environment Variables are values that define your app’s environment — such as API URLs, keys, or feature flags — outside your source code. They make your React app configurable, secure, and flexible across multiple environments.

Common use cases:

• API base URLs
• API keys or tokens
• App modes (development, staging, production)
• Feature toggles
• Third-party service credentials (Firebase, Stripe, etc.)

Setting Up Environment Variables in React

React supports environment variables through .env files.

These files are placed at the root of your project (not inside src/).

Step 1: Create an .env File

At the root of your project, create an environment file — for example:

.env

Then define your variables using this format:

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=production

Important:

React only exposes variables prefixed with REACT_APP_.

Any variable without this prefix will be ignored for security reasons.

Step 2: Access Environment Variables in Code

You can access these variables using process.env:

const apiUrl = process.env.REACT_APP_API_URL;

console.log("API Base URL:", apiUrl);

This allows you to change API URLs or modes without editing your source code.

Step 3: Multiple Environment Files

For better management, you can create separate files for each environment:

Example setup:

.env.development
REACT_APP_API_URL=http://localhost:4000

.env.production
REACT_APP_API_URL=https://api.myapp.com

React automatically picks the right file based on the environment.

Step 4: Using Environment Variables in the Build Process

When you build your React app (npm run build), environment variables are embedded at build time.

So if you change an .env file after building, you’ll need to rebuild the project.

Example – Switching Between Environments

const apiUrl =
  process.env.NODE_ENV === "production"
    ? process.env.REACT_APP_API_URL
    : "<http://localhost:4000>";

fetch(`${apiUrl}/users`)
  .then((res) => res.json())
  .then((data) => console.log(data));

This ensures the app uses the correct server automatically depending on the build mode.

Step 5: Keep Secrets Secure

Never expose private credentials (like database passwords or secret keys) in client-side React apps — because all variables are bundled into the front-end code.

If you need to store real secrets, use:

• A backend server (Node.js, Express, etc.)
• Serverless functions (Netlify, Vercel, AWS Lambda)
• GitHub encrypted secrets for CI/CD pipelines

Using Environment Variables in Deployment

Netlify

Add your variables in Netlify Dashboard → Site Settings → Build & Deploy → Environment.

Vercel

Go to Settings → Environment Variables and add them for each environment:

• Development
• Preview
• Production

GitHub Actions

In your workflow file, reference them like this:

env:
  REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}

Common Built-in Environment Variables

React automatically provides a few helpful environment variables:

Example:

if (process.env.NODE_ENV === "production") {
  console.log("Running in production mode");
}