SvelteKit: How to output build as single HTML file with inlined JS and CSS?

Question

Is it possible to build a SvelteKit project to a single output HTML file which inlines all JS and CSS? Could SvelteKit be configured to support this output format or do I need to use an external build tool?

The single HTML file output is a core requirement in my project. I'm building a SvelteKit SPA using ssr: false and @sveltejs/adapter-static with the fallback: 'index.html' config.

I've previously used https://github.com/richardtallent/vite-plugin-singlefile to accomplish this with a simple vite + svelte setup - this worked great. However, I'm unable to add vite-plugin-singlefile to the svelte.config.js vite plugins in my SvelteKit project.

This is the SvelteKit config I've tried:

import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-static'
import { viteSingleFile } from 'vite-plugin-singlefile'

const config = {
    preprocess: preprocess(),
    kit: {
        target: '#svelte',
        adapter: adapter({ fallback: 'index.html' }),
        ssr: false,
        vite: {
            plugins: [viteSingleFile()],
            build: {
                target: 'es2019',
                assetsInlineLimit: 100000000,
                chunkSizeWarningLimit: 100000000,
                cssCodeSplit: false,
                sourcemap: false,
                brotliSize: false,
                rollupOptions: {
                    inlineDynamicImports: true,
                    output: {
                        manualChunks: () => 'everything.js',
                    },
                },
                outDir: 'build'
            }
        }
    },
}

export default config

I've also looked into using other solutions to inline all CSS and JS:

• https://github.com/remy/inliner - This doesn't support inlining the <script type="module"> that SvelteKit outputs and that I need to convert to inline scripts.
• The solution mentioned here, which didn't work: Output Single HTML File from Svelte Project
• https://github.com/jonathantneal/posthtml-inline-assets - which doesn't support <script type="module">, and not the dynamic import() calls inside of the esm modules.

Any ideas would be helpful!

Answer 1

This is a low-tech solution, but you can replace links to CSS and JS files with style and script tags, respectively. Then copy-paste the contents of those files between the tags.

As long as you put the style/script tags in the same place as you had previously linked your CSS and JS, there shouldn't be any major problems (though any JS scripts with defer will need to go in an event handler saying to only run the contents of that script the page is fully loaded).

Of course, you're using imported files, so this is all contingent on you being able to access their source code. If you can't access it, then needless to say you won't be able to copy-paste it into your HTML file.