Adapter configuration in Svelte - Step-by-Step Execution

Concept Flow - Adapter configuration

Start: Define adapter in svelte.config.js

↓

Import adapter module

↓

Configure adapter with options

↓

Export config with adapter

↓

Run build command

↓

Adapter processes build output

↓

Build output ready for deployment

↓

End

This flow shows how you set up an adapter in SvelteKit by importing it, configuring it, exporting the config, then running the build to produce deployable output.

Execution Sample

Svelte

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

export default {
  kit: {
    adapter: adapter({ pages: 'build', assets: 'build', fallback: null })
  }
};

This code imports the static adapter and configures it to output build files in the 'build' folder with no fallback page.

Execution Table

Step	Action	Evaluation	Result
1	Import adapter module	adapter imported from '@sveltejs/adapter-static'	adapter variable holds adapter function
2	Define config object	kit.adapter set to adapter function call with options	config ready with adapter configured
3	Export config	config exported as default	SvelteKit uses this config on build
4	Run build command	SvelteKit calls adapter with build output paths	adapter processes files into 'build' folder
5	Adapter completes processing	Files prepared for static hosting	Build output ready for deployment
6	End	Build process finished	Deployment folder contains static site

💡 Build completes and adapter finishes processing output for deployment

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
adapter	undefined	function from '@sveltejs/adapter-static'	same function	same function	called with options	adapter output files
config	undefined	undefined	{ kit: { adapter: adapter(...) } }	exported config	used by build	build output ready

Key Moments - 3 Insights

Why do we import the adapter before using it in the config?

Because the adapter is a function provided by a package, importing it (Step 1) makes it available to call when setting kit.adapter (Step 2). Without import, the adapter variable would be undefined.

What happens if we forget to export the config?

If the config is not exported (Step 3), SvelteKit won't know about the adapter settings, so the build won't use the adapter to process output (Step 4). This stops deployment preparation.

How does the adapter affect the build output?

During build (Step 4), SvelteKit calls the adapter with paths and options. The adapter processes files into the specified folder (Step 5), preparing the site for deployment.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'adapter' after Step 1?

A A function imported from '@sveltejs/adapter-static'

B Undefined

C An object with build files

D The exported config

💡 Hint

Check the 'adapter' variable value in the variable_tracker after Step 1

At which step does SvelteKit use the adapter to process build output?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look at the execution_table row describing 'Run build command'

If we change the adapter options to use a different folder, which step reflects this change?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Adapter options are set when defining the config in Step 2

Concept Snapshot

Adapter configuration in SvelteKit:
- Import adapter module
- Set kit.adapter in svelte.config.js with options
- Export config as default
- Run build command
- Adapter processes output for deployment
Adapters customize how your app is built and deployed.

Full Transcript

Adapter configuration in SvelteKit involves importing the adapter module, setting it in the kit.adapter property inside svelte.config.js with desired options, and exporting this configuration. When you run the build command, SvelteKit uses this adapter to process the build output, preparing it for deployment. The adapter controls how and where the built files are placed, enabling deployment to different environments like static hosting or serverless platforms.

Practice

1. What is the main purpose of an adapter in a SvelteKit project?

easy

A. To tell SvelteKit how to build and deploy the app for a specific environment

B. To style the components with CSS

C. To manage state inside components

D. To handle user input events

Solution

1. Step 1: Understand adapter role

   An adapter configures how SvelteKit prepares the app for deployment.

2. Step 2: Identify adapter purpose

   It tells SvelteKit which environment (static, Node, etc.) to target when building.

3. Final Answer:

   To tell SvelteKit how to build and deploy the app for a specific environment -> Option A

4. Quick Check:

   Adapter = build target config [OK]

Hint: Adapters define deployment targets for your app [OK]

Common Mistakes:

• Confusing adapters with styling or state management
• Thinking adapters handle user events
• Assuming adapters are for routing

2. Which of the following is the correct way to import and set an adapter in svelte.config.js?

easy

A. import adapter from '@sveltejs/adapter-static';

