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.