SvelteKit application over file:// protocol

[jerivas]

Hello! For reasons outside of our control, we require our SvelteKit app to work over the file:// protocol. The goal is to build the app, transfer files to client machines, and have them use it by launching index.html.

The biggest obstacle so far is that browsers refuse to load ESM scripts over file:// URLs, which means all JS is being blocked. It looks like Vite can be configured to target es5, but that also would remove modern JS syntax like let and const, which is not desired. I also looked into legacy builds, but support for them is currently an open issue.

I have prepared a demo repo configured to build the Svelte Kit demo app with the static adapter. You can try it yourself by building it and pointing your browser directly to build/index.html. You will get a blank screen and errors in the console:

[genaray]

Any Solution to this? Having the same problem rn... would be glad for any help :(

[brunnerh]

In newer Kit versions you can set output.bundleStrategy to 'inline' (output docs) and remove Vite's build.assetsInlineLimit by setting it to a large value/Infinity.

To make routing work, set the router.type to hash (router docs). The links in the application will accordingly have to use #/route/here.

[genaray]

Thanks! Is it normal that it still generates multiple Files? It generates an Index along the typically App folder with .json in it. Looks wrong hmm

[brunnerh]

Here would be a demo project.

Are you using @sveltejs/adapter-static?

(There will always be multiple intermediate files somewhere which then are turned into the final application by the adapter.)

[genaray]

Thanks i will Look at it! Yes im using Adapter-Static, inline should still Work then? How do i create the final HTML tho? npm run build/vite build simply generates that folder with those intermediate files and the index.html. Loading that one results in an cors error tho, any Idea? ^^ (Im using shadcn in it, could this cause Problems?)

[brunnerh]

The build command should output a standalone file (with possibly a few non-essential files).
The intermediate files should all be somewhere in the .svelte-kit directory.

It looks like something is off in your case. Maybe the library has something to do with it, not sure.

Ideally create a minimal reproduction and ask a separate question, providing all the necessary files.