Testing, TypeScript & Deployment

React Environment Variables

Environment variables let you point the same code at different APIs per environment. In Vite they live in .env files and must be prefixed with VITE_ to be exposed to the browser.

What is Environment Variables in React?

Environment variables let you point the same code at different APIs per environment. In Vite they live in .env files and must be prefixed with VITE_ to be exposed to the browser.

Environment Variables example

.env files

Terminal

# .env.development
VITE_API_URL=http://localhost:5000/api

# .env.production
VITE_API_URL=https://api.example.com

Reading them

JavaScript

const api = import.meta.env.VITE_API_URL;   // Vite
// const api = process.env.REACT_APP_API_URL;   // Create React App

Key points to remember

Values are inlined at build time — changing one requires a rebuild.
Anything exposed to the browser is public. Never put a secret key in a VITE_ variable.
Commit a .env.example listing the required names, never the real .env.

Common mistakes with Environment Variables

Putting a payment or database secret in a front-end env variable, where anyone can read it in the bundle.
Forgetting the VITE_ prefix, so the variable is silently undefined.

React Environment Variables— Interview Questions & FAQs

Are React environment variables secure?+

No. They are compiled into the JavaScript sent to the browser and are trivially readable. Keep secrets on a server and expose only what is safe to be public.