Environment Variables in React

Environment variables allow you to store configuration values outside your code — such as API URLs, feature flags, or keys.

The Core Purpose: Security and Flexibility

You should never hardcode secrets directly into your source code. If you push an API key to GitHub, it is compromised. Instead, you store these values in a local file that is ignored by your version control system.

• Security: Keeps private keys out of the public code repository. (on backend )
• Environment Switching: allows switching between the development, staging, and production APIs without changing a single line of code.

.env file

Create a file named .env in the root directory of your project (the same place where package.json lives).

Get Nimmikrishnab’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The Naming Rule: Most React build tools (like Vite or Create React App) require a specific prefix for variables to be accessible in your frontend code.

• Vite: Use VITE_ (e.g., VITE_API_KEY=12345)
• Create React App: Use REACT_APP_ (e.g., REACT_APP_API_KEY=12345)

// Example
REACT_APP_API_URL=https://jsonplaceholder.typicode.com
REACT_APP_APP_NAME=MyReactApp

// using in code example
const apiUrl = process.env.REACT_APP_API_URL;

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

// Now API URL is configurable without changing the code.

Multiple Environment Files

You can create different .env files, and React automatically picks the correct one depending on the build.:

.env                (default)
.env.development    (development mode)
.env.production     (production mode)

Accessing Variables in React

You don’t “import” these variables. Instead, you access them through a special global object.

// in Vite
const apiUrl = import.meta.env.VITE_API_URL;

function fetchData() {
  fetch(`${apiUrl}/users`)
    .then(res => res.json())
    // ...
}

// in Create React App
const apiKey = process.env.REACT_APP_API_KEY;

Frontend vs. Backend Secrets

It is a common misconception that environment variables in React are “hidden.”

⚠️ Warning: Anything you put in a React environment variable will be bundled into the JavaScript files sent to the user’s browser. If a hacker inspects your site’s source code, they can find these values. Store secrets on the backend

• Public Keys: Safe to put in React (e.g., Stripe Public Key, Firebase Config).
• Private Keys: Never put in React (e.g., AWS Secret Access Key, Stripe Secret Key). These must stay on a backend server.

Sensitive data should live:

• In your Node.js server
• In server-side environment variables
• In cloud provider secret managers

// Example (Node.js backend):
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

// Here the secret stays on the server and is never sent to the client.

Don’t Commit .env Files

Adding .env to your .gitignore prevents accidentally pushing secrets to GitHub.

Best Practices

• Use .env for configuration
• Never expose private secrets in frontend
• Use different env files for different environments
• Add .env to .gitignore
• Keep real secrets on the backend

Summary

• Create a .env file in the project root.
• Prefix variables correctly (VITE_ or REACT_APP_).
• Add .env to your .gitignore so it never gets uploaded to GitHub.
• Restart your development server after making changes to .env (React only reads it on startup).
• Never store “Secret Keys” intended only for server-side use.