Netlify

A SvelteKit adapter that creates a Netlify app.

If you're using adapter-auto, you don't need to install this unless you need to specify Netlify-specific options, since it's already included.

Installationpermalink

npm i -D @sveltejs/adapter-netlify

You can then configure it inside of svelte.config.js:

ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.
 
export default {
  kit: {
  // default options are shown
  adapter: adapter({
    // if true, will create a Netlify Edge Function rather
    // than using standard Node-based functions
    edge: false,
 
    // if true, will split your app into multiple functions
    // instead of creating a single one for the entire app.
    // if `edge` is true, this option cannot be used
    split: 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. Note that 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, or use the default value of "build".

Node versionpermalink

New projects will use Node 16 by default. However, if you're upgrading a project you created a while ago it may be stuck on an older version. See the Netlify docs for details on manually specifying Node 16 or newer.

Netlify Edge Functions (beta)permalink

SvelteKit supports the beta release of Netlify Edge Functions. If you pass the option edge: true to the adapter function, server-side rendering will happen in a Deno-based edge function that's deployed close to the site visitor. If set to false (the default), the site will deploy to standard Node-based Netlify Functions.

ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.
 
export default {
  kit: {
  adapter: adapter({
    // will create a Netlify Edge Function using Deno-based
    // rather than using standard Node-based functions
    edge: true
  })
  }
};

Netlify alternatives to SvelteKit functionalitypermalink

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.

Using Netlify Redirect Rulespermalink

During compilation, redirect rules are automatically appended to your _redirects file. (If it doesn't exist yet, it will be created.) That means:

• [[redirects]] in netlify.toml will never match as _redirects has a higher priority. So always put your rules in the _redirects file.
• _redirects shouldn't have any custom "catch all" rules such as /* /foobar/:splat. Otherwise the automatically appended rule will never be applied as Netlify is only processing the first matching rule.

Using Netlify Formspermalink

1. Create your Netlify HTML form as described here, e.g. as /routes/contact.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 kit.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.svelte exists and is prerendered.

Using Netlify Functionspermalink

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.

ts
export const load = async (event) => {
An async function or method in ES5/ES3 requires the 'Promise' constructor.  Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your '--lib' option.
Parameter 'event' implicitly has an 'any' type.2705
7006An async function or method in ES5/ES3 requires the 'Promise' constructor.  Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your '--lib' option.
Parameter 'event' implicitly has an 'any' type.
  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"

Troubleshootingpermalink

Accessing the file systempermalink

You can't access the file system through methods like fs.readFileSync in Serverless/Edge environments. If you need to access files that way, do that during building the app through prerendering. If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.

Changelogpermalink

The Changelog for this package is available on GitHub.