Generate a static 404.html when using adapter-static

[gusvd]

Describe the problem

I'm using sveltekit with adapter-static (as a SSG) to generate a pre-rendered site.

I'm hosting it on Cloudflare Pages who asks for a top-level 404.html file, otherwise it'll treat the site as a SPA and redirect any 404s to the root.

I'm looking for a way to generate a static 404.html file on the root of my project using adapter-static on build time. The 404 template uses data from +layout.server.js or +page.server.js to load links that will help users find what they're looking for.

It seems trivial, but everything I've tried so far failed.

Describe the proposed solution

I'm punching above my weight here, but the closer I got to a good solution was when I tried creating a /routes/404/+page.svelte.

This way I could take advantage of all the templating svelte/kit provides and use data from a +layout.server.js or +page.server.js that pre-rendered at build time.

But as you'll read bellow the relative links to .css files were an issue. So maybe there's an option to generate this page with absolute links to .css and .js files.

Alternatives considered

1) fallback: '404.html' proposed here with a custom +error.svelte This one breaks as soon I start customising the layout and adding a footer or other components that depend on data from +layout.server.js or +page.server.js.

It tries to load data from the non-existent directory. When trying to load http://domain.com/nonexistent/ it gives the following error:

Failed to load resource: the server responded with a status of 404 (Not Found) --> http://domain.com/nonexistent/__data.json?x-sveltekit-invalidated=1

2) Creating a /routes/404/+page.svelte This solution renders the 404.html page in the right place. However all the links to the .css are relative to the file and they break when the 404s come from a subfolder of the site (example.com/nested/folder).

3) Creating static 404.html page in the static folder. Similar problem with the relative links to css and js files. In this case the CSS files change name on every build, so the hard coded links break. In my test ./_app/immutable/assets/0.6c214458.css became 0.328b4a33.css, for example.

Importance

nice to have

Additional Information

No response

[uranderu]

I'm not a maintainer or anything. But maybe you could use the Cloudflare Pages adapter and set prerender to true in your root layout file. Then you have easy deployment to Cloudflare Pages plus you make sure everything is statically generated. I think it is a more robust solution then what you are trying to do here with the extra route. Do note, I have not tested this myself. Read more about the Cloudflare Pages adapter here and about how you prerender (SSG) here.

[leereamsnyder]

I hit your problem with the page-relative css/js links on 404 pages on Netlify. If you're serving your site at the the server root, you can use in svelte.config.js the option kit.paths.relative and set it to false to use server root paths. Like instead of './_app/immutable/something.cssit'll be/_app/immutable/something.css`