Environment Variables in React

# .env file
VITE_VARIABLE_NAME=value

// In component code
const value = import.meta.env.VITE_VARIABLE_NAME;

// Run in your local React project (npm install required)
// .env
VITE_API_URL=https://api.example.com

// In your code:
const apiUrl = import.meta.env.VITE_API_URL;
fetch(apiUrl + '/users');

// Run in your local React project (npm install required)
// .env.development
VITE_API_URL=http://localhost:4000

// .env.production
VITE_API_URL=https://api.myrealapp.com

// Same code works correctly against both, automatically:
fetch(import.meta.env.VITE_API_URL + '/users');

Creating a Production Build · Deploying to Netlify · React as a PWA · Deploying to Vercel

1. Putting genuinely secret values (API secret keys) in a client-side environment variable — anything bundled into client JS is visible to anyone who opens devtools.
2. Forgetting the required prefix (like VITE_ or REACT_APP_) that the build tool needs to actually expose a variable to client code.
3. Not restarting the dev server after changing a .env file, missing the update since env vars are typically read at build/start time.

• Environment variables let the same code behave differently in development vs. production (like pointing at different API URLs).
• Client-exposed variables need a specific prefix (VITE_ for Vite, REACT_APP_ for Create React App) to actually reach the browser bundle.
• Any variable exposed to client-side code is publicly visible — never put real secrets there.
• Variables are typically defined in .env files, with different files for different environments (.env.production, .env.development).

Build-tool feature (Vite's import.meta.env or Create React App's process.env); no specific React version requirement.