SvelteKit on Netlify

Last updated: June 1, 2023

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. For SvelteKit projects, Netlify automatically suggests a build command and output directory of vite build and build.

Projects that use SvelteKit starter templates can use npm run build as the build command and this will run vite build.

If you’re using the CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: vite dev and 5173. 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 SvelteKit’s Netlify adapter. This adapter deploys SvelteKit endpoints as Netlify Functions. For example, SSR routes are deployed to a render function. If you enable the split feature, each route is deployed to its own function. Check out the split functions section below for details.

Function routing limitations

Paths handled by proxies or functions may not redirect from HTTP to HTTPS URLs as expected. If you’re working with proxies or functions, we recommend only publishing HTTPS URLs for your visitors to use.

To deploy your project on Netlify:

Install the 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 and pass any options you need.
```
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.

Alternatively, you can use @sveltejs/adapter-static for a fully static site, and it will also work successfully with Netlify.
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.

# Split functions

By default, SvelteKit’s Netlify adapter will bundle all of your routes and SSR functionality into a single Netlify Function called render. This can result in a large function. If desired, you can configure the adapter to generate multiple functions instead by setting the split option to true.

The split feature does not work with Edge Functions. In svelte.config.js, you should either set edge to false or leave that option out.

// svelte.config.js
 export default {
   kit: {
     adapter: adapter({
       edge: false,
       split: true
     })
   }
 };

When the split option is true, the adapter generates a function for each route (pages and SvelteKit endpoints) and uses the route or endpoint name as the function name. But, generated function names for nested and random routes can be hard to predict. To confirm the name of a generated function, refer to the Functions page in the Netlify UI for a list of all the generated functions for your SvelteKit site.

# Edge Functions

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 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.

If you use Edge Functions, you can’t use the adapter’s split feature.

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

# Limitations

Edge functions don’t work locally. Currently, edge functions do not work as expected when running netlify dev with SvelteKit.

# More resources

Did you find this doc useful?

Your feedback helps us improve our docs.