Lovable app shows 404 or a blank page on Vercel

First, which kind of Lovable app is it?

New Lovable projects have used TanStack Start since 13 May 2026. Older projects use React and Vite, keep working as they are, and can be upgraded (Lovable docs). Ask your agent which one yours is, or look in package.json: a dependency called @lovable.dev/vite-tanstack-config means TanStack Start.

Cause 1: Vercel does not have your app’s settings (blank page)

Lovable fills in your app’s settings on its own hosting. Vercel starts with none. A Lovable app with a backend reads VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY and VITE_SUPABASE_PROJECT_ID from its .env file; a project without a backend needs none (Lovable docs). Without them the app stops before it draws anything. One owner’s answer on Reddit: “Lovable injects your VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY on its own hosting; Netlify doesn’t have them, so the app crashes before it renders” (r/lovable, September 2026). Vercel behaves the same way.

Fix: in Vercel, open your project → Settings → Environment Variables, add each value from your repository’s .env file, then redeploy. Variables that start with VITE_ are built into the app at build time, not read when it runs (Lovable docs), and Vercel applies a change only to new deployments (Vercel docs). Adding them without redeploying changes nothing.

These values are safe in the browser; they are the public address and public key. Never put a secret key (the service role or sb_secret_ key) in a VITE_ variable: Lovable’s docs warn that VITE_ variables are included in the code sent to the browser (Lovable docs), and Supabase’s secret keys bypass Row Level Security (Supabase docs).

Cause 2: an older React and Vite app has no rewrite (404 on every page but the home page)

The home page loads, but any other address, or a refresh, returns 404. An older Lovable app is a single-page app: one index.html that draws every page in the browser, and on Vercel “deep linking won’t work out of the box” for such an app (Vercel docs). Lovable’s docs: “If direct URL navigation returns a 404, configure a fallback rewrite so all routes serve /index.html”, with vercel.json named as the place on Vercel (Lovable docs).

Fix: add a file called vercel.json at the top of the repository, with the rewrite from Vercel’s docs (Vercel docs):

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Push it, and Vercel deploys again by itself.

Cause 3: a TanStack Start app with an old build package (404 on everything)

Vercel says Lovable projects “deploy to Vercel with zero configuration”, and adds: “Zero-configuration detection requires @lovable.dev/vite-tanstack-config version ^2.6.2 or higher in your project. If your project uses an older version, update it before deploying” (Vercel docs). Copies of the setup from before that version built for Cloudflare, so Vercel built green and then served its own 404. Owners hit it in May and June 2026: “vercel keeps failing with errors in the builds or 404 errors” (r/lovable, June 2026).

Fix: have your agent update @lovable.dev/vite-tanstack-config to 2.6.2 or newer, check the app still builds, push, and let Vercel deploy again.

Still broken?

Open the deployment in Vercel and read its build log and its runtime logs; your agent can read them for you and tell you which of the three it is. People lose days here: “i need help with this since im been trying for about 2 days now and i still dont understand” (r/lovable, May 2026). The cause is rarely more than one setting or one file.

Before you point your domain at Vercel

Logins: add the Vercel address to your login settings, or sign-in and password-reset links keep sending people to the old address. On Lovable Cloud, Lovable adds only the addresses it hosts; on your own Supabase it adds none (Lovable docs).
The Publish button goes away. Once Vercel follows your repository, “every change you make in Lovable syncs to GitHub and triggers a new deployment on Vercel” (Vercel docs).
Vercel’s free plan is for “non-commercial, personal use only” (Vercel docs). An app that takes money needs a paid plan.

All of this is stage 4, move the hosting. Your database, logins and files can stay on Lovable Cloud while the site runs on Vercel (Lovable docs).

Where this fits

This is part of stage 4, move the hosting. Other short answers:

Your Lovable app shows 404 or a blank page on Vercel?