Static adapter deployment in Svelte - Mini Project: Build & Apply

Static Adapter Deployment in Svelte

📖 Scenario: You want to create a simple Svelte app that can be deployed as a static website. This means the app will be pre-built into static files that can be served by any web server without needing a backend.

🎯 Goal: Build a Svelte project configured to use the static adapter for deployment. You will set up the project data, configure the adapter, build the main page, and finalize the deployment setup.

📋 What You'll Learn

Create a basic Svelte component with a greeting message

Add a configuration file to use the static adapter

Build the main page with a heading and paragraph

Complete the adapter export for static deployment

💡 Why This Matters

🌍 Real World

Static adapter deployment is used to build websites that can be hosted on simple web servers or CDNs without needing a backend server.

💼 Career

Knowing how to configure static deployment is important for frontend developers working with SvelteKit to deliver fast, scalable, and easy-to-host web apps.

1

Create the main Svelte component

Create a file named src/routes/+page.svelte with a <script> block that defines a variable greeting set to "Welcome to Static Svelte!". Then add an <h1> element that displays the greeting variable.

Svelte

  // Define greeting variable here
  // Your code here


{greeting}

Hint

Use let greeting = "Welcome to Static Svelte!"; inside the <script> block and display it inside <h1>.

2

Add static adapter configuration

Create a file named svelte.config.js and import adapter-static from @sveltejs/adapter-static. Then export a default configuration object with a property kit.adapter set to the imported adapter().

Svelte

  let greeting = "Welcome to Static Svelte!";


{greeting}

// Create svelte.config.js with adapter-static setup
// Your code here

Hint

Import adapter-static and set kit.adapter to adapter() in the exported config object.

3

Add a paragraph to the main page

In the src/routes/+page.svelte file, add a <p> element below the <h1> that says "This site is ready for static deployment."

Svelte

  let greeting = "Welcome to Static Svelte!";


{greeting}




// svelte.config.js
import adapter from '@sveltejs/adapter-static';

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

Hint

Add a paragraph tag with the exact text below the heading.

4

Export the adapter for deployment

In the svelte.config.js file, ensure the adapter-static is properly exported by adding export default with the kit.adapter set to adapter(). This completes the static adapter deployment setup.

Svelte

  let greeting = "Welcome to Static Svelte!";


{greeting}
This site is ready for static deployment.

// Finalize svelte.config.js export
// Your code here

Hint

Make sure the export default includes kit.adapter = adapter() to complete the setup.

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