DEV Community

Cover image for empress-blog + netlify = Page Not Found?
Michal Bryxí
Michal Bryxí

Posted on • Updated on

empress-blog + netlify = Page Not Found?

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

  1. Open the URL of your deployed empress-blog instance on your Netlify account
  2. Navigate to any subpage that changes the URL
  3. Execute hard, full page reload (cmd + shift + R)
  4. See Netlify 404 page:

Netlify 404

Manual solution (not preferred)

Create _redirects file in /public folder with following content:

# /public/_redirects

/*    /index.html   200
Enter fullscreen mode Exit fullscreen mode

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.html if the matcher matched, then serve this page instead
  • 200 an "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
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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

Discussion (4)

Collapse
real_ate profile image
Chris Manson

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 😂

Collapse
michalbryxi profile image
Michal Bryxí Author

That might be the issue indeed. So if I do that then the /dist build will contain a statically built HTML file for every article? Otherwise this would IMO not work with static hosting.

Collapse
real_ate profile image
Chris Manson

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

Thread Thread
michalbryxi profile image
Michal Bryxí Author • Edited

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 ... 🤷🏻