clover's git

the-knife

1	---
2	title: SvelteKit
3	description: Deploy SvelteKit to Prisma Compute with Prisma.Website.SvelteKit — SSR and prerendered assets on Bun, with native Vite dev locally.
4	sidebar:
5	order: 12
6	---
7
8	import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
9
10	export const devDeps = "@alchemy.run/frontend-frameworks @vercel/nft";
11
12	`Prisma.Website.SvelteKit` builds [SvelteKit](https://svelte.dev/docs/kit)
13	with its Vite pipeline and an injected Node-target adapter. Client
14	assets, prerendered pages, and the server handler are uploaded as a
15	`tar.gz` artifact and served on **Bun in Prisma Compute**, not a Node
16	container.
17
18	## Install
19
20	Install the build-time integration; the resource loads its `/sveltekit`
21	and `/sveltekit/node` exports from your project:
22
23	<Tabs syncKey="pkgManager">
24	<TabItem label="bun" icon="bun"><Code code={`bun add -d ${devDeps}`} lang="sh" /></TabItem>
25	<TabItem label="npm" icon="npm"><Code code={`npm install -D ${devDeps}`} lang="sh" /></TabItem>
26	<TabItem label="pnpm" icon="pnpm"><Code code={`pnpm add -D ${devDeps}`} lang="sh" /></TabItem>
27	<TabItem label="yarn" icon="seti:yarn"><Code code={`yarn add -D ${devDeps}`} lang="sh" /></TabItem>
28	</Tabs>
29
30	## Configure SvelteKit
31
32	This integration follows Kit v3: Kit options live in the
33	`sveltekit(...)` call in `vite.config.ts`, not `svelte.config.js`.
34	Your config loads natively. Alchemy injects its adapter; don't set
35	`kit.adapter`. An adapter declared in the native config is replaced
36	with a warning.
37
38	## Declare the Website
39
40	```typescript
41	// alchemy.run.ts
42	import * as Prisma from "alchemy/Prisma";
43
44	export const Website = Prisma.Website.SvelteKit("Website");
45	```
46
47	Use `rootDir` for an app outside `.`. Omit `project` to create a
48	database-less Prisma project on live deploy, or pass an existing project.
49
50	## Add it to the Stack
51
52	```typescript
53	// alchemy.run.ts
54	import * as Alchemy from "alchemy";
55	import * as Effect from "effect/Effect";
56
57	export default Alchemy.Stack(
58	"MySvelteKitSite",
59	{ providers: Prisma.providers(), state: Alchemy.localState() },
60	Effect.gen(function* () {
61	const site = yield* Website;
62	return { url: site.url };
63	}),
64	);
65	```
66
67	Routes with `export const prerender = true` are generated at build
68	time and served as files. Server routes and load functions run in the
69	Kit handler on Compute. `site.url` is the deployed endpoint.
70
71	## Add environment variables
72
73	```diff lang="typescript"
74	export const Website = Prisma.Website.SvelteKit("Website", {
75	+ env: {
76	+ GREETING: "Hello from Alchemy!",
77	+ API_BASE: "https://api.example.com",
78	+ },
79	});
80	```
81
82	Values are applied before build and dev, and passed to Compute. These
83	are process environment variables, not Worker bindings.
84
85	## Read the environment in server code
86
87	```typescript
88	// src/routes/+page.server.ts
89	export const load = () => ({
90	greeting: process.env.GREETING ?? "hello",
91	});
92	```
93
94	The Bun process exposes `process.env`; Kit's `$env/dynamic/private`
95	reads the server environment too. Keep secrets out of public env keys.
96
97	## Kit options
98
99	Keep Vite plugins and ordinary Kit config in your app:
100
101	```typescript
102	// vite.config.ts
103	import { sveltekit } from "@sveltejs/kit/vite";
104	import tailwindcss from "@tailwindcss/vite";
105	import { defineConfig } from "vite";
106
107	export default defineConfig({
108	plugins: [tailwindcss(), sveltekit({ alias: { $lib: "src/lib" } })],
109	});
110	```
111
112	The serializable `kit` bag overrides those options:
113
114	```typescript
115	export const Website = Prisma.Website.SvelteKit("Website", {
116	kit: { paths: { base: "/docs" } },
117	});
118	```
119
120	Alchemy owns the adapter in both cases.
121
122	## Local dev
123
124	`bun alchemy dev` starts SvelteKit's own Vite server with HMR.
125	`site.url` is local, and the Website creates no Prisma resources.
126	`.pipe(Alchemy.remote())` opts into live deployment during dev.
127
128	## Custom domain
129
130	```typescript
131	const site = yield* Prisma.Website.SvelteKit("Web", {
132	domain: "app.example.com",
133	});
134	```
135
136	This creates `Prisma.CustomDomain`; the app must be on the project's
137	current default branch. Configure its returned DNS records yourself
138	and check status before cutover. See
139	[Custom domains](/prisma/frontend/websites#custom-domains).
140
141	## Where next
142
143	- [SvelteKit API](/providers/prisma/website/sveltekit).
144	- [SvelteKit example](https://github.com/alchemy-run/alchemy/tree/main/examples/prisma-website-sveltekit).
145	- [Websites](/prisma/frontend/websites) and [Compute apps](/prisma/compute/apps).