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

In SvelteKit projects, the build output typically generates multiple files, including JavaScript, CSS, and HTML. However, if you want to combine all these outputs into a single HTML file, this is commonly referred to as bundling into a single file or using inline styles and scripts. This can simplify deployment and, in some cases, speed up loading, especially in environments with poor network conditions.

1. Modify svelte.config.js

First, ensure that your svelte.config.js file uses the appropriate adapter, typically for static sites, such as @sveltejs/adapter-static.

javascript
import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter()
    }
};

2. Use Inline JavaScript and CSS

In Svelte components, you can directly write JavaScript and CSS within <script> and <style> tags. This code is inline by default and located within the HTML file.

3. Customize the Build Process

To combine all content into a single file, you may need to customize the build and bundling process. This typically involves modifying the configuration of Rollup or Vite (SvelteKit uses one of these as its underlying bundler). Here is an example configuration:

javascript
// svelte.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [svelte()],
    build: {
        rollupOptions: {
            output: {
                // Configure output options to generate a single file
                inlineDynamicImports: true,
                format: 'iife'
            }
        }
    }
});

4. Post-processing

After the build process is complete, you may need a post-processing step to ensure all resources are correctly inlined. This may include using a Node.js script to read the build output and inline the contents of all external JS and CSS files into the HTML file.

javascript
const fs = require('fs');
const path = require('path');

const htmlFilePath = 'path/to/your/output.html';
let htmlContent = fs.readFileSync(htmlFilePath, 'utf8');

// Extract and inline CSS and JavaScript
htmlContent = htmlContent.replace(/<link href="(.+?)" rel="stylesheet">/g, (match, href) => {
  const cssPath = path.join('path/to/build', href);
  const cssContent = fs.readFileSync(cssPath, 'utf8');
  return `<style>${cssContent}</style>`;
});

htmlContent = htmlContent.replace(/<script src="(.+?)"><\/script>/g, (match, src) => {
  const jsPath = path.join('path/to/build', src);
  const jsContent = fs.readFileSync(jsPath, 'utf8');
  return `<script>${jsContent}</script>`;
});

fs.writeFileSync(htmlFilePath, htmlContent);

Summary

Bundling SvelteKit's output into a single HTML file requires deep customization of the build process. This includes configuring Vite or Rollup, and possibly writing scripts to handle output files. This approach has its uses but increases complexity, especially when dealing with large applications. In practice, this is typically used for specific scenarios, such as generating simple static pages or projects requiring minimal deployment.