clover's git

the-knife

1	---
2	title: SvelteKit
3	description: Package SvelteKit SSR and prerendered assets as a Neon Function Fetch artifact.
4	sidebar:
5	order: 5
6	---
7
8	`Neon.Website.SvelteKit` packages SvelteKit's server handler and assets for a
9	Node 24 Fetch entry on Neon Functions. The Node adapter supplies a handler, not a
10	listening production server; no container or S3 hosting is provisioned.
11
12	## Prepare the app
13
14	Start from a compatible SvelteKit app or the
15	[runnable SvelteKit example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-sveltekit).
16	This integration targets the Kit v3 plugin configuration shape. Configure
17	[deployment credentials](/neon/setup), then install in the app directory:
18
19	Install [Alchemy and its matching Effect dependencies](/getting-started) first;
20	use Node 24 for this build toolchain.
21
22	```sh
23	pnpm add -D @alchemy.run/frontend-frameworks @vercel/nft
24	```
25
26	Keep `sveltekit()` in `vite.config.*`, without your own adapter. For Kit v3, use
27	plugin configuration or the resource's serializable `kit` overrides rather than
28	a `svelte.config.js` file. Alchemy injects the deployment adapter.
29
30	## Define the stack
31
32	```typescript
33	// alchemy.run.ts
34	import * as Alchemy from "alchemy";
35	import * as Neon from "alchemy/Neon";
36	import * as Effect from "effect/Effect";
37
38	export default Alchemy.Stack(
39	"NeonSvelteKit",
40	{ providers: Neon.providers(), state: Alchemy.localState() },
41	Effect.gen(function* () {
42	const site = yield* Neon.Website.SvelteKit("Web", {
43	rootDir: ".",
44	});
45	return { url: site.url };
46	}),
47	);
48	```
49
50	SvelteKit handles SSR, endpoints, and form actions; prerendered pages and client
51	assets are packaged alongside it. Use SvelteKit's `$env/static/private` or
52	`$env/dynamic/private` as appropriate for build-time versus runtime values. Public
53	environment modules expose values to the browser; never put backend secrets there.
54
55	## Develop and deploy
56
57	```sh
58	pnpm exec alchemy dev
59	pnpm exec alchemy deploy
60	pnpm exec alchemy destroy
61	```
62
63	Run each separately, with `destroy` for cleanup. Dev runs the native SvelteKit/Vite
64	server with HMR and returns a local URL, without an implicit Neon Project or
65	Function. Append `.pipe(Alchemy.remote())` to the Website Effect to opt into live
66	deployment during dev.
67
68	Without scope, live deploy creates an Ohio Project. Pass either `project` or
69	`branch` to reuse a backend; use Ohio when adding storage. See
70	[scope and credentials](/neon/frontend/vite#scope-and-credentials), including the
71	difference between account keys and branch service tokens.
72
73	:::caution[Deployment limits]
74	Complete live framework acceptance remains unverified. In Neon probes, updated
75	deployment metadata has not guaranteed new code/env at the Function URL. Native
76	dev is not a production-runtime test. No CDN or durable framework cache is added,
77	and custom-domain registration does not validate TLS. See the
78	[shared deployment limits](/neon/frontend/vite#environment-and-deployment-limits).
79	:::
80
81	## Reference
82
83	- [SvelteKit API](/providers/neon/website/sveltekit)
84	- [Runnable SvelteKit example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-sveltekit)