Fixing Broken Pages When Accessing Routes Directly in Lovable

Why typing a URL directly shows a 404 error in Lovable apps

Your Lovable app is a Single Page Application. That means the entire app is one HTML file (index.html) with JavaScript that swaps out content to show different 'pages'. When you click a link inside the app, the JavaScript handles it instantly — the browser never asks the server for a new page. But when you type a URL directly (like yourdomain.com/settings) or share that link with someone, the browser asks the server for a page called 'settings'. The server looks in its files, cannot find a folder or file called 'settings', and returns a 404 Not Found error. The fix is simple: tell the server to always return index.html no matter what URL is requested. Your app's JavaScript then reads the URL, sees '/settings', and shows the settings page. This is called a 'fallback rule' — the server 'falls back' to index.html for any path it does not recognize. This issue only affects deployed apps on external hosting platforms. Lovable's built-in hosting at lovable.app already handles this automatically.

• No fallback rule on the hosting platform — the server returns 404 for any path other than the root
• The app is deployed to an external host (Vercel, Netlify) without SPA configuration
• A user bookmarked or shared a deep link that the server cannot resolve directly

Error messages you might see

Before you start

• A Lovable project that works when navigating inside the app but breaks on direct URL access
• Knowledge of which hosting platform your app is deployed to
• Access to add files to your project via Dev Mode or GitHub

How to fix it

1// For Vercel — create vercel.json in project root:
2{
3  "rewrites": [
4    { "source": "/(.*)", "destination": "/index.html" }
5  ]
6}
7
8// For Netlify — create /public/_redirects:
9/* /index.html 200

Complete code example

1# Netlify SPA fallback rule
2# This tells Netlify to serve index.html for all paths
3# that do not match a real file in the build output.
4# The 200 status code means "serve this file as a success"
5# (not a redirect). This is required for Single Page Apps.
6#
7# Place this file in the /public folder of your Lovable project.
8# Vite copies everything in /public to the dist/ build output.
9
10/* /index.html 200
11
12// Additional: Custom 404 page component
13function NotFound() {
14  return (
15    <div className="flex flex-col items-center justify-center min-h-screen">
16      <h1 className="text-4xl font-bold text-gray-900">404</h1>
17      <p className="mt-2 text-gray-600">Page not found</p>
18      <a href="/" className="mt-4 text-blue-600 hover:underline">
19        Go back home
20      </a>
21    </div>
22  );
23}
24
25export default App;

Best practices to prevent this

• Add the fallback file before your first deployment — do not wait for users to report broken links
• Place _redirects in /public (not the project root) so Vite includes it in the build output
• Place vercel.json in the project root (not /public) since Vercel reads it from the repository root
• Test direct URL access in an incognito window after every deployment to catch fallback issues early
• If sharing links to your app, always test the exact link in a private browser before sending it to others
• Lovable's built-in hosting at lovable.app handles SPA fallback automatically — this fix is only needed for external hosts

Still stuck?

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

Related error patterns