CODEWITHSUNDEEP
javascripthtmlsveltevitesveltekit
Samuel Plumppu
Samuel Plumppu

Reputation: 375

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

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:

Any ideas would be helpful!

Upvotes: 25

Views: 7361

Answers (2)

Sateesh
Sateesh

Reputation: 311

Sveltekit now has an option that allows inlining everything.

"We now have the ability to generate fully self-contained apps with the bundleStrategy: 'inline' option. Together with Vite’s assetsInlineLimit option, it’s possible to put an entire SvelteKit app — code, styles, fonts, images, audio and everything else — inside a single .html file that you can share with people on a floppy disk."

Announcement: https://svelte.dev/blog/advent-of-svelte#Day-22:-self-contained-apps

Docs: https://svelte.dev/docs/kit/configuration#output

Upvotes: 1

Aidan Andreasen
Aidan Andreasen

Reputation: 19

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.

Upvotes: 1

Related Questions