How do I use environment variables?
Last checked 31 Aug 2026
Short answer
Use `VITE_`-prefixed variables only for non-sensitive, public values baked into the front-end build; use Secrets for anything sensitive that a server/edge function needs.
Two different mechanisms, easy to confuse
Lovable projects distinguish between:
VITE_environment variables — bundled directly into the front-end code at build time. Visible to anyone who opens dev tools. Fine for public values like a feature flag or a public API base URL.- Secrets — encrypted, stored in your backend (Lovable Cloud/Supabase), and only accessible from server/edge functions. Used for API keys, tokens, and anything that shouldn't be public.
When to use which
| Use case | Use |
|---|---|
| Public config value (e.g. a public Mapbox style URL) | VITE_ variable |
| Third-party API key | Secret |
| Feature flag shown in the UI | VITE_ variable |
| Database credentials, service-role keys | Secret |
| Anything with billing implications | Secret |
How to set them up
- For a
VITE_variable, ask Lovable to add it and reference it in the relevant component — it'll be included at build time. - For a secret, ask Lovable to add the integration or secret directly; it's stored server-side and used inside an edge function, not the client.
Add a
VITE_SITE_NAMEvariable for the site's display name, and separately store our Mailgun API key as a secret used only inside an edge function.
What usually goes wrong
- Putting a sensitive key in a
VITE_variable because it "looks like" the right place — theVITE_prefix is precisely what makes Vite expose it to the browser. - Forgetting that changing a
VITE_variable requires a rebuild/redeploy to take effect, unlike some secrets which can be read live by an edge function. - Expecting environment variables to differ automatically between test and live without checking your project's environment setup.
Related: /questions/how-do-i-safely-store-api-keys, /questions/what-are-supabase-edge-functions.
Sources
Was this answer helpful?
Related questions
- AnswerHow do I back up my Lovable database?Lovable Cloud stores backups you can restore from directly in the Database screen; for extra safety, also ask Lovable to export your data periodically.
- AnswerHow do I connect Supabase to Lovable?In your Lovable project, open the Supabase integration and authorise Lovable to connect to an existing Supabase project (or create a new one), then Lovable can read and write to it the same way it does with Lovable Cloud.
- AnswerHow do I safely store API keys?Store keys as secrets in your backend (Lovable Cloud/Supabase) and call the third-party API from a server/edge function — never put keys in front-end code.
- AnswerHow do I view my database data?Open the Cloud tab (or ask Lovable) to browse tables, edit rows and run SQL directly inside your project — no separate Supabase login needed.