Configuring SPA Fallback Pages in Lovable Projects

Why pages return 404 when accessed directly in deployed Lovable apps

Lovable projects are Single Page Applications (SPAs). The entire app is a single HTML file (index.html) that uses JavaScript to render different pages based on the URL. When you click a link inside the app, React Router intercepts it and swaps the content without a server request. This works seamlessly. The problem appears when someone types a URL directly into the browser address bar (like yourdomain.com/dashboard) or refreshes the page. The browser sends a request to the server asking for /dashboard. The server looks for a file or folder called 'dashboard' — it does not exist because there is only index.html. The server returns a 404 error. The fix is a fallback rule that tells the server: 'For any URL that does not match a real file, serve index.html instead.' React Router then reads the URL and renders the correct page. Lovable's built-in hosting at lovable.app handles this automatically, but any external host (Vercel, Netlify, Cloudflare Pages) needs explicit configuration.

• No SPA fallback rule configured on the hosting platform — the server returns 404 for client-side routes
• vercel.json or _redirects file missing from the project — the host has no fallback instructions
• Fallback file placed in the wrong directory — it must be in /public so it gets included in the build output
• Custom 404 page intercepts all routes instead of just truly missing ones
• Hosting platform auto-detects the wrong framework and applies incorrect routing rules

Error messages you might see

Before you start

• A Lovable project that uses React Router for client-side navigation
• Knowledge of which hosting platform you are deploying to (Vercel, Netlify, Cloudflare Pages, or Lovable's built-in hosting)
• Access to your project files via Dev Mode or GitHub

How to fix it

1{
2  "rewrites": [
3    {
4      "source": "/(.*)",
5      "destination": "/index.html"
6    }
7  ]
8}

1/* /index.html 200

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

import NotFound from "./pages/NotFound";
<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
  {/* Catch-all for undefined routes */}
  <Route path="*" element={<NotFound />} />
</Routes>

1import { Link } from "react-router-dom";
2
3export default function NotFound() {
4  return (
5    <div className="flex flex-col items-center justify-center min-h-screen p-8">
6      <h1 className="text-4xl font-bold mb-4">404</h1>
7      <p className="text-muted-foreground mb-6">This page does not exist.</p>
8      <Link to="/" className="text-primary hover:underline">
9        Go back to the home page
10      </Link>
11    </div>
12  );
13}

Complete code example

1import { Link, useLocation } from "react-router-dom";
2
3export default function NotFound() {
4  const location = useLocation();
5
6  return (
7    <div className="flex flex-col items-center justify-center min-h-screen p-8 text-center">
8      <div className="max-w-md">
9        <h1 className="text-6xl font-bold text-primary mb-4">404</h1>
10        <h2 className="text-xl font-semibold mb-2">Page not found</h2>
11        <p className="text-muted-foreground mb-6">
12          The page <code className="bg-muted px-2 py-1 rounded text-sm">{location.pathname}</code> does not exist.
13        </p>
14        <div className="flex gap-4 justify-center">
15          <Link
16            to="/"
17            className="inline-flex items-center px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
18          >
19            Go home
20          </Link>
21          <button
22            onClick={() => window.history.back()}
23            className="inline-flex items-center px-4 py-2 border border-input rounded-md hover:bg-accent transition-colors"
24          >
25            Go back
26          </button>
27        </div>
28      </div>
29    </div>
30  );
31}

Best practices to prevent this

• Always add a vercel.json or _redirects file before deploying to an external host — do not wait for the 404 to happen
• Place _redirects inside the /public folder so Vite copies it to the dist/ build output automatically
• Place vercel.json in the project root (not in /public) since Vercel reads it from the repository root
• Use status code 200 (not 301 or 302) in Netlify _redirects to prevent the URL from changing to /index.html
• Always add a catch-all Route (path='*') as the last route in your React Router configuration
• Test fallback routing by visiting a deep URL directly (like /settings/profile) in an incognito window after deployment
• Lovable's built-in hosting at lovable.app handles SPA fallback automatically — you only need configuration for external hosts

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns