Static adapter deployment in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the static adapter in SvelteKit?

The static adapter generates a fully static version of your SvelteKit app. It pre-renders pages as HTML files so you can deploy your site to any static hosting service without a server.

beginner

How do you configure the static adapter in a SvelteKit project?

You install the adapter with npm and then import it in your svelte.config.js file. Inside the config, you set the adapter to the static adapter, like this: <br><code>import adapter from '@sveltejs/adapter-static';<br>export default { kit: { adapter: adapter() } };</code>

intermediate

What is prerendering in the context of static adapter deployment?

Prerendering means generating HTML pages at build time instead of on the server at runtime. The static adapter prerenders pages so they can be served as simple HTML files, improving speed and allowing static hosting.

beginner

Which folder contains the generated static files after building with the static adapter?

The static files are generated in the build folder by default. This folder contains all the HTML, CSS, JS, and assets ready to be uploaded to a static host.

intermediate

Can you use dynamic server-side features with the static adapter?

No, the static adapter only supports static content. Features that require a server, like server-side API routes or dynamic rendering, won't work because the site is fully static.

What does the static adapter in SvelteKit produce?

A A serverless function bundle

B A fully static site with pre-rendered HTML files

C A client-only single page app

D A Node.js server for dynamic rendering

The static adapter generates a fully static site by pre-rendering pages as HTML files.

Where do you specify the static adapter in a SvelteKit project?

A In svelte.config.js under kit.adapter

B In package.json scripts

C In the main.js entry file

D In the index.html file

The adapter is configured in svelte.config.js inside the kit.adapter property.

Which command builds a static site using the static adapter?

A npm run dev

B npm run static

C npm start

D npm run build

The build command generates the static files using the configured adapter.

What happens if your app uses server-side API routes with the static adapter?

A They are converted to client-side fetch calls

B They run as serverless functions automatically

C They will not work because the site is fully static

D They are ignored but do not cause errors

Server-side API routes require a server and won't work with a fully static site.

Which folder contains the static site output after building?

A build

B src

C public

D node_modules

The build folder contains the generated static files ready for deployment.

Explain how the static adapter changes the way a SvelteKit app is deployed and what benefits it offers.

Think about what happens at build time and how the site runs after deployment.

Describe the steps to set up and build a SvelteKit project using the static adapter.

Focus on configuration and commands.