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.

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