404 Page

[flauc]

How do you add a 404 page? I'm really sorry if I'm missing something obvious.

[flauc]

I was, just adding a 404 route works fine. I just needed to specify the template in the route.js file because it didn't get detected automatically.

[svandegar]

Hi @flauc , would you mind explaining your solution in detail?

I feel kind of dumb, after 3 hours of trying to set my 404 page without success.

[flauc]

Hi @svandegar, this is my setup in route.js

module.exports = {
  all: () => [{ slug: '404' }],
  template: '404.svelte',
  permalink: ({ request }) => `/${request.slug}`,
};

Basically just adding template is what fixed it for me.

[svandegar]

Thank you!

I copy-pasted your exact route.js content and still, navigating to a non-existing page like localhost:3000/foo does not show my 404.

The only way I can see my 404 page is by navigating specifically to localhost:3000/404

I guess I must be missing some config somewhere else to redirect 404 requests to this page but no idea where to look.

[nickreese]

@flauc look at the polka definition for 404. https://github.com/lukeed/polka#optionsonnomatch

[flauc]

Sorry @svandegar I'm now seeing that it does indeed not work locally (which is when polka is involved), however it does work as expected on live https://glycanage.com/some-bad-link.

Thank you @nickreese

[svandegar]

Thanks for the doc but my 404 is still not appearing, even on prod: https://estimer.com/some-bad-link When I check my public folder, I see that the 404.html is missing at the root. I just have a ./404/index.html but this is not where my hosting (Firebase) is looking for the 404 page.

Is there a way to make it work, other than editing the public folder content manually after each build?

[nickreese]

Add a function on the requestComplete hook to write the 404.html file. That is your best bet.

[svandegar]

Gonna try that. Thanks for your help!