Deploying React AppsEntry 7 of 11

Environment Variables

Build-time values (API URLs, feature flags) that differ between development and production.

Notes

  • Vite reads .env, .env.development, and .env.production.
  • Only variables prefixed with VITE_ reach client code, via import.meta.env.VITE_*.
  • Values are baked into the bundle at build time. Anyone can read them in the browser, so never store secrets (private API keys, DB passwords) here.
  • Replace hardcoded URLs like http://localhost:8080 in services with the variable.

What / Why / When

What

Per-environment configuration.

Why

Same code, different backends for dev and prod.

When

Any value that changes between environments.

Code compare

React
# .env.developmentVITE_API_URL=http://localhost:8080​# .env.productionVITE_API_URL=https://api.example.com
Angular
ng generate environments

The CLI swaps the files at build time via fileReplacements in angular.json.

Quick reference

TaskReact (Vite)Angular
Define.env.productionenvironment.ts files
Readimport.meta.env.VITE_API_URLenvironment.apiUrl
SwitchBuild modefileReplacements
Secrets❌ Never❌ Never