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:

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

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

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

13

Tags:

EmberNetlifySpa