Deploying a Single Page App

The one deployment problem everyone hits. Your app works, you navigate to a detail page, you refresh, and you get a 404.

The reason is straightforward once you see it. Your router handles paths in the browser, but a refresh asks the server for /item/42, and there is no file at that path. There is only index.html.

The fix is a rewrite rule: serve index.html for any path that is not a real file, and let the router take over once it loads. Every host has a way to configure this and every host words it differently.

The checklist before calling it done.

Refresh on a deep link, not just the home page.

Open it on a phone, on real mobile data rather than a fast connection.

Check the console for errors that only appear in the production build.

Confirm every link works from a cold load rather than from clicking through.

Switch the network off mid-search and confirm the error state appears rather than a spinner that never stops.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →
← Back