Question

Lovable site on Netlify: every page except home gives 404 when I refresh

Solved · 3102 viewsasked by gabriel_ss

Downloaded my Lovable project and put it on Netlify (wanted my own hosting). The homepage works, clicking links works. But if I refresh on /menu or send someone a link to /contact:

Page not found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
What I’ve tried

Checked that the dist folder has everything. Rebuilt and redeployed twice.

Comment
Netlify Drop or a site connected to GitHub? wes_codes
connected to github gabriel_ss

3 answers

Marked as helpful by the asker
wes_codes

Your app is a single-page app: there's only one real file, index.html, and React Router decides what to show based on the URL. Clicking links works because it happens in the browser. On refresh, Netlify looks for a file called /menu on disk, doesn't find it, 404.

Tell Netlify to serve index.html for all paths. Create public/_redirects (Vite copies public/ into dist/):

/*    /index.html   200

or in netlify.toml:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel needs the same idea as a rewrite in vercel.json.

Comment
_redirects file fixed it. One line. Thank you gabriel_ss
Same thing on Cloudflare Pages btw, although it does this automatically if there's no 404.html the_real_omar
postgres_pete

Status 200 in that rule is important, not 301. A redirect would change the URL to / and your router loses the page.

Comment
mira_dev

And for Vercel, the equivalent vercel.json:

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