empress-blog + netlify = Page Not Found?
Tags: ember, netlify, spa
Published: 2021-07-04 20:48:47

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](https://empress-blog.netlify.app/) instance on your [Netlify](https://app.netlify.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qojv12ru48417slhi2ni.png)

## Manual solution (not preferred)

Create [_redirects](https://docs.netlify.com/routing/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](https://en.wikipedia.org/wiki/Single-page_application) (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](https://github.com/alex/what-happens-when).

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) 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`:

```sh
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](https://guides.emberjs.com/release/addons-and-dependencies/#toc_addons) and in this case installs [prember](https://github.com/ef4/prember) and [ember-cli-fastboot](https://github.com/ember-fastboot/ember-cli-fastboot) which are the main pieces that will make the sub-pages work on full page reload.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7tziil9dcqx9lj8h269.png)

## 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 <a href="https://unsplash.com/@nate_dumlao?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nathan Dumlao</a> on <a href="https://unsplash.com/s/photos/404?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>