D
DevExCode
Topic #49Core4 min read

Environment Configuration

Vite env vars use a VITE_ prefix per environment — and never hold secrets.

#vite#environment#configuration#secrets#security

Vite loads environment variables from .env files and exposes only those prefixed with VITE_ to client code via import.meta.env. You keep a file per mode — .env.development and .env.production — so the same code points at different backends (http://localhost:8080/api in dev, https://api.dice.zaggle.in/api in prod) without conditionals.

The single most important rule: never put secrets in frontend env vars. Anything prefixed VITE_ is inlined into the JavaScript bundle at build time, so it ships to every visitor in plain text. A VITE_SECRET_KEY is readable by anyone who opens DevTools. Secrets (API keys, signing secrets) must live on the backend; the frontend only ever holds public configuration like API base URLs and project IDs.

Backend Analogy

Vite's import.meta.env is the frontend analog of Spring's @Value / application-{profile}.properties — you swap config per environment without touching code. The crucial difference: backend config files stay on the server, but anything you expose to the frontend bundle is effectively public, like committing a property file to a public repo.

Key Insights
  • Only VITE_-prefixed variables reach the client; everything else stays build-time only.
  • VITE_ values are inlined into the bundle at build — they are NOT runtime secrets and are visible to anyone.
  • Keep one .env file per mode (.env.development, .env.production) so the same code targets different backends.

Worked Code

Vite environment variables (.env files + access)
Shell
// .env files (Vite uses VITE_ prefix)

// .env.development
VITE_API_URL=http://localhost:8080/api
VITE_FIREBASE_PROJECT_ID=dice-dev

// .env.production
VITE_API_URL=https://api.dice.zaggle.in/api
VITE_FIREBASE_PROJECT_ID=dice-prod
Accessing env vars — and what NEVER to do
TypeScript
// Access in code
const apiUrl = import.meta.env.VITE_API_URL;

// NEVER put secrets in frontend env vars — they're in the bundle!
// VITE_SECRET_KEY=abc123  <- anyone can read this

Interview-Ready Q&A

Only variables prefixed with VITE_ are exposed via import.meta.env; everything else is available only at build/config time and is stripped from client code. This prefix is a deliberate guardrail so you don't accidentally leak server-only variables into the bundle.

Things to Remember
  • 1Only VITE_-prefixed vars reach the client; access them via import.meta.env.
  • 2VITE_ vars are inlined into the bundle at build time — never store secrets there.
  • 3One .env file per mode lets identical code target dev vs prod backends.

References & Further Reading