Building your app

Building a SvelteKit app happens in two stages, which both happen when you run vite build (usually via npm run build).

Build stages

Firstly, Vite creates an optimized production build of your server code, your browser code, and your service worker (if you have one). Prerendering (routes marked with export const prerender = true) is executed at this stage, if appropriate. Secondly, an adapter takes this production build and tunes it for your target environment. See the adapters overview for more information.

During the build

SvelteKit will load your +page/layout(.server).js files (and all files they import) for analysis during the build. Any code that should not be executed at this stage must check that building from $app/environment is false:

import { building } from '$app/environment';
import { initialiseDatabase } from '$lib/server/database';

if (!building) {
  initialiseDatabase();
}

export function load() {
  // ...
}

The building flag is only true during the build process. It’s false during development and when your app is running in production.

Preview your app

After building, you can view your production build locally with vite preview (via npm run preview).

This will run the app in Node, and so is not a perfect reproduction of your deployed app. Adapter-specific adjustments like the platform object do not apply to previews.

Build output

The build process creates several directories and files:

Client assets

Optimized JavaScript, CSS, and other static assets for the browser

Server bundle

Server-side rendering code and API routes

Prerendered pages

Static HTML files for routes marked with export const prerender = true

Adapter output

Platform-specific files generated by your chosen adapter

Build configuration

You can customize the build process through your svelte.config.js file:

/// file: svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    prerender: {
      entries: ['*']
    },
    paths: {
      base: '/my-app'
    }
  }
};

export default config;

Check your adapter’s documentation for platform-specific build options and requirements.

Getting Started

Core Concepts

Build and Deploy

Advanced

Build stages

During the build

Preview your app

Build output

Build configuration

​Build stages

​During the build

​Preview your app

​Build output

​Build configuration

Build stages

During the build

Preview your app

Build output

Build configuration