Static adapter deployment in Svelte - Step-by-Step Execution

Concept Flow - Static adapter deployment

Write Svelte app code

↓

Configure svelte.config.js

↓

Set adapter-static

↓

Run build command

↓

Generate static files in /build

↓

Deploy static files to server or host

↓

Serve app as static site

This flow shows how you write your Svelte app, configure it to use the static adapter, build it to generate static files, and then deploy those files to a static host.

Execution Sample

Svelte

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

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

This code configures SvelteKit to use the static adapter for deployment.

Execution Table

Step	Action	Input/Config	Output/Result
1	Write Svelte app	App code files (.svelte)	App source ready
2	Configure svelte.config.js	Set adapter to adapter-static	Config file updated
3	Run build command	npm run build	Static files generated in /build
4	Check build output	/build folder contents	index.html, assets, etc.
5	Deploy static files	Upload /build to static host	App served as static site
6	Access site in browser	Open deployed URL	App loads without server
7	Exit	All steps done	Static deployment complete

💡 Static files generated and deployed; no server-side code runs at runtime.

Variable Tracker

Variable	Start	After Config	After Build	After Deploy
adapter	undefined	adapter-static function	adapter-static output files	static files on host
build folder	empty	empty	filled with static files	uploaded to host
app code	written	written	compiled to static	served statically

Key Moments - 3 Insights

Why do we need to set the adapter in svelte.config.js?

Because the adapter tells SvelteKit how to build and deploy the app. The execution_table step 2 shows setting adapter-static so the build generates static files.

What happens if we try to run the app without building first?

There will be no static files to serve. Step 3 in the execution_table shows that running the build command generates the static files needed.

Can the static adapter run server-side code at runtime?

No, static adapter generates only static files. Step 7 exit note explains no server-side code runs after deployment.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after running the build command (Step 3)?

A App source code written

B Static files generated in /build

C Adapter function undefined

D Files uploaded to host

💡 Hint

Check Step 3 in execution_table under Output/Result column.

At which step do we upload the static files to the host?

A Step 5

B Step 4

C Step 2

D Step 6

💡 Hint

Look at the Action column in execution_table for uploading files.

If we forget to set the adapter in svelte.config.js, what will happen?

A App will deploy as static site automatically

B Build will generate static files anyway

C Build will fail or generate wrong output

D No effect on deployment

💡 Hint

Refer to variable_tracker adapter value after Config step.

Concept Snapshot

Static adapter deployment in SvelteKit:
- Set adapter-static in svelte.config.js
- Run npm run build to generate static files
- Deploy /build folder to any static host
- No server-side code runs at runtime
- Ideal for simple static sites or SPA hosting

Full Transcript

Static adapter deployment in SvelteKit involves writing your app code, configuring svelte.config.js to use the static adapter, running the build command to generate static files, and then deploying those files to a static hosting service. The adapter setting controls how the build process outputs files. After building, the /build folder contains all files needed to serve the app without a server. Deploying these files to a static host allows users to access the app as a static site. No server-side code runs after deployment, making it simple and fast for static hosting.