Adapter configuration in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the adapter for SvelteKit.

Svelte

import adapter from '@sveltejs/kit/[1]';

Drag options to blanks, or click blank then click option'

Aadapter-node

Badapter-cloudflare

Cadapter-vercel

Dadapter-static

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing an adapter for a different platform than intended.

Forgetting to import the adapter before using it.

The adapter-static is commonly used for static site generation in SvelteKit.

2fill in blank

medium

Complete the code to configure the adapter in svelte.config.js.

Svelte

export default {
  kit: {
    adapter: [1]()
  }
};

Drag options to blanks, or click blank then click option'

AadapterStatic

Badapter

CadapterNode

DadapterVercel

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong adapter variable name.

Forgetting the parentheses to call the adapter function.

The imported adapter is usually named adapter, so you call it as adapter() in the config.

3fill in blank

hard

Fix the error in the adapter import statement.

Svelte

import adapter from '@sveltejs/kit/[1]';

Drag options to blanks, or click blank then click option'

AadapterStatic

Badapter_static

Cadapter-static

Dadapter-static.js

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores instead of dashes.

Adding file extensions in the import path.

The correct package name uses dashes, not underscores or camelCase.

4fill in blank

hard

Fill both blanks to configure the adapter with options.

Svelte

adapter: [1]({
  pages: '[2]'
})

Drag options to blanks, or click blank then click option'

AadapterStatic

Bbuild

Cadapter

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for the adapter.

Setting the pages option to an incorrect folder name.

You call the adapter function adapter() and set the pages option to the folder static.

5fill in blank

hard

Fill all three blanks to complete the adapter configuration with fallback.

Svelte

adapter: [1]({
  pages: '[2]',
  fallback: '[3]'
})

Drag options to blanks, or click blank then click option'

Aadapter

Bbuild

Cindex.html

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the fallback file name.

Using incorrect folder names for pages.

The adapter is called adapter(), the pages folder is static, and the fallback file is index.html.