How to Configure SPA Fallback (404 to index.html) on Deploy

Static hosts return 404 for unknown paths; an SPA needs those paths rewritten to index.html so the router takes over.

Add a rewrite so any unmatched path serves index.html with a 200. Each host has its own mechanism: a 404.html copy for GitHub Pages, a _redirects file for Netlify, or a rewrites rule for Vercel/Firebase/Azure.

Steps

• Decide the fallback (usually /index.html).
• Add the host-specific rewrite or a 404.html copy.
• Serve the fallback with a 200 so the router can render.
• Test a deep link like /app/settings directly.

Per-host config

# GitHub Pages: no true rewrite; copy index to 404
- run: cp dist/index.html dist/404.html

# Netlify _redirects:
# /*    /index.html   200

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

# Firebase firebase.json:
# "rewrites": [{ "source": "**", "destination": "/index.html" }]

Gotchas

• A hash router (/#/route) does not need a fallback but changes URLs.
• The GitHub Pages 404.html trick returns a 404 status even though it renders the app.
• Do not rewrite real asset paths to index.html, or scripts load HTML and fail.

Related guides