@sveltejs/adapter-static
Adapter for SvelteKit apps that prerenders your site as a collection of static files.
Usage
Install with npm i -D @sveltejs/adapter-static@next
, then add the adapter to your svelte.config.js
:
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
pages: '.svelte-kit/static/build',
assets: '.svelte-kit/static/build',
fallback: null
})
}
};
Unless you're in SPA mode, the adapter will attempt to prerender every page of your app, regardless of whether the prerender
option is set.
Options
pages
The directory to write prerendered pages to. It defaults to .svelte-kit/static/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
.
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:
import adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: '200.html'
})
}
};
When operating in SPA mode, only pages that have the prerender
option set will be prerendered.
Changelog
The Changelog for this package is available on GitHub.
License
MIT