⚙️ Configure for Cloudflare

Right now, SvelteKit doesn't know where you plan to deploy your site. It needs an adapter — a small plugin that tells it how to package your code for a specific hosting platform.

Install the Cloudflare adapter

Open a new terminal tab (keep the dev server running in the first one) and navigate to your project:

cd web
npm i -D @sveltejs/adapter-cloudflare

The -D flag means "this is a development dependency" — it's a tool used during building, not something your visitors will ever see.

Update svelte.config.js

Open svelte.config.js in your editor. It currently looks something like this:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

Change the first line to:

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

That's it. One line. You just told SvelteKit: "When I build this project, package it for Cloudflare."

What's an adapter? An analogy: you know how a phone charger from Japan doesn't fit a US outlet? You need a plug adapter. SvelteKit's adapter does the same thing — it converts your project's output into a format that Cloudflare understands.

Create wrangler.json

Create a new file called wrangler.json in the root of your project (the web folder) with this content:

{
  "name": "launchschool",
  "compatibility_date": "2024-09-23",
  "pages_build_output_dir": ".svelte-kit/cloudflare"
}

What is this file? This is your project's configuration for Cloudflare. It tells Cloudflare:

• name: What to call your project ("launchschool")
• compatibility_date: Which version of Cloudflare's features to use
• pages_build_output_dir: Where to find your built site files