How to Fix “Cannot GET /route” Errors in Single Page Applications (SPAs) with Static Servers

Single Page Applications (SPAs) like those built with Angular, React, or Vue often use client-side routing. This means navigation between pages is handled by JavaScript in the browser, not by the server. However, when deploying or testing locally with a static file server, you might encounter the dreaded:

Cannot GET /some-route

This typically happens when you refresh the page or land directly on a deep link (e.g., /chat). Here’s why it happens and how to fix it.

Why Does This Happen?

When you navigate within your SPA, the client-side router updates the URL and renders the correct view. But if you refresh the page or visit a deep link directly, the browser sends a request to the server for that specific path (e.g., /dashboard). A simple static server looks for a file or directory at that path, doesn’t find one, and returns a 404 error.

The Solution: SPA Fallback

To support client-side routing, your server must be configured to serve index.html for all routes that don’t match a static file. This allows the client-side router to take over and render the correct view.

How to Enable SPA Fallback with Popular Static Servers

1. http-server (Node.js)

Use the --spa flag:

npx http-server . --spa

Or specify a port:

npx http-server . --spa -p 5500

2. serve (Vercel)

This server is designed for SPAs:

npx serve -s . -l 5500

3. lite-server

Add the connect-history-api-fallback middleware in your bs-config.json:

{
  "server": {
    "middleware": {
      "1": require('connect-history-api-fallback')({ index: '/index.html', verbose: true })
    }
  }
}

4. Angular CLI

No extra configuration is needed; ng serve handles this automatically.

Google Sign-In and Redirect URIs

When using Google Sign-In or other OAuth providers, the redirect URI must match a route your SPA can handle. If the server isn’t configured for SPA fallback, you’ll get a 404 error after authentication. With SPA fallback enabled, the app loads correctly and processes the authentication response.

Troubleshooting Checklist

• Use the correct command for your server with SPA fallback enabled.
• Ensure you are in the directory containing your index.html and built assets.
• Clear your browser cache if you see unexpected errors.
• Check your server’s output to confirm it’s serving index.html for unknown routes.
• Update your static server to the latest version if you encounter issues with SPA fallback flags.

Summary

If you’re building a SPA and see “Cannot GET /route” errors on refresh or after OAuth redirects, enable SPA fallback in your static server. This ensures your app loads correctly for all routes, providing a seamless user experience.

Tip: For production deployments, configure your web server (e.g., Nginx, Apache) to rewrite all requests to index.html except for static assets.