Netlify

To deploy to Netlify, use adapter-netlify.

This adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Netlify-specific options.

Usage

Install with npm i -D @sveltejs/adapter-netlify, then add the adapter to your vite.config.js:

import import adapteradapter from '@sveltejs/adapter-netlify';
import { function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit } from '@sveltejs/kit/vite';
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig } from 'vite';

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			KitConfig.adapter?: Adapter | undefined
Your adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: import adapteradapter({
				// See below for an explanation of these options
				edge: booleanedge: false,
				split: booleansplit: false
			})
		})
	]
});

Then, make sure you have a netlify.toml file in the project root. This will determine where to write static assets based on the build.publish settings, as per this sample configuration:

[build]
	command = "npm run build"
	publish = "build"

If the netlify.toml file or the build.publish value is missing, a default value of "build" will be used.

If you have set the publish directory in the Netlify UI to something else then you will need to set it in netlify.toml too.

Options

edge

If true, your app will be deployed as a Netlify Edge Function rather than the standard Node-based function.

split

If true, your app will be split into multiple functions instead of a single one for the entire app.

If edge is true, this option cannot be used.

Netlify alternatives to SvelteKit functionality

You may build your app using functionality provided directly by SvelteKit without relying on any Netlify functionality. Using the SvelteKit versions of these features will allow them to be used in dev mode, tested with integration tests, and to work with other adapters should you ever decide to switch away from Netlify. However, in some scenarios you may find it beneficial to use the Netlify versions of these features. One example would be if you're migrating an app that's already hosted on Netlify to SvelteKit.

_headers and _redirects

The _headers and _redirects files specific to Netlify can be used for static asset responses (like images) by putting them into the project root folder. You can also use [[redirects]] in your netlify.toml.

Netlify Forms

1. Create your Netlify HTML form as described here, e.g. as /routes/contact/+page.svelte. (Don't forget to add the hidden form-name input element!)
2. Netlify's build bot parses your HTML files at deploy time, which means your form must be prerendered as HTML. You can either add export const prerender = true to your contact.svelte to prerender just that page or set the prerender.force: true option to prerender all pages.
3. If your Netlify form has a custom success message like <form netlify ... action="/success"> then ensure the corresponding /routes/success/+page.svelte exists and is prerendered.

Netlify Functions

With this adapter, SvelteKit endpoints are hosted as Netlify Functions. Netlify function handlers have additional context, including Netlify Identity information. You can access this context via the event.platform.context field inside your hooks and +page.server or +layout.server endpoints. These are serverless functions when the edge property is false in the adapter config or edge functions when it is true.

/** @type {import('./$types').PageServerLoad} */
export const load = async (event) => {
	const context = event.platform?.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
	const context = event.platform?.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

Additionally, you can add your own Netlify functions by creating a directory for them and adding the configuration to your netlify.toml file. For example:

[build]
	command = "npm run build"
	publish = "build"

[functions]
	directory = "functions"

Troubleshooting

Accessing the file system

You can't use fs in edge deployments.

You can use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the read function from $app/server to access your files. It also works inside edge deployments by fetching the file from the deployed public assets location.

Alternatively, you can prerender the routes in question.