export default {
adapter: adapter()
};

B. import adapter from '@sveltejs/adapter-static';

export default {
kit: {
adapter: adapter()
}
};

C. const adapter = require('@sveltejs/adapter-static');

export default {
kit: {
adapter
}
};

D. import { adapter } from '@sveltejs/adapter-static';

export default {
kit: {
adapter: adapter
}
};

Solution

1. Step 1: Check import syntax

   The adapter is imported as default from '@sveltejs/adapter-static'.

2. Step 2: Verify export structure

   The adapter is set inside the kit property as a function call adapter().

3. Final Answer:

   import adapter from '@sveltejs/adapter-static'; export default { kit: { adapter: adapter() } }; -> Option B

4. Quick Check:

   Import default + kit.adapter = import adapter from '@sveltejs/adapter-static'; export default { kit: { adapter: adapter() } }; [OK]

Hint: Import default adapter and assign kit.adapter as a function call [OK]

Common Mistakes:

• Placing adapter outside the kit property
• Using require() instead of import
• Not calling adapter as a function

3. Given this svelte.config.js snippet, what adapter is being used and what does it imply?

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

export default {
  kit: {
    adapter: adapter()
  }
};

medium

A. Static site adapter; app will be built as static files

B. Serverless adapter; app will deploy to serverless platforms

C. No adapter set; default build will be used

D. Node adapter; app will run on a Node.js server

Solution

1. Step 1: Identify adapter import

   The adapter imported is '@sveltejs/adapter-node', which targets Node.js servers.

2. Step 2: Understand adapter effect

   Using this adapter means the app will be built to run on a Node.js server environment.

3. Final Answer:

   Node adapter; app will run on a Node.js server -> Option D

4. Quick Check:

   adapter-node = Node server build [OK]

Hint: Adapter name hints deployment target (adapter-node = Node server) [OK]

Common Mistakes:

• Confusing adapter-node with static adapter
• Assuming no adapter means static build
• Thinking adapter-node is for serverless

4. What is wrong with this adapter configuration in svelte.config.js?

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

export default {
  adapter: adapter()
};

medium

A. The adapter property should be inside the kit object

B. The export default syntax is invalid

C. adapter() should not be called as a function

D. The adapter is not imported correctly

Solution

1. Step 1: Check adapter placement

   The adapter must be set inside the kit property, not directly on the export object.

2. Step 2: Confirm correct structure

   Correct config is export default { kit: { adapter: adapter() } }.

3. Final Answer:

   The adapter property should be inside the kit object -> Option A

4. Quick Check:

   kit.adapter required inside kit [OK]

Hint: Always put adapter inside kit property in svelte.config.js [OK]

Common Mistakes:

• Placing adapter at top level instead of inside kit
• Forgetting to call adapter as a function
• Incorrect import syntax

5. You want to deploy a SvelteKit app as a fully static site with pre-rendered pages. Which adapter configuration should you use in svelte.config.js to achieve this, and why?

hard

A. Use '@sveltejs/adapter-vercel' because it only supports serverless functions

B. Use '@sveltejs/adapter-node' because it runs the app on a Node.js server

C. Use '@sveltejs/adapter-static' because it builds static HTML files for hosting on any static server

D. No adapter is needed; SvelteKit builds static sites by default

Solution

1. Step 1: Identify deployment goal

   The goal is a fully static site with pre-rendered pages.

2. Step 2: Match adapter to goal

   '@sveltejs/adapter-static' builds static HTML files suitable for static hosting.

3. Step 3: Exclude other options

   Node adapter runs a server, Vercel adapter targets serverless, and no adapter means no specific build target.

4. Final Answer:

   Use '@sveltejs/adapter-static' because it builds static HTML files for hosting on any static server -> Option C

5. Quick Check:

   Static site needs adapter-static [OK]

Hint: Static sites need adapter-static for pre-rendered HTML [OK]

Common Mistakes:

• Using Node adapter for static deployment
• Assuming no adapter builds static by default
• Confusing serverless with static hosting