Adapter configuration in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an adapter in SvelteKit?

An adapter in SvelteKit is a tool that helps package your app to run on different platforms like Node.js, static hosting, or serverless environments.

beginner

How do you specify an adapter in SvelteKit?

You specify an adapter by importing it in your svelte.config.js file and adding it to the kit.adapter property.

intermediate

Why do you need different adapters for different deployment targets?

Different platforms have different ways to run apps. Adapters prepare your app to work smoothly on the chosen platform by adjusting build output and settings.

beginner

Example: How to configure the static adapter in SvelteKit?

In svelte.config.js, import adapter from '@sveltejs/adapter-static' and set kit.adapter = adapter() to build a static site.

beginner

What happens if you don't configure an adapter in SvelteKit?

Without an adapter, SvelteKit won't know how to build your app for deployment, so the build process will fail or the app won't run correctly on your target platform.

What is the main role of an adapter in SvelteKit?

A To write CSS styles automatically

B To prepare the app for a specific deployment platform

C To manage user authentication

D To create database connections

Adapters help package your app to run on different platforms by adjusting the build output.

Where do you configure the adapter in a SvelteKit project?

A In svelte.config.js under kit.adapter

B In package.json scripts

C In the main component file

D In the static assets folder

Adapters are set in svelte.config.js inside the kit.adapter property.

Which adapter would you use to build a fully static site in SvelteKit?

A @sveltejs/adapter-vercel

B @sveltejs/adapter-node

C @sveltejs/adapter-netlify

D @sveltejs/adapter-static

The static adapter builds your app as static files for hosting on static servers.

What happens if you forget to add an adapter before building your SvelteKit app?

A The build will fail or the app won't deploy correctly

B The app will automatically choose the best adapter

C The app will run only in development mode

D The app will ignore all routes

Without an adapter, SvelteKit cannot build the app for deployment.

Can you use different adapters for different deployment platforms?

A No, only one adapter works for all platforms

B Yes, but only if you write custom code

C Yes, you choose the adapter that matches your deployment target

D No, adapters are deprecated

Each adapter is designed for a specific platform, so you pick the one that fits your deployment.

Explain what an adapter is in SvelteKit and why it is important.

Think about how your app needs to change to run on different servers or hosts.

Describe how to configure the static adapter in a SvelteKit project.

Focus on the configuration file and the adapter function call.

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