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.
The problem
- 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:
Manual solution (not preferred)
Create _redirects file in /public folder with following content:
# /public/_redirects
/* /index.html 200
Deploy your site again. And the problem should be gone.
Why this works
Single Page Applications (SPAs) usually consist of three files: index.html, everything.js and 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.
After a click, the browser is not sending a request to the server. Instead, some JavaScript magic happens and it manipulates the content of the page and the URL bar to make it seem like the page has changed.
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 (index.html) and that one will then display respective content, because of JavaScript SPA magic.
Automatic solution (preferred)
As mentioned in the comments: This should just work out of the box if you install empress-blog using ember command instead of npm/yarn:
ember install empress-blog # do this
# npm install empress-blog # do NOT do this
Why this works
The command 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.
Note
- 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.
Photo by Nathan Dumlao on Unsplash
Top comments (4)
Hey Michal, there is another explanation why this isn’t working for you (at least in the empress-blog situation).
When you follow the readme for empress-blog it tells you to “ember install empress-blog”, this may seem like it’s the same as “npm install” but it actually does extra work to install ember-cli-fastboot and prember. With these all working together you should have no page on your site that isn’t pre-rendered.
There are other benefits but it avoids the need for the redirect anyway 😂
That might be the issue indeed. So if I do that then the
/distbuild will contain a statically built HTML file for every article? Otherwise this would IMO not work with static hosting.Yes! empress-blog and prember manage all this for you, you just need to make sure you have the right stuff installed 👍 empress-blog (and all Empress projects) are specifically designed to work awesomely with static hosting
Purrrfect. Updated. Thank you! 🙇🏻 I'm not sure where did my mistake came from because I stumbled on it in quite few independent projects and I'm too lazy to type out the commands, so I'm somewhat sure I used
ember install ...🤷🏻