Single HTML file output

[tanekim88]

Describe the problem

It would be great if there was an option to inline all css and js into the index.html so that it can be served offline, without fancy ssr feature. This is a feature that I need for my project.
Do you think this feature is even feasible to implement?

Describe the proposed solution

I am beginner, so I have no idea if it's even possible.

Alternatives considered

I am beginner, so I have no idea if it's even possible.

Importance

i cannot use SvelteKit without it

Additional Information

No response

[acoyfellow]

Have you tried using the static adapter? It's not one single file, but you can certainly run it offline after you compile it.

[Greenheart]

I discussed this in a recent StackOverflow question and concluded that the best option for my use case (static SPA) was to just use vite and https://github.com/sveltejs/vite-plugin-svelte along with https://github.com/richardtallent/vite-plugin-singlefile to inline assets.

Though, if this could get added to SvelteKit core or the static adapter, it would allow almost any app to use SvelteKit as a foundation for building apps, which would be really good for DX!

@tanekim77 Here's a starter project I made to create a SPA with only a single HTML file as the output: https://github.com/Greenheart/svelte-encrypted-spa. The encryption part can be removed if you don't need it.

[tanekim88]

@Greenheart That would be awesome. I will give that a shot.

[benmccann]

If you have no interactivity on the page, you just need to set hydrate and router both to false to avoid having JS created in the first place: https://kit.svelte.dev/docs#ssr-and-javascript-hydrate

[benmccann]

As far as building a file usable from local disk, see #907. I'm going to close this issue in favor of that one

For inlining JS and CSS, I believe that would be controlled by Vite

[wighawag]

@benmccann looks like sveltekit is adding stuff that make it incompatible with vite-plugin-singlefile mentioned by @Greenheart here

When using it and building it using static adapter I get the following error:

Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.

sveltekit is generated multiple inputs in the rollup config. is there any way to disable that somehow ?

Note that I am aware this is issue is considered closed but my opinion is that it should be reopened. My reasoning is as follow:

while fixing issue #907 could potentially fix this issue, it is still unclear why we should assume so. Having all the deps embedded in a single html would surely solve #907 but the reverse is dependent on the solution used to solve #907

[exislow]

I have the same issue. Will this be fixed soon?