App Finishers

Fix guide · updated 2026-11-07

Lovable app: blank page or Vercel 404 after deploy

404: NOT_FOUND · supabaseUrl is required.

Your app works perfectly in the Lovable preview. You deploy it to Vercel or Netlify, and you get one of these: a blank white page, a 404 as soon as you refresh a page, or a build that fails. It's almost always one of the four causes below. Check them in order.

1. A 404 when you refresh a page or open a link directly

The home page loads, you click around, everything works. Then you refresh on /dashboard and get 404: NOT_FOUND (Vercel) or Page not found (Netlify).

Why: Lovable builds a single-page app. There is only one real file, index.html, and the app draws every page itself in the browser. When you refresh /dashboard, the host looks for a file called dashboard, doesn't find one, and gives up before your app can load.

Fix: tell the host to send every unknown path to index.html.

On Vercel, add a file called vercel.json at the root of the project:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

On Netlify, add a file called _redirects inside the public folder:

/*    /index.html   200

On Cloudflare Pages there's nothing to add, as long as your project has no 404.html at its root: Pages then serves index.html for unknown paths by itself.

Commit, redeploy, and refresh a deep page to check.

2. A blank white page with "supabaseUrl is required"

The page is completely white. Open the browser console (right-click → Inspect → Console) and you see:

Uncaught Error: supabaseUrl is required.

Why: your code reads the Supabase address from an environment variable, and that variable doesn't exist on your host. Vite, the tool Lovable uses to build, copies these values into the app at build time, and only variables whose names start with VITE_. If the variable was missing during the build, the app ships with nothing in it and crashes on the first line.

Fix:

  1. Open src/integrations/supabase/client.ts (or search the project for createClient(). Note the exact variable names after import.meta.env., for example VITE_SUPABASE_URL.
  2. In your host's settings (Vercel: Settings → Environment Variables; Netlify: Site configuration → Environment variables), add each variable with the same name and the value from your Supabase dashboard (Project Settings → API).
  3. Redeploy. Adding the variable alone changes nothing: the app has to be built again to pick it up.

Only put the public anon or publishable key here. The service_role key must never be in a VITE_ variable: everything in those ends up readable by anyone who opens your site.

3. The build succeeds but the site is empty or shows old files

Why: the host is publishing the wrong folder. Vite puts the finished site in dist.

Fix: in your host's build settings, use build command npm run build and output (publish) directory dist. Then redeploy.

4. "Build failed: Could not resolve './components/Header'"

It builds in preview and fails on the host.

Why: the file is named header.tsx but imported as ./components/Header. Your computer and the preview ignore the difference in capitals; the Linux servers that build your site don't.

Fix: make the import match the file name exactly, letter for letter, or rename the file. If you rename only the capitals with Git, do it in two steps (git mv header.tsx tmp.tsx, then git mv tmp.tsx Header.tsx) so Git notices the change.

Still blank?

Open the console and copy the first red error. That line names the real problem. If it doesn't match anything above, it's usually a crash in one specific component, and that's the kind of thing we fix every day.