Build an output that is usable from local disk (file:// URL)

[jzillmann]

Is your feature request related to a problem? Please describe.
Quite often i code tools which take some input (like a JSON file) and generate a HTML report out of it. This HTML report might be served by a server (e.g. Github Pages) but often just sits somewhere on the disk and should be openable/consumable from there (e.g. open file:///Users/x/projects/y/build/test/index.html).

Describe the solution you'd like
From initial experiments (with adapter-static) I found 2 things I would need for the above to work which I failed to accomplish with svelte-kit so far:

• Links/Includes (from index.html) need to be relative instead of absolute
  • paths/assets||base were quite resistant setting up anything relative
• The JS field need to be in IIFE format (since module script imports will raise CORS issues)
  • vite.build: { lib: { name: "my-app", entry: "src/main.ts", formats: ["iife"] }} produced UMD and IIFE output formats are not supported for code-splitting builds

A solution would be to make the 2 things possible.
Perfect would be a simple way to achieve that. Like an specialized adapter.

Describe alternatives you've considered
Maybe what I'm trying to achieve is dump and using svelte-kit for such a thing doesn't make much sense? Just stick to Svelte Classic ?

With Svelte Classic and Vite I can accomplish the above by tweaking vite.config.js in the following way:

• Set base to '' (makes the links relative)
• Configure IIEF format:

build: {
  lib: { name: "my-app", entry: "src/main.ts", formats: ["iife"] },
}

• Move the index.html to public/ and add appropriate script and css includes

How important is this feature to you?
This is the first thing I usually set up for the majority of apps I'm crafting.

[KonradHoeffner]

I understand your pain as I have the same problem. See also issues #1553 and #1154.

[btakita]

@jzillmann Re your current Svelte Classic & Vite solution: could you go more into the routing?

[jzillmann]

@btakita Not sure what you mean...

[btakita]

@jzillmann How are you currently routing to the different "page" components in the SPA? I wonder if it's feasible to extract only the Sveltekit router to use with Classic Svelte & Vite.

--- Edit

I'm going to try to add use rollup & @sveltejs/kit as a git submodule to directly output all of the JS & CSS into index.html. Will expose some core functions such as create_manifest_data and whatever else is useful to handle the routing. Fortunately kit is well factored. Hopefully it will work out.

[jzillmann]

Oh, I guess i just do customized routing, nothing special there!

[maximedupre]

This issue is essential for Electron apps, which use the filesystem.

All the links and scripts in the page are absolute, so it doesn't work.

[btakita]

Just a heads-up. I'm working on a fork of Sapper to support file:// hash-based routing. My project needs to continue supporting sapper until some SSR issues are fixed (vitejs/vite#4306).

My current work in progress is at https://github.com/btakita/sapper/tree/hbr
I presume that SvelteKit & Sapper have similar routing. I'm using conditionals checking the window.location.origin === 'file://' to use the Hash Based Routing strategy.

I had to attend to some other priorities & will continue with the hbr branch over the next couple of days.

[btakita]

@benmccann I was able to modify the routing to switch between hash-based routing when the origin is file:// & otherwise the default path-based-routing. https://github.com/btakita/sapper/tree/hbr

When the time comes to migrate my project over to Svelte Kit, I'll work on a PR. The conditionals are spread out in several places in https://github.com/btakita/sapper/blob/hbr/runtime/src/app/router/index.ts & https://github.com/btakita/sapper/blob/hbr/runtime/src/app/goto/index.ts.

I didn't want to do any major refactorings, lest the hbr branch diverge too far from the master branch.

[AlsDevShack]

Also hoping this can get added to sveltekit.

IMO This is essential for running native apps with svelte running in WebView as a GUI

Is there a workaround available?

I'd like to keep using SvelteKit for creating the full blown app with a server. But also need the SPA app to be run from file on client if no connection is available.

[TJKoury]

I've tried installing the vite-plugin-singlefile and putting the default config in the svelte.config.js, but the resulting bundle never shows up. I am not familiar with vite.

[easyfrog]

any solution for now?
I want to use sveltekit and adapter-static to generate static html files use on cordova, but there is no luck for now.