Static adapter deployment in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you run npm run build with SvelteKit's static adapter?

Consider a SvelteKit project configured with the static adapter. You run npm run build. What is the expected output behavior?

A It produces a client-only SPA without any server-side rendering or pre-rendered pages.

B It creates a Node.js server bundle that serves pages dynamically at runtime.

C It generates a fully static site with pre-rendered HTML files for each route in the <code>build</code> directory.

D It outputs a Docker container image ready for deployment.

💡 Hint

Think about what a static adapter does compared to server adapters.

The static adapter pre-renders all pages at build time, producing static HTML files. This allows deployment to static hosts without a server.

📝 Syntax

intermediate

Which configuration snippet correctly sets up the static adapter in svelte.config.js?

Choose the correct way to import and configure the static adapter in svelte.config.js for SvelteKit.

A

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

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

B

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

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

C

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

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

D

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

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

💡 Hint

Remember to call the adapter function when assigning it.

The static adapter must be imported and then called as a function to configure it properly.

🔧 Debug

advanced

Why does the static adapter fail to generate pages for dynamic routes without prerender.entries configured?

You have dynamic routes like [slug].svelte in your SvelteKit app. After building with the static adapter, those pages are missing. What is the cause?

A Dynamic routes are not supported at all by the static adapter and must be removed.

B The static adapter only pre-renders routes explicitly listed in <code>prerender.entries</code> or discovered via links; dynamic routes need manual entries.

C The static adapter requires a special plugin to handle dynamic routes automatically.

D Dynamic routes are pre-rendered by default without extra configuration.

💡 Hint

Think about how static generation discovers pages to build.

The static adapter pre-renders pages it can find by crawling links or explicit entries. Dynamic routes need to be listed in prerender.entries to generate their pages.

❓ state_output

advanced

What is the value of import.meta.env.SSR during static adapter build and runtime?

In a SvelteKit app using the static adapter, what does import.meta.env.SSR evaluate to during build and when running the static site in the browser?

A It is <code>true</code> during build (server-side rendering) and <code>false</code> in the browser at runtime.

B It is <code>false</code> during build and <code>true</code> in the browser.

C It is always <code>true</code> because the app is pre-rendered.

D It is always <code>false</code> because the static adapter disables SSR.

💡 Hint

Consider when SSR code runs and when client code runs.

import.meta.env.SSR is true during build because the app is rendered on the server. In the browser, it is false because the code runs client-side.

🧠 Conceptual

expert

Which deployment scenario best fits SvelteKit's static adapter?

Given these deployment environments, which one is the best fit for a SvelteKit app built with the static adapter?

A A serverless function platform that requires server-side rendering on each request.

B A Node.js server environment running the SvelteKit server for dynamic SSR.

C A Docker container running a custom Express server to serve SvelteKit pages dynamically.

D A CDN or static hosting service like Netlify, Vercel (static mode), or GitHub Pages serving pre-built HTML and assets.

💡 Hint

Think about what static adapter output is and where it can be hosted.

The static adapter produces static files that can be served by any static hosting or CDN without a server. Dynamic servers or serverless functions are not needed.

Practice

1. What is the main purpose of the static adapter in a SvelteKit project?

easy

A. To add real-time communication features

B. To enable server-side rendering with dynamic data

C. To connect the app to a database automatically

D. To generate static files for hosting without a backend server

Solution

1. Step 1: Understand what static adapter does

   The static adapter converts your SvelteKit app into static files like HTML, CSS, and JS.

2. Step 2: Identify the hosting benefit

   These static files can be hosted easily on any static hosting service without needing a backend server.

3. Final Answer:

   To generate static files for hosting without a backend server -> Option D

4. Quick Check:

   Static adapter = static files for hosting [OK]

Hint: Static adapter means no backend, just static files [OK]

Common Mistakes:

• Confusing static adapter with server-side rendering
• Thinking it connects to databases
• Assuming it adds dynamic real-time features

2. Which code snippet correctly sets up the static adapter in svelte.config.js?

easy

A. export default {
kit: {
adapter: '@sveltejs/adapter-static'
}
};

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

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

C. import staticAdapter from '@sveltejs/adapter-static';

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

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

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

Solution

1. Step 1: Check import statement

   The static adapter must be imported from '@sveltejs/adapter-static' and assigned to a variable.

2. Step 2: Confirm adapter usage

   The adapter must be called as a function: adapter() inside the kit.adapter property.

3. Final Answer:

   Correct import and adapter() call in svelte.config.js -> Option B

4. Quick Check:

   Import + adapter() call = correct setup [OK]

Hint: Import adapter and call it as a function in config [OK]

Common Mistakes:

• Forgetting to call adapter() as a function
• Importing wrong adapter package
• Assigning adapter without calling it

3. Given this svelte.config.js snippet, what will be the output folder after building?

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

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

medium

A. The build output will be in the 'build' folder containing static files

B. The build output will be in the 'public' folder with server files

C. The build output will be in the 'dist' folder with dynamic server code

D. No output folder will be created due to missing fallback

Solution

1. Step 1: Analyze adapter options

   The 'pages' and 'assets' options set the output folder to 'build'.

2. Step 2: Understand fallback null

   Fallback null means no SPA fallback page, but static files still output to 'build'.

3. Final Answer:

   The build output will be in the 'build' folder containing static files -> Option A

4. Quick Check:

   pages and assets = 'build' folder output [OK]

Hint: pages and assets options define output folder [OK]

Common Mistakes:

• Confusing fallback with output folder
• Assuming default output folder is 'public'
• Thinking fallback null prevents output

4. You configured the static adapter but your site shows a 404 error on refresh of a nested route. What is the likely cause?

medium

A. You forgot to set a fallback page for SPA routing

B. You did not import the adapter correctly

C. You used the Node adapter instead of static adapter

D. You did not run the build command

Solution

1. Step 1: Understand static hosting limitations

   Static hosting cannot handle nested routes on refresh without a fallback page.

2. Step 2: Identify fallback usage

   Setting a fallback page (like 'index.html') allows SPA routing to work on refresh.

3. Final Answer:

   You forgot to set a fallback page for SPA routing -> Option A

4. Quick Check:

   Missing fallback causes 404 on nested route refresh [OK]

Hint: Set fallback page to fix refresh 404 on nested routes [OK]

Common Mistakes:

• Assuming import errors cause 404 on refresh
• Confusing adapter type with routing issues
• Forgetting to build before testing

5. You want to deploy a SvelteKit blog as a static site with client-side routing fallback. Which svelte.config.js adapter config is correct?

hard

A. adapter: adapter({ pages: 'build', assets: 'build', fallback: null })

B. adapter: adapter({ pages: 'public', assets: 'public', fallback: '404.html' })

C. adapter: adapter({ pages: 'build', assets: 'build', fallback: 'index.html' })

D. adapter: adapter({ pages: 'dist', assets: 'dist' })

Solution

1. Step 1: Identify fallback for SPA routing

   Setting fallback to 'index.html' enables client-side routing fallback for nested routes.

2. Step 2: Confirm output folders

   Using 'build' for pages and assets is common and correct for static output.

3. Final Answer:

   adapter: adapter({ pages: 'build', assets: 'build', fallback: 'index.html' }) -> Option C

4. Quick Check:

   Fallback 'index.html' + build folders = SPA static deploy [OK]

Hint: Use fallback 'index.html' for SPA routing on static deploy [OK]

Common Mistakes:

• Setting fallback to null disables SPA fallback
• Using wrong folder names for output
• Omitting fallback causes refresh 404 errors