How to Use Adapter in SvelteKit: Setup and Examples

In SvelteKit, you use an adapter to specify how your app is built and deployed for different environments. You install the adapter package, import it in svelte.config.js, and add it to the kit.adapter property. This tells SvelteKit how to prepare your app for platforms like Node.js, static hosting, or serverless.

Syntax

The adapter is configured in the svelte.config.js file inside the kit property. You import the adapter function from its package and assign it to adapter. You can also pass options to customize the build.

• import adapter from '@sveltejs/adapter-node'; — imports the adapter module.
• kit: { adapter: adapter(options) } — sets the adapter with optional settings.

javascript

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      // options here
    })
  }
};

export default config;

Example

This example shows how to use the Node adapter to build a SvelteKit app for a Node.js server. It installs the adapter, imports it, and sets it in svelte.config.js. Running npm run build prepares the app for Node deployment.

javascript

import adapter from '@sveltejs/adapter-node';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      out: 'build'
    })
  }
};

export default config;

// Then in package.json scripts:
// "build": "svelte-kit build"

// Run:
// npm run build

Output

Build completed. Output files are in the 'build' folder ready for Node.js deployment.

Common Pitfalls

Common mistakes when using adapters include:

• Not installing the adapter package with npm install.
• Forgetting to import the adapter in svelte.config.js.
• Not setting the adapter in the kit config, so the build uses the default adapter.
• Using adapter options incorrectly or missing required options.

Always check the adapter's documentation for required options and installation steps.

javascript

/* Wrong: Missing import and adapter setting */
const config = {
  kit: {
    // adapter not set
  }
};

export default config;

/* Right: Import and set adapter */
import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build'
    })
  }
};

export default config;

Quick Reference

Step	Description
Install adapter	Run npm install for the adapter package, e.g., @sveltejs/adapter-node
Import adapter	Add import statement in svelte.config.js
Configure adapter	Set adapter in kit.adapter with optional settings
Build app	Run npm run build to generate output for deployment
Deploy	Use the output folder according to your platform

Key Takeaways

Install and import the adapter package before configuring it in svelte.config.js.

Set the adapter in the kit.adapter property to control how your app is built and deployed.

Adapters customize output for different environments like Node, static sites, or serverless.

Always check adapter documentation for required options and usage details.

Run npm run build after setting the adapter to prepare your app for deployment.