Adapter configuration in Svelte - Mini Project: Build & Apply

SvelteKit Adapter Configuration

📖 Scenario: You are building a simple SvelteKit app that you want to deploy to a static hosting service. To do this, you need to configure the correct adapter in your project.

🎯 Goal: Configure the SvelteKit project to use the @sveltejs/adapter-static adapter so it can be built as a static site.

📋 What You'll Learn

Create a svelte.config.js file with the basic SvelteKit config

Import @sveltejs/adapter-static and assign it to a variable called adapter

Set the adapter property in the config to the imported adapter

Export the config as the default export

💡 Why This Matters

🌍 Real World

When deploying SvelteKit apps, you must configure the correct adapter to match your hosting environment, such as static hosting or Node servers.

💼 Career

Understanding adapter configuration is essential for frontend developers working with SvelteKit to prepare apps for deployment.

1

Create the basic SvelteKit config

Create a file called svelte.config.js and write a constant called config that is an object with an empty kit property.

Svelte

const config = {
  kit: {}
};

// Your code here

Hint

Start by creating a constant named config with an object that has a kit property set to an empty object.

2

Import the static adapter

Add an import statement at the top of svelte.config.js to import @sveltejs/adapter-static and assign it to a variable called adapter.

Svelte

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

const config = {
  kit: {}
};

// Your code here

Hint

Use the ES module import syntax to bring in @sveltejs/adapter-static as adapter.

3

Configure the adapter in the kit property

Inside the config object, set the adapter property inside kit to the imported adapter variable.

Svelte

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

const config = {
  kit: {
    adapter: adapter
  }
};

// Your code here

Hint

Inside the kit object, add adapter: adapter to tell SvelteKit to use the static adapter.

4

Export the config as default

Add a default export statement to export the config object from svelte.config.js.

Svelte

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

const config = {
  kit: {
    adapter: adapter
  }
};

export default config;

// Your code here

Hint

Use export default config; to make the config available to SvelteKit.

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