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.