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.