UnbreakMyApp / Fix guides

404 NOT_FOUND when you refresh a page or open a direct link

Your home page works, but refreshing /dashboard or sharing a link gives a 404 on Vercel, Netlify or Cloudflare Pages. The single-page-app rewrite that fixes it.

Building a new app instead? Try Bolt (20% off with our link) (affiliate link).

Why it happens

Lovable and Bolt apps are usually single-page apps built with Vite and React Router. There is only one real file, index.html; routes like /dashboard exist only inside the JavaScript.

When you click links inside the app, the router handles them. But on refresh or a direct link, the browser asks the server for /dashboard, the server finds no such file, and returns 404.

The fix is a rewrite rule telling the host to serve index.html for any path that is not a real file.

How to fix it, step by step

  1. Vercel: add a vercel.json file at the project root with {"rewrites": [{"source": "/(.*)", "destination": "/index.html"}]}.
  2. Netlify: add a file public/_redirects containing the line: /* /index.html 200
  3. Cloudflare Pages: single-page apps without a 404.html are handled automatically; if you have a custom 404.html, remove it or add a _redirects rule like Netlify's.
  4. Commit and redeploy.
  5. Open a deep link like https://yourapp.com/dashboard in a new tab and refresh to confirm.
  6. Add a catch-all route (path="*") in your React Router setup so unknown URLs show a friendly "page not found" instead of a blank page.

Paste-ready prompt for Lovable

My app returns 404 when I refresh any page other than the home page after deploying to <Vercel/Netlify>. Please:
1. Add the correct single-page-app rewrite for my host (vercel.json rewrites to /index.html, or public/_redirects with "/*  /index.html  200" for Netlify).
2. Make sure the rewrite does not break static files or API routes.
3. Add a React Router catch-all route that shows a friendly Not Found page.
Do not change anything else.

FAQ

Does this affect SEO?

The rewrite itself is fine. For better indexing of content pages, consider pre-rendering or server-side rendering.

Why does it work in the Lovable preview?

Lovable's hosting already includes this rewrite. Other hosts need you to add it.

Still broken?

Get a free diagnosis by email within 24 hours. Fixed or refunded.

Get a free diagnosis

Or get the weekly fix digest:

馃摤 This Week in Broken Apps: the most common Lovable/Supabase breaks and how to fix them. Free, weekly, unsubscribe anytime.

Free: the Vibe-Code Fix Checklist.

Sources