@sveltejs/adapter-static

What is @sveltejs/adapter-static?

@sveltejs/adapter-static is an adapter for SvelteKit that allows you to build static sites. It generates a static version of your SvelteKit app, which can be hosted on any static hosting service.

What are @sveltejs/adapter-static's main functionalities?

Static Site Generation

This feature allows you to configure the SvelteKit app to generate a static site. The code sample shows how to set up the adapter in the SvelteKit configuration file to output the static files to a 'build' directory.

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

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null
    })
  }
};

Custom Fallback Page

This feature allows you to specify a custom fallback page for single-page applications. The code sample demonstrates how to set a '200.html' file as the fallback for routes that are not pre-rendered.

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

export default {
  kit: {
    adapter: adapter({
      fallback: '200.html'
    })
  }
};

Other packages similar to @sveltejs/adapter-static

gatsby

Gatsby is a React-based open-source framework for creating static websites and apps. It offers a rich plugin ecosystem and is known for its performance optimizations. Compared to @sveltejs/adapter-static, Gatsby is more opinionated and comes with a larger set of built-in features and plugins.

next

Next.js is a React framework that supports both static site generation and server-side rendering. It provides a flexible approach to building web applications, allowing developers to choose between static and dynamic rendering. While @sveltejs/adapter-static focuses solely on static site generation for SvelteKit, Next.js offers a broader range of rendering options.

nuxt

Nuxt.js is a framework for creating Vue.js applications, with support for static site generation and server-side rendering. It provides a similar static site generation capability as @sveltejs/adapter-static but is tailored for Vue.js instead of Svelte.

README

@sveltejs/adapter-static

Adapter for SvelteKit apps that prerenders your entire site as a collection of static files. If you'd like to prerender only some pages, you will need to use a different adapter together with the prerender option.

Usage

Install with npm i -D @sveltejs/adapter-static, then add the adapter to your svelte.config.js:

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false
    }),

    prerender: {
      // This can be false if you're using a fallback (i.e. SPA mode)
      default: true
    }
  }
};

⚠️ You must ensure SvelteKit's trailingSlash option is set appropriately for your environment. If your host does not render /a.html upon receiving a request for /a then you will need to set trailingSlash: 'always' to create /a/index.html instead.

Options

pages

The directory to write prerendered pages to. It defaults to build.

assets

The directory to write static assets (the contents of static, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as pages, and it will default to whatever the value of pages is, but in rare circumstances you might need to output pages and assets to separate locations.

fallback

Specify a fallback page for SPA mode, e.g. index.html or 200.html or 404.html.

precompress

If true, precompresses files with brotli and gzip. This will generate .br and .gz files.

SPA mode

You can use adapter-static to create a single-page app or SPA by specifying a fallback page.

In most situations this is not recommended: it harms SEO, tends to slow down perceived performance, and makes your app inaccessible to users if JavaScript fails or is disabled (which happens more often than you probably think).

The fallback page is a blank HTML page that loads your SvelteKit app and navigates to the correct route. For example Surge, a static web host, lets you add a 200.html file that will handle any requests that don't otherwise match. We can create that file like so:

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      fallback: '200.html'
    })
  }
};

When operating in SPA mode, you can omit config.kit.prerender.default (or set it to false, its default value), and only pages that have the prerender option set will be prerendered at build time.

SvelteKit will still crawl your app's entry points looking for prerenderable pages. If svelte-kit build fails because of pages that can't be loaded outside the browser, you can set config.kit.prerender.entries to [] to prevent this from happening. (Setting config.kit.prerender.enabled also has this effect, but would prevent the fallback page from being generated.)

⚠️ During development, SvelteKit will still attempt to server-side render your routes. This means accessing things that are only available in the browser (such as the window object) will result in errors, even though this would be valid in the output app. To align the behavior of SvelteKit's dev mode with your SPA, you can call resolve() with a parameter of {ssr: false} inside the handle() hook.

GitHub Pages

When building for GitHub Pages, make sure to update paths.base to match your repo name, since the site will be served from https://your-username.github.io/your-repo-name rather than from the root.

You will have to prevent GitHub's provided Jekyll from managing your site by putting an empty .nojekyll file in your static folder. If you do not want to disable Jekyll, change the kit's appDir configuration option to 'app_' or anything not starting with an underscore. For more information, see GitHub's Jekyll documentation.

A config for GitHub Pages might look like the following:

const dev = process.env.NODE_ENV === 'development';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	...
	kit: {
		...
		paths: {
			base: dev ? '' : '/your-repo-name',
		},
		// If you are not using a .nojekyll file, change your appDir to something not starting with an underscore.
		// For example, instead of '_app', use 'app_', 'internal', etc.
		appDir: 'internal',
	}
};

Changelog

The Changelog for this package is available on GitHub.

License

MIT