App shows 404 when you refresh a page after deploying? Add the rewrite to index.html

Your app works when you click around, then you refresh /dashboard and get one of these:

404: NOT_FOUND
Page not found
Cannot GET /dashboard

A single-page app handles routes like /dashboard in the browser. On a refresh, the host looks for a file at that path, finds none, and returns a 404 before your app even loads. The fix is a rewrite on the host that serves index.html for app routes.

I see this a lot when a Lovable or Bolt app moves off the builder's hosting to Vercel or Netlify for the first time.

Why it happens

1. No rewrite on the host. Lovable's hosting handles this for you. The same Vite build on Vercel, Netlify or a storage bucket needs the rule added.
2. The rule sits in the wrong place. Netlify's _redirects file has to end up in the published folder, and vercel.json has to be at the project root.
3. It's a redirect, not a rewrite. A rule written as a 301 redirect instead of a 200 rewrite changes the address in the bar or loops.

Find the cause

1. Open a deep link (for example /dashboard) in a new tab. If the host returns a 404 before the app loads, it's the missing rewrite.
2. Check the deployed files for _redirects (Netlify), or the project root for vercel.json (Vercel).

Fix 1: Vercel

Add vercel.json at the project root, then redeploy:

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

Fix 2: Netlify

Create public/_redirects so Vite copies it into the published folder, then redeploy:

/*    /index.html   200

The 200 at the end is what makes it a rewrite rather than a redirect.

Fix 3: keep a real 404 page

Now every address loads your app, so add a catch-all route in the app that shows a "page not found" screen. Unknown addresses should still tell the visitor something is wrong.

Check the fix worked

• Refresh several deep links: each one loads the right screen.
• Open a made-up address: your app's own not-found screen appears.
• Static files (images, robots.txt, sitemap.xml) still load directly.

Stop it coming back

• Keep the host rule in the repository, not only in the host's dashboard.
• Test deep links on every new host before you point your domain at it.

Quick answers

Why did it work on Lovable? Lovable's hosting serves index.html for app routes automatically. Other hosts need the rule.

Does this fix SEO? No. A client-side app already gives search engines little to read, and a rewrite alone doesn't change that. If search traffic matters, look at pre-rendering your key pages.

Sources: Vercel rewrites, Netlify rewrites and proxies.

Full write-up with the same steps: Your app shows 404 when you refresh a page after deploying. If you're about to move hosts, the free Launch Check looks over the live app for other launch problems.

I wrote this with AI assistance and reviewed it myself.