Adapter configuration in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What output does this SvelteKit adapter configuration produce?

Given this svelte.config.js snippet using the @sveltejs/adapter-static adapter, what will be the behavior when building the app?

Svelte

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

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

A The app builds a server-side rendered app with dynamic routes handled by Node.js.

B The app builds a serverless function for each route automatically.

C The app builds a static site without any fallback, so 404 errors occur on unknown routes.

D The app builds a static site with fallback to index.html for SPA-style routing.

💡 Hint

Think about what the fallback option does in the static adapter.

The @sveltejs/adapter-static builds a static site. The fallback: 'index.html' option means unknown routes will serve index.html, enabling SPA-style navigation.

📝 Syntax

intermediate

Which adapter configuration syntax is correct for SvelteKit?

Choose the correct way to import and configure the @sveltejs/adapter-node in svelte.config.js.

A

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

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

B

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

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

C

const adapter = require('@sveltejs/adapter-node');

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

D

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

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

💡 Hint

Check the import style and how the adapter function is called.

The adapter is the default export and must be imported as adapter. It is a function that must be called to get the adapter instance.

🔧 Debug

advanced

Why does this adapter configuration cause a build error?

Consider this svelte.config.js snippet:

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

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

Why does this cause a build error?

A The adapter must be imported with curly braces, not default import.

B The <code>fallback</code> option must be a string filename, not a boolean.

C The <code>adapter-static</code> does not support the <code>fallback</code> option.

D The <code>kit</code> property must be a function, not an object.

💡 Hint

Check the expected type of the fallback option in the adapter docs.

The fallback option expects a string filename like 'index.html'. Passing true causes a type error.

❓ state_output

advanced

What is the effect of this adapter configuration on the build output?

Given this svelte.config.js snippet:

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

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

What does the edge: true option do?

A It builds the app for deployment on Vercel Edge Functions for faster global response.

B It disables server-side rendering and builds a purely static site.

C It enables Node.js server deployment instead of edge functions.

D It causes a build failure because <code>edge</code> is not a valid option.

💡 Hint

Think about what 'edge' means in cloud deployment contexts.

The edge: true option tells the Vercel adapter to build for edge functions, which run closer to users for lower latency.

🧠 Conceptual

expert

Which statement about SvelteKit adapter configuration is true?

Choose the correct statement about how SvelteKit adapters affect app deployment.

A Adapters automatically convert Svelte components into React components for compatibility.

B Adapters are only needed for client-side routing and have no effect on server deployment.

C Adapters transform the built app to run on specific platforms like static hosts, Node servers, or serverless functions.

D Adapters are used to configure CSS preprocessors in SvelteKit projects.

💡 Hint

Consider what adapters do after SvelteKit builds your app.

SvelteKit adapters prepare the app to run on different hosting environments by transforming the build output accordingly.

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