Preview works. You publish, or point Cloudflare Pages / Netlify at the GitHub repo, and the live site is blank, says Failed to fetch, or the build dies. You didn't touch the React. The environment changed.
Lovable preview reads your committed .env and injects your Cloud secrets for you. An external host does neither unless you copy the values into its Production env and rebuild.
What it looks like
- Preview loads data. Production is empty or spins forever.
- The deploy is green, but DevTools > Network on the live site hits
undefined.supabase.co,localhost, or your preview project. - The build log complains about a missing env var, or
npm run buildfails on a secret a plugin expected. - Edge Functions work in preview and 500 on the live host.
Test in a private window on the live hostname. Preview cookies and preview env will lie to you.
1. VITE_ vars set on Preview, not Production
Cloudflare Pages and Netlify keep separate Preview and Production env. A common miss: paste VITE_SUPABASE_URL and the publishable key into Preview, check the preview URL, never open the Production tab.
Also: if you gitignored .env "for security," Lovable can keep previewing from its copy while the Git-connected host builds with nothing. Put the VITE_* values in the host's Production env (they're public browser values anyway). Never put backend secrets there.
2. Secrets that never left Lovable
Lovable Secrets (STRIPE_SECRET_KEY, RESEND_API_KEY, webhook signing secrets) are injected into Lovable Cloud functions. They're not in git, so your new host or your own Supabase project doesn't have them. Copy every name the server code reads into the host's secrets (or Supabase Edge Function secrets). A function that 500s only in production with a missing-env line in its log is this one.
The opposite mistake: putting SUPABASE_SERVICE_ROLE_KEY in a VITE_ var to "make it work." That ships it in your JS bundle. That's a leak, not a fix.
3. Changing env without rebuilding
This is the one that wastes the most time. From the Vite docs, import.meta.env values are "statically replaced at build time." The live JS already contains the old string (or undefined):
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
// after `vite build` this is a string literal,
// or undefined, which turns into a broken request URL
So saving a new value in the Pages / Netlify UI and refreshing does nothing. Retry the production deployment (or push a commit) so the build runs again. Also, process.env.VITE_* in client code is the wrong API; Vite uses import.meta.env.
Quick check: search the built JS for your Supabase project ref. If it isn't there, the build never saw the var.
4. URL and key from different projects
Production has the URL from project A and the anon key from project B, or an old key after a rotation. The client "connects," but auth, rows and RLS belong to a different project. Names drift too: older templates read VITE_SUPABASE_ANON_KEY, current Lovable .env uses VITE_SUPABASE_PUBLISHABLE_KEY. If Production only has the old name, createClient gets undefined.
Checklist
- Private window, live hostname, DevTools > Network: which host do
/rest/v1calls hit? Same as preview? - Host env, Production tab:
VITE_SUPABASE_URL+ publishable key, same project. - After any env change, rebuild. Don't just refresh.
- Search the bundle for your project ref.
- Every secret your functions read exists on the live host or in Supabase secrets.
- Build failed? The log names the variable. Set it on Production, rebuild.
VITE_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJ... # anon/publishable, never service_role
If deploy is fine but login breaks on the live domain, that's the redirect allowlists, not env: the 3 redirect lists.
Full guide
Longer version with sources and an FAQ (Lovable Secrets vs VITE_, build failures, preview and production on different projects):
https://fixloop.dev/guides/lovable-preview-works-deploy-breaks
I run FixLoop. Still stuck? Paste the error and we'll email you the likely cause, free.
Top comments (0)