clover's git

the-knife

1	---
2	title: TanStack Start
3	description: Package TanStack Start SSR and client assets for Neon Functions, with native Vite development.
4	sidebar:
5	order: 8
6	---
7
8	`Neon.Website.TanStackStart` builds the application's client and server output,
9	then wraps the server Fetch handler for Node 24 on Neon Functions. It packages a
10	Function ZIP, not a listening Bun server, container, or S3 hosting stack.
11
12	## Prepare the app
13
14	Use an existing TanStack Start app or the
15	[runnable TanStack Start example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-tanstack-start).
16	Configure [deployment credentials](/neon/setup), then install in the app directory:
17
18	Install [Alchemy and its matching Effect dependencies](/getting-started) first;
19	use Node 24 for this build toolchain.
20
21	```sh
22	pnpm add -D @alchemy.run/frontend-frameworks @vercel/nft
23	```
24
25	Keep the `tanstackStart()` and React plugins in `vite.config.*`; no deployment
26	preset is needed. Keep Vite's default `dist` output directory for this integration.
27	Application routes and the router remain normal TanStack Start code.
28
29	## Define the stack
30
31	```typescript
32	// alchemy.run.ts
33	import * as Alchemy from "alchemy";
34	import * as Neon from "alchemy/Neon";
35	import * as Effect from "effect/Effect";
36
37	export default Alchemy.Stack(
38	"NeonTanStackStart",
39	{ providers: Neon.providers(), state: Alchemy.localState() },
40	Effect.gen(function* () {
41	const site = yield* Neon.Website.TanStackStart("Web", {
42	rootDir: ".",
43	});
44	return { url: site.url };
45	}),
46	);
47	```
48
49	Client files are served from the artifact; unmatched requests reach the framework
50	handler for SSR and server routes. Private server-side `env` values are process
51	environment. `VITE_*` values are compiled into client code; keep privileged tokens
52	out of them and out of server-function responses.
53
54	## Develop and deploy
55
56	```sh
57	pnpm exec alchemy dev
58	pnpm exec alchemy deploy
59	pnpm exec alchemy destroy
60	```
61
62	Run separately, destroying when finished. Dev uses the native Vite server and
63	HMR, returns a local URL, and creates no implicit Project or Function. Append
64	`.pipe(Alchemy.remote())` to the Website Effect to opt into live deployment during dev.
65
66	Omitting scope creates an Ohio Project on deploy. Supply either `project` or
67	`branch` for an existing backend, and use Ohio when adding storage. Read
68	[scope and credentials](/neon/frontend/vite#scope-and-credentials) before sharing
69	backend credentials with application code.
70
71	:::caution[Deployment limits]
72	Complete live framework acceptance remains unverified. Neon probes have served
73	old code/env despite new active deployment IDs. This integration provisions no
74	CDN or durable server cache, and registering a domain does not validate TLS.
75	See the [shared deployment limits](/neon/frontend/vite#environment-and-deployment-limits).
76	:::
77
78	## Reference
79
80	- [TanStackStart API](/providers/neon/website/tanstackstart)
81	- [Runnable TanStack Start example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-tanstack-start)