Adapters
Edit this page on GitHubBefore you can deploy your SvelteKit app, you need to adapt it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment.
By default, projects are configured to use @sveltejs/adapter-auto
, which detects your production environment and selects the appropriate adapter where possible. If your platform isn't (yet) supported, you may need to install a custom adapter or write one.
See the adapter-auto README for information on adding support for new environments.
Supported environmentspermalink
SvelteKit offers a number of officially supported adapters.
You can deploy to the following platforms with the default adapter, adapter-auto
:
- Cloudflare Pages via
adapter-cloudflare
- Netlify via
adapter-netlify
- Vercel via
adapter-vercel
- GitHub Pages via
adapter-static
Node.jspermalink
To create a simple Node server, install the @sveltejs/adapter-node
package and update your svelte.config.js
:
import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-node';
With this, vite build
will generate a self-contained Node app inside the build
directory. You can pass options to adapters, such as customising the output directory:
import adapter from '@sveltejs/adapter-node';
export default {
kit: {
adapter: adapter()
adapter: adapter({ out: 'my-output-directory' })
}
};
Static sitespermalink
Most adapters will generate static HTML for any prerenderable pages of your site. In some cases, your entire app might be prerenderable, in which case you can use @sveltejs/adapter-static
to generate static HTML for all your pages. A fully static site can be hosted on a wide variety of platforms, including static hosts like GitHub Pages.
import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
You can also use adapter-static
to generate single-page apps (SPAs) by specifying a fallback page.
You must ensure
trailingSlash
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 settrailingSlash: 'always'
to create/a/index.html
instead.
GitHub Pagespermalink
SvelteKit can be automatically configured for deployment on GitHub Pages by using the actions/configure-pages
GitHub Action before building it.
- uses: actions/configure-pages@v1
- name: Build
run: pnpm run build
- uses: actions/upload-pages-artifact@v1
with:
path: build
- uses: actions/deploy-pages@v1
Platform-specific contextpermalink
Some adapters may have access to additional information about the request. For example, Cloudflare Workers can access an env
object containing KV namespaces etc. This can be passed to the RequestEvent
used in hooks and endpoints as the platform
property — consult each adapter's documentation to learn more.
Community adapterspermalink
Additional community-provided adapters exist for other platforms. After installing the relevant adapter with your package manager, update your svelte.config.js
:
import adapter from '@sveltejs/adapter-auto';
import adapter from 'svelte-adapter-[x]';
Writing custom adapterspermalink
We recommend looking at the source for an adapter to a platform similar to yours and copying it as a starting point.
Adapters packages must implement the following API, which creates an Adapter
:
ts
/** @param {AdapterSpecificOptions} options */export default function (options ) {constadapter = {name : 'adapter-package-name',asyncadapt (builder ) {// adapter implementation}};returnadapter ;}
The types for Adapter
and its parameters are available in types/config.d.ts.
Within the adapt
method, there are a number of things that an adapter should do:
- Clear out the build directory
- Write SvelteKit output with
builder.writeClient
,builder.writeServer
, andbuilder.writePrerendered
- Output code that:
- Imports
Server
from${builder.getServerDirectory()}/index.js
- Instantiates the app with a manifest generated with
builder.generateManifest({ relativePath })
- Listens for requests from the platform, converts them to a standard Request if necessary, calls the
server.respond(request, { getClientAddress })
function to generate a Response and responds with it - expose any platform-specific information to SvelteKit via the
platform
option passed toserver.respond
- Globally shims
fetch
to work on the target platform, if necessary. SvelteKit provides a@sveltejs/kit/install-fetch
helper for platforms that can usenode-fetch
- Imports
- Bundle the output to avoid needing to install dependencies on the target platform, if necessary
- Put the user's static files and the generated JS/CSS in the correct location for the target platform
Where possible, we recommend putting the adapter output under the build/
directory with any intermediate output placed under .svelte-kit/[adapter-name]
.
The adapter API may change before 1.0.