Ever uploaded your cool new project to Netlify and everything just seemed to work, but you seemingly randomly get a "Page Not Found" error? The reason might be very simple as well as the solution.
- Open the URL of your deployed empress-blog instance on your Netlify account
- Navigate to any subpage that changes the URL
- Execute hard, full page reload (cmd + shift + R)
- See Netlify 404 page:
Create _redirects file in
/public folder with following content:
# /public/_redirects /* /index.html 200
Deploy your site again. And the problem should be gone.
Single Page Applications (SPAs) usually consist of three files:
everything.css. Although it seems like the user can click on various links, navigate around and as a side effect change URL, those are all just a mirage. Well, sort of. The clicking happens for sure and the URL in the address bar also change. Just not in the "traditional" sense.
But unfortunately when you do a hard reload the browser sends a request to the server for whatever page is currently in the URL. But the server does not have those. Only one file:
index.html. So how does the
_redirects file save the day? Let's break down the syntax:
/*matcher: every possible URL that the user requested (the star is a wildcard)
/index.htmlif the matcher matched, then serve this page instead
200an "OK" HTTP response code from the server
So a request to every page will be redirected to our only file (
As mentioned in the comments: This should just work out of the box if you install
ember command instead of
ember install empress-blog # do this # npm install empress-blog # do NOT do this
ember install [something] can do some additional work and in this case installs prember and ember-cli-fastboot which are the main pieces that will make the sub-pages work on full page reload.
- The issue described here is not specific to empress-blog nor to Netlify. It's just the combination where I see it most often. So I used it as an example to talk about something specific.
- Any SPA deployed via any hosting provider will have this problem.