.env · generator · React (Vite)

React (Vite) .env Generator

Vite uses VITE_ prefixes to decide which variables ship to the browser. This generator produces a React .env with the right prefixes and the most common third-party client keys (Supabase, PostHog, Sentry).

.env for React (Vite) · 6 keys

Customize →

VITE_API_URL=http://localhost:8000
VITE_APP_NAME=My App
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
VITE_POSTHOG_KEY=
VITE_SENTRY_DSN=

Secrets regenerate on every page load. Want to combine stacks (e.g., Next.js + Stripe + Supabase)? Use the full generator.

How to use this .env in React (Vite)

1.Save the output as .env or .env.local in your Vite project root.
2.Access values with import.meta.env.VITE_API_URL (not process.env).
3.Restart the dev server after editing — Vite inlines VITE_ values at build time.
4.For production, set the same keys in your host's dashboard and rebuild.

Gotchas

⚠Non-VITE_ variables are invisible to your React code entirely — prefixing is mandatory.
⚠Vite inlines values at build time. Changing a value in the host dashboard requires a redeploy.
⚠Never put a secret (Stripe sk_, database passwords) behind a VITE_ prefix — it ships to every browser.