How to Import Environment Variables in React

What you’ll build or solve

You’ll add environment variables to a React project and read them in your components.

When this approach works best

This approach works best when:

• You need different API URLs for development and production.
• You want to switch features on or off with a flag.
• You want to keep configuration out of your source code.
• You share the same codebase across multiple environments.

This is a bad idea if you plan to store real secrets in a frontend variable. Anything your React app can read can end up in the browser bundle.

Prerequisites

• A React project (Create React App or Vite)
• Node.js installed
• Basic familiarity with editing files and running a dev server

Step-by-step instructions

Step 1: Define variables in an .env file

Create an .env file in your project root, the same folder as package.json.

For Create React App, variables must start with REACT_APP_:

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENABLE_CHAT=true

For Vite, variables must start with VITE_:

VITE_API_URL=https://api.example.com
VITE_ENABLE_CHAT=true

Keep the file in the project root, not inside src.

You can also create environment-specific files:

• .env.development
• .env.production

The build tool loads the correct file depending on the mode.

Step 2: Read the variables in your React code

Use the syntax that matches your project.

Option A: Create React App

constapiUrl=process.env.REACT_APP_API_URL;
constenableChat=process.env.REACT_APP_ENABLE_CHAT==="true";

Option B: Vite

constapiUrl=import.meta.env.VITE_API_URL;
constenableChat=import.meta.env.VITE_ENABLE_CHAT==="true";

You can use the value inside a component:

functionApp() {
constapiUrl=import.meta.env.VITE_API_URL;
return<p>API URL: {apiUrl}</p>;
}

What to look for

• Restart your dev server after adding or changing .env values.
• Variables without the required prefix will be undefined.
• Environment variables are always strings. Compare flags to "true" if needed.
• Do not put secrets in frontend environment variables.

Examples you can copy

Example 1: Use an API base URL

.env:

VITE_API_URL=https://api.example.com

React code:

constapiUrl=import.meta.env.VITE_API_URL;

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

Example 2: Use a feature flag

.env:

REACT_APP_ENABLE_BETA=true

React code:

constenableBeta=process.env.REACT_APP_ENABLE_BETA==="true";

functionApp() {
returnenableBeta?<BetaBanner/>:null;
}

Example 3: Different values per environment

.env.development:

VITE_API_URL=https://dev-api.example.com

.env.production:

VITE_API_URL=https://api.example.com

Run in development:

npm run dev

Build for production:

npm run build

The correct file is selected automatically.

Common mistakes and how to fix them

Mistake 1: Missing the required prefix

What you might do:

API_URL=https://api.example.com

Why it breaks:

React ignores variables without the expected prefix.

Correct approach:

VITE_API_URL=https://api.example.com

or

REACT_APP_API_URL=https://api.example.com

Mistake 2: Not restarting the dev server

What you might do:

Edit .env while the server is running and refresh the page.

Why it breaks:

The dev server reads environment variables at startup.

Correct approach:

Stop the server with Ctrl + C, then run:

npmstart

or

npm run dev

Mistake 3: Storing secrets in frontend .env

What you might do:

Store a private API key in .env.

Why it breaks security:

Frontend environment variables can end up in the built JavaScript bundle.

Correct approach:

Store secrets on a backend server and call that backend from React.

Troubleshooting

If a variable is undefined, check the prefix and confirm the file is in the project root.

If values do not change, restart the dev server.

If a boolean check fails, remember that environment variables are strings.

If your project uses a CDN instead of a build tool, .env files will not apply.

Quick recap

• Create an .env file in the project root.
• Use REACT_APP_ for Create React App or VITE_ for Vite.
• Access variables with process.env or import.meta.env.
• Restart the dev server after changes.
• Treat values as strings and never store real secrets in frontend env vars.