SvelteKit on Netlify

SvelteKit is a versatile, open source framework for building web applications using Svelte components. Unlike React and Vue, Svelte has no virtual DOM and includes a compiler that builds projects into plain HTML, CSS, and JavaScript. SvelteKit enables features like client-side routing, server-side rendering (SSR), and hot module replacement for Svelte projects.

# Key features

These SvelteKit features are available for projects built and deployed with Netlify.

Multiple rendering modes. As opposed to globally setting one rendering mode for a project, you can define which rendering mode to use on a per-page basis. With SvelteKit, choose between modes such as prerendering and static site generation (SSG), client-side rendering (CSR), and server-side rendering (SSR).
Automatic API endpoints. API routes allow developers to create endpoints to interact with third-party services for data fetching.
Consistent navigation experience. With SvelteKit, you can use hybrid rendering to combine server-side rendered pages with a client-side router. This makes the navigation experience similar to a typical single-page app (SPA) that doesn’t require full page reloads.
Developer-friendly tooling. SvelteKit uses Vite for a modern scaffolding and development experience.

# Netlify integration

SvelteKit projects on Netlify benefit from automatic framework detection and have minor setup considerations for deployment.

# Automatic framework detection

When you link a repository for a project, Netlify tries to detect the framework your project is using. Many SvelteKit projects use @sveltejs/adapter-netlify to deploy to Netlify. For these projects, Netlify uses the command and output directory specified in the adapter’s netlify.toml file: npm run build and build. In this case, npm run build abstracts the svelte-kit build command.

If your project doesn’t use the Netlify adapter, Netlify instead automatically suggests a build command and output directory of svelte-kit build and build.

If you’re using the CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: svelte-kit dev and 3000. You can override suggested values or set them in a configuration file instead, but automatic framework detection may help simplify the process of setting up a SvelteKit site on Netlify.

For manual configuration, check out the typical build settings for SvelteKit.

# Deployment

To deploy a SvelteKit project on Netlify, use the Netlify SvelteKit adapter.

Install the netlify-sveltekit adapter into your project.
```
npm install -D @sveltejs/adapter-netlify@next
```
```
yarn add -D @sveltejs/adapter-netlify@next
```
Add the adapter to your project’s svelte.config.js file.
```
import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter()
  }
};
```
If the config file already has an adapter import from @sveltejs/adapter-auto, we recommend replacing it with the more specific import from @sveltejs/adapter-netlify. This ensures that SvelteKit will select the correct adapter module in all development environments, including local development.
Create a netlify.toml in your project’s base directory and specify a build command and publish directory.
```
[build]
  command = "npm run build"
  publish = "build"
```
Create your new project on Netlify with Git or the Netlify CLI.

# Edge Functions

This feature is in BETA.

Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools.

When you enable Edge Functions in SvelteKit, SSR happens in a Deno-based edge function that’s deployed close to your site visitors. If you don’t enable Edge Functions, SSR relies on standard Node-based Netlify Functions.

You can browse a full library of reference examples for different ways to use Edge Functions. For more details, check out the Edge Functions documentation.

# Enable Edge Functions in your SvelteKit project

The netlify-sveltekit adapter supports the beta release of Edge Functions. To enable Edge Functions for your SvelteKit project, you need to update your svelte.config.js file. Specifically, add the edge: true option to the adapter function. The edge option defaults to false.

export default {
  kit: {
    adapter: adapter({
      edge: true
    })
  }
};

# More resources

Did you find this doc useful?

Your feedback helps us improve our docs.