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 site is using. If your site is built with SvelteKit, Netlify provides a suggested build command and output directory: 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.

  1. 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(),
      		target: '#svelte'
      	}
      };
      
    • 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"
      
    • In the Netlify UI, add your site and include an AWS_LAMBDA_JS_RUNTIME environment variable with a value of nodejs14.x. This updates the default JavaScript functions runtime to a version supported by the netlify-sveltekit adapter.

      In the Create a new site page, select Show advanced. This provides access to Advanced build settings, where you can create the environment variable while linking your site.

    • Deploy your project on Netlify with Git or the Netlify CLI.

    # More resources