Sapper: Hook to generate 404 pages for `sapper export`

[NathanielHill]

Many static hosting solutions allow for a user provisioned 404 page.

Would be helpful if sapper could render a user defined 404 page on sapper export even though it is not accessible via <a> tag from any route.

I currently implemented this by have an anchor tag in my footer component that is display: none and aria-hidden="true", but this may still present accessibility issues.

It does appear that sapper strips out the link from the final output since it will obviously never be rendered, so this is a viable approach.

But it's idiosyncratic and it would be nice if a standard way could be determined, documented, and possibly built into sapper.

[NathanielHill]

@Conduitry

[simonsinclair]

That doesn't appear to work, because Sapper exports everything to a pretty URL – /404/index.html when hosts are looking for /404.html.

Next.js handles this by assuming _error.js should become 404.html on export.

Would it be possible to implement something like this in Sapper? @Rich-Harris @Conduitry

[khrome83]

@NathanielHill you can give multiple entry points so you don't need to have a hidden anchor tag.

npm run export --entry "/ /404" for example would target the root of your site and the 404 page.

@simonsinclair - that is an issue specific to some hosts, like Netlify.

I think in the short term it you could do something like mv /404/index.html 404.html. I did not try this locally, but the idea would be to just move and rename the index.html file after export. The issue with this is that any hydration and json files would not work.

We tried a POC to move /en to root, and it rendered, but a lot of JSON files could not be found, or fetch calls in JS were broken. That may be ok for a 404 page. I would try it and see.

[onionhammer]

This seems to work (as a workaround)

    ...
    "export": "sapper export --entry '/ /404'",
    "postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html",

[samcreate]

@onionhammer Were you able to get non existing routes to go to that 404.html? My issues is on Netlify (formabrands.com) when you go to a random route (e.g. formabrands.com/dlkfjlkdsfj) it just renders a broken index page instead of trying to route to the 404.

[onionhammer]

@samcreate you can specify in your netlify.toml what to render. Each host has their own way of handling 404s, since you wont be able to handle it purely within svelte/sapper (or any static file system).

https://blog.kiprosh.com/show-custom-404-error-page-for-netlify-applications/

[samcreate]

@onionhammer
Thank you.

For anyone else that stumbles on here hosting on netlify.

I got it to work with these steps:

1. make a netlify.toml file in the root of your repo.
2. put his in it:

[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

make sure to point to= to wherever your custom 404 page is located.

1. I had to remove a _redirect file that I had previously added (another way netlify allows you to handle redirects) this kept the solution above from working.

[gevera]

"export": "sapper export --entry '/ /404'",
    "postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html",

This fixed my issue. Thank you

[madeleineostoja]

I agree that _error.svelte should render to /404.html on static export, I actually assumed this is what would happen by default and spent a while debugging why 404s weren't working in prod but were in development. So if nothing else this should be documented.

[hsnyc]

Having the same problem. So for static sites not hosted on Netlify what is the recommended way to generate the 404 page?

[regnaio]

This resolved it for me:

"export": "sapper export --legacy --entry \"/ /404\"",
"postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html",

It's very similar to the solution by onionhammer above, though I needed backslashes for the quote marks.

[regnaio]

"export": "sapper export --legacy --entry './ ./404'",
"postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html && rm -rf ./__sapper__/export/404",

Would recommend the above instead (note the . in front of / and /404). Ran into a bug today where sapper export was crawling into /C:/Program Files/Git