SvelteKit

This guide shows how to initialize and deploy a SvelteKit application to Cloudflare using Alchemy.

Init

Start by creating a new SvelteKit project with Alchemy:

bunx alchemy create my-sveltekit-app --template=sveltekit
cd my-sveltekit-app

npx alchemy create my-sveltekit-app --template=sveltekit
cd my-sveltekit-app

pnpm dlx alchemy create my-sveltekit-app --template=sveltekit
cd my-sveltekit-app

yarn dlx alchemy create my-sveltekit-app --template=sveltekit
cd my-sveltekit-app

Log in to Cloudflare

Authenticate once with your Cloudflare account:

bun wrangler login

npx wrangler login

pnpm wrangler login

yarn wrangler login

Deploy

Run the deploy script generated by the template:

bun run deploy

npm run deploy

pnpm run deploy

yarn run deploy

You’ll get the live URL of your SvelteKit site:

{
  url: "https://website.<your-account>.workers.dev",
}

Local Development

Work locally using the dev script:

bun run dev

npm run dev

pnpm run dev

yarn run dev

Destroy

Clean up all Cloudflare resources created by this stack:

bun run destroy

npm run destroy

pnpm run destroy

yarn run destroy

What files are created

`.env`

Alchemy requires a locally set password to encrypt Secrets that are stored in state. Be sure to change this.

ALCHEMY_PASSWORD=change-me

`alchemy.run.ts`

/// <reference types="@types/node" />

import alchemy from "alchemy";
import { SvelteKit } from "alchemy/cloudflare";

const app = await alchemy("my-sveltekit-app");

export const worker = await SvelteKit("website", {
  command: "bun run build",
});

console.log({
  url: worker.url,
});

await app.finalize();

`types/env.d.ts`

// Auto-generated Cloudflare binding types.
// @see https://alchemy.run/docs/concepts/bindings.html#type-safe-bindings

import type { worker } from "../alchemy.run.ts";

export type CloudflareEnv = typeof worker.Env;

declare global {
  type Env = CloudflareEnv;
}

declare module "cloudflare:workers" {
  namespace Cloudflare {
    export interface Env extends CloudflareEnv {}
  }
}

`tsconfig.json`

The CLI updated the tsconfig.json to include alchemy.run.ts and register @cloudflare/workers-types + types/env.d.ts globally

{
  "extends": "./.svelte-kit/tsconfig.json",
  "include": ["alchemy.run.ts", "types/**/*.ts"],
  "compilerOptions": {
    // (omitted for brevity ..)
    "types": ["@cloudflare/workers-types", "./types/env.d.ts"]
  }
}