I see the same problem happen again and again to juniors building their first Single-Page App (SPA). Everything works fine locally, but as soon as they deploy to a hosting platform like Netlify they get loads of “404 Not found” errors trying to load pages. There are lots of resources documenting how to fix this, so I’m also going to try to explain why this happens too.
Single-Page Apps differ from traditional server-rendered applications in that they only ever load one “page” from the server. This means your server only knows about a single route: the home
index.html. The server is just there to deliver your client-side JS to the browser.
This is because your server doesn’t know about any routes like “/about”. From its perspective there’s only a single page—the home
index.html. So when the server receives a request for “/about” it correctly responds with a 404.
Note: you generally don’t catch this issue during local development since most dev servers redirect all requests to the home
The solution is to tell your server to respond with the
index.html for any route. Since that page contains all the client-side JS to render any other pages the user will still end up seeing the correct page.
You can configure most static hosts to redirect all requests to the home route. I’ll demonstrate how to do it with Netlify here, since I’m most comfortable with it. For other platforms you’ll have to search their docs for something like “SPA routing fallback”.
Netlify supports configuring redirects in two ways: either a standalone file named
_redirects, or as part of your whole
netlify.toml config file.
/* /index.html 200
Important: this file must end up in the final folder that gets deployed. If you have any kind of build-step to generate the folder you should ensure
_redirects gets copied over. E.g. using Create React App you can put it inside the your
from = "/*"
to = "/index.html"
status = 200
This file generally lives at the root of your project, and you don’t have to worry about it being deployed along with your site.