How to Use Environment Variables in a React App Safely

How to Use Environment Variables in a React App Safely

Environment variables keep config and secrets out of code. Here is how to use them safely in a React app.

Why Use Environment Variables

Environment variables let you change config and secrets without changing code, and keep secrets out of your repository. Different environments, like development and production, can use different values without code changes.

The Naming Convention

Vite uses variables prefixed with VITE_, and Create React App uses REACT_APP_. Only variables with the right prefix are exposed to the React app. Other variables are server-only and not visible to the frontend.

Creating a .env File

Create a .env file at the project root with your variables. Add .env to .gitignore so secrets are not committed. Use .env.example with placeholder values for documentation.

Secrets Are Not Truly Safe in Frontend

Any variable exposed to a React app is visible to users in the browser. Environment variables in frontend code hide things from your repository, not from users. For real secrets, use a backend.

Using the Variables

Read variables in code with import.meta.env.VITE_API_URL or process.env.REACT_APP_API_URL, depending on your setup. Use them for API URLs, feature flags, and partly public keys.

Setting Production Variables

Set production environment variables in your hosting platform's dashboard, not in a committed .env file. Each host, Vercel, Netlify, Firebase, has a settings page for this.

The Takeaway

Use environment variables for config and to keep secrets out of your repo, with the right prefix for your setup. Remember that frontend env vars are visible to users, so real secrets go in a backend, not in React.