Building Your App

Building a SvelteKit consists of two stages. First the production build is run. This will create a client and a server build which are later consumed by the corresponding environments. Prerendering is executed at this stage, if enabled. The second step is to adapt the output to your deployment target using adapters (more on that in the later sections).

During the buildpermalink

SvelteKit will load your +page/layout(.server).js files (and all files they import) for analysis during the build. This could lead to code eagerly running which you want to avoid at that stage. Wrap the code in question with building from $app/environment:

ts
import { building } from '$app/environment';
import { setupMyDatabase } from '$lib/server/database';
 
if (!building) {
  setupMyDatabase();
}
 
export function load() {
  // ...
}

Preview your apppermalink

Run the preview script to look at your app locally after the production build is done. Note that this does not yet include adapter-specific adjustments like the platform object.

Adapterspermalink

Before 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

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 and disabling SSR.

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 set trailingSlash: 'always' to create /a/index.html instead.

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 server routes 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) {
  /** @type {import('@sveltejs/kit').Adapter} */
  const adapter = {
    name: 'adapter-package-name',
    async adapt(builder) {
      // adapter implementation
    }
  };
 
  return adapter;
}

The types for Adapter and its parameters are available in types/index.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, and builder.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 to server.respond
  • Globally shims fetch to work on the target platform, if necessary. SvelteKit provides a @sveltejs/kit/install-fetch helper for platforms that can use node-fetch
• 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].