Environment variables

Environment variables allow builds and applications to receive environment-specific configuration such as API base URLs, feature flags, and build settings. They are configuration, not a secure place to store secrets in a browser application.

Development vs production

Development:
VITE_API_BASE_URL=http://localhost:5000/api

Production:
VITE_API_BASE_URL=https://api.example.com

Reading variables

const apiBaseUrl =
  import.meta.env.VITE_API_BASE_URL;

Critical security rule

Values included in a client-side bundle are available to the user. Therefore, a browser environment variable must not contain passwords, database credentials, private API keys, signing secrets, or other server-only secrets.

Configuration flow

flowchart LR
A[Build environment] --> B[Frontend build]
B --> C[JavaScript bundle]
C --> D[Browser]
D --> E[Public configuration]

Backend secrets

Secrets belong on the server or in a secret-management system. The browser should receive only the configuration it genuinely needs.

Feature flags

const enableNewCheckout =
  import.meta.env.VITE_ENABLE_NEW_CHECKOUT === "true";

if (enableNewCheckout) {
  return <NewCheckout />;
}

return <LegacyCheckout />;

Expected output

Development:
API = http://localhost:5000/api

Production:
API = https://api.example.com

Important:
Neither environment should expose
DATABASE_PASSWORD to browser code.

Common mistakes

• Putting secrets into VITE_* or other public client variables.
• Committing .env files containing secrets.
• Assuming environment variables are dynamically hidden after deployment.
• Using different variable names inconsistently across environments.

Interview questions

• Are frontend environment variables secret?
• Where should database credentials live?
• How do you configure different API URLs?
• What is a feature flag?