Environment variable management for React
React apps often confuse public build-time variables with secrets. Anything shipped to the browser is public. Server-side or backend secrets belong in a vault — not in the client bundle.
Client bundles cannot keep secrets
Create React App exposes REACT_APP_* variables at build time. Vite exposes VITE_* variables. Both end up in JavaScript the user can download. Never put database passwords, private API keys, or signing secrets in those prefixes.
# Public — safe to embed in the client
VITE_API_BASE_URL=https://api.example.com
REACT_APP_SITE_NAME=Acme
# Never do this in a SPA build
# VITE_DATABASE_URL=postgresql://...
# REACT_APP_STRIPE_SECRET_KEY=sk_live_...Where secrets actually live
Call a backend or BFF that holds secrets in process.env. Store those server values in EANVI per environment, then pull them in Node services, serverless functions, or CI before deploy.
Local React development with EANVI
Keep public Vite/CRA vars in a gitignored local file if you prefer. Keep real backend secrets in an EANVI environment and pull them into the API project that the React app talks to — not into the SPA itself.
Related resources
Try EANVI
Create a workspace, import a .env, and pull secrets from the CLI.