Adapter configuration in Svelte - Mini Project: Build & Apply

SvelteKit Adapter Configuration

📖 Scenario: You are building a simple SvelteKit app that you want to deploy to a static hosting service. To do this, you need to configure the correct adapter in your project.

🎯 Goal: Configure the SvelteKit project to use the @sveltejs/adapter-static adapter so it can be built as a static site.

📋 What You'll Learn

Create a svelte.config.js file with the basic SvelteKit config

Import @sveltejs/adapter-static and assign it to a variable called adapter

Set the adapter property in the config to the imported adapter

Export the config as the default export

💡 Why This Matters

🌍 Real World

When deploying SvelteKit apps, you must configure the correct adapter to match your hosting environment, such as static hosting or Node servers.

💼 Career

Understanding adapter configuration is essential for frontend developers working with SvelteKit to prepare apps for deployment.

1

Create the basic SvelteKit config

Create a file called svelte.config.js and write a constant called config that is an object with an empty kit property.

Svelte

const config = {
  kit: {}
};

// Your code here

Hint

Start by creating a constant named config with an object that has a kit property set to an empty object.

2

Import the static adapter

Add an import statement at the top of svelte.config.js to import @sveltejs/adapter-static and assign it to a variable called adapter.

Svelte

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

const config = {
  kit: {}
};

// Your code here

Hint

Use the ES module import syntax to bring in @sveltejs/adapter-static as adapter.

3

Configure the adapter in the kit property

Inside the config object, set the adapter property inside kit to the imported adapter variable.

Svelte

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

const config = {
  kit: {
    adapter: adapter
  }
};

// Your code here

Hint

Inside the kit object, add adapter: adapter to tell SvelteKit to use the static adapter.

4

Export the config as default

Add a default export statement to export the config object from svelte.config.js.

Svelte

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

const config = {
  kit: {
    adapter: adapter
  }
};

export default config;

// Your code here

Hint

Use export default config; to make the config available to SvelteKit.