SvelteKit

Prisma.Website.SvelteKit builds SvelteKit with its Vite pipeline and an injected Node-target adapter. Client assets, prerendered pages, and the server handler are uploaded as a tar.gz artifact and served on Bun in Prisma Compute, not a Node container.

Install

Install the build-time integration; the resource loads its /sveltekit and /sveltekit/node exports from your project:

bun add -d @alchemy.run/frontend-frameworks @vercel/nft

npm install -D @alchemy.run/frontend-frameworks @vercel/nft

pnpm add -D @alchemy.run/frontend-frameworks @vercel/nft

yarn add -D @alchemy.run/frontend-frameworks @vercel/nft

Configure SvelteKit

This integration follows Kit v3: Kit options live in the sveltekit(...) call in vite.config.ts, not svelte.config.js. Your config loads natively. Alchemy injects its adapter; don’t set kit.adapter. An adapter declared in the native config is replaced with a warning.

Declare the Website

import * as Prisma from "alchemy/Prisma";

export const Website = Prisma.Website.SvelteKit("Website");

Use rootDir for an app outside .. Omit project to create a database-less Prisma project on live deploy, or pass an existing project.

Add it to the Stack

import * as Alchemy from "alchemy";
import * as Effect from "effect/Effect";

export default Alchemy.Stack(
  "MySvelteKitSite",
  { providers: Prisma.providers(), state: Alchemy.localState() },
  Effect.gen(function* () {
    const site = yield* Website;
    return { url: site.url };
  }),
);

Routes with export const prerender = true are generated at build time and served as files. Server routes and load functions run in the Kit handler on Compute. site.url is the deployed endpoint.

Add environment variables

export const Website = Prisma.Website.SvelteKit("Website", {
  env: {
    GREETING: "Hello from Alchemy!",
    API_BASE: "https://api.example.com",
  },
});

Values are applied before build and dev, and passed to Compute. These are process environment variables, not Worker bindings.

Read the environment in server code

export const load = () => ({
  greeting: process.env.GREETING ?? "hello",
});

The Bun process exposes process.env; Kit’s $env/dynamic/private reads the server environment too. Keep secrets out of public env keys.

Kit options

Keep Vite plugins and ordinary Kit config in your app:

import { sveltekit } from "@sveltejs/kit/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [tailwindcss(), sveltekit({ alias: { $lib: "src/lib" } })],
});

The serializable kit bag overrides those options:

export const Website = Prisma.Website.SvelteKit("Website", {
  kit: { paths: { base: "/docs" } },
});

Alchemy owns the adapter in both cases.

Local dev

bun alchemy dev starts SvelteKit’s own Vite server with HMR. site.url is local, and the Website creates no Prisma resources. .pipe(Alchemy.remote()) opts into live deployment during dev.

Custom domain

const site = yield* Prisma.Website.SvelteKit("Web", {
  domain: "app.example.com",
});

This creates Prisma.CustomDomain; the app must be on the project’s current default branch. Configure its returned DNS records yourself and check status before cutover. See Custom domains.