How to deploy SvelteKit to Netlify

In short

The settings

Build command

npm run build

Publish directory

build

Step by step

Set it up

1. 1

   Set up SvelteKit for a static build

   Install the static adapter (npm i -D @sveltejs/adapter-static), use it in your config, and add export const prerender = true; to src/routes/+layout.js so every page is built to a file.

   import adapter from '@sveltejs/adapter-static';
   import { sveltekit } from '@sveltejs/kit/vite';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     plugins: [
       sveltekit({
         adapter: adapter(),
       }),
     ],
   });

2. 2

   Put the project in a Git repository

   Push it to GitHub, GitLab or Bitbucket. Netlify builds from the repository, so the build folder (build) doesn't need to be committed.

3. 3

   Import it in Netlify

   Start a new project from the repository and give Netlify access to it when it asks.

   Projects→Add new project→Import an existing project

4. 4

   Check the build settings

   Fill in the build settings like this:

   Build command

   npm run build

   Publish directory

   build

5. 5

   Deploy

   Start the deploy. When the build finishes, the site is at https://YOUR-SITE.netlify.app. Each push to the main branch deploys again, and other branches and pull requests get preview links.

   To change the settings later: Project configuration → Developer settings → Continuous deployment → Build settings.

Good to know

Common snags

• SvelteKit 2 keeps the adapter in svelte.config.js under kit.adapter; SvelteKit 3 moved it into the sveltekit() plugin in vite.config.js, as shown here. The options are the same.
• Node.js version: Set a NODE_VERSION environment variable, or add an .nvmrc file to the repository.

Questions

Before you start

Next step: connect your own domain to Netlify.