clover's git

the-knife

1	---
2	title: React Router
3	description: Package React Router framework-mode SSR and browser assets for Neon Functions.
4	sidebar:
5	order: 6
6	---
7
8	`Neon.Website.ReactRouter` builds a framework-mode React Router app and wraps its
9	server handler in a Node 24 Fetch entry. Server and browser output ship together
10	in a Neon Function ZIP, not a container or an S3 hosting stack. For a client-only
11	React Router SPA, use [Vite](/neon/frontend/vite).
12
13	## Prepare the app
14
15	Use a framework-mode app or the
16	[runnable React Router example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-react-router).
17	Configure [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 the `reactRouter()` plugin from `@react-router/dev/vite` in `vite.config.*`
27	and your route configuration in the application. No separate listening server
28	or deployment adapter is needed in the app.
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	"NeonReactRouter",
40	{ providers: Neon.providers(), state: Alchemy.localState() },
41	Effect.gen(function* () {
42	const site = yield* Neon.Website.ReactRouter("Web", {
43	rootDir: ".",
44	});
45	return { url: site.url };
46	}),
47	);
48	```
49
50	The framework handler receives SSR, loader, action, and resource-route requests;
51	static files are served from the Function artifact. Server loaders/actions can
52	read `process.env`; Vite's `VITE_*` values are embedded in the browser build.
53	Do not return private tokens from loaders or place them in public-prefixed values.
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 separately, destroying when finished. Dev uses React Router's native Vite
64	server and HMR, with a local URL and no implicit Neon resources. Append
65	`.pipe(Alchemy.remote())` to the Website Effect to opt into live deployment during dev.
66
67	Omitting scope creates an Ohio Project on deploy. Pass either `project` or
68	`branch` for a shared backend, and choose Ohio when combining with storage. Read
69	[scope and credentials](/neon/frontend/vite#scope-and-credentials) before wiring
70	backend access.
71
72	:::caution[Deployment limits]
73	Complete live framework acceptance remains unverified. Neon probes have served
74	old code/env after new deployment metadata became active. This constructor does
75	not add a CDN or persistent application cache; custom-domain registration is not
76	TLS validation. See the
77	[shared deployment limits](/neon/frontend/vite#environment-and-deployment-limits).
78	:::
79
80	## Reference
81
82	- [ReactRouter API](/providers/neon/website/reactrouter)
83	- [Runnable React Router example](https://github.com/alchemy-run/alchemy/tree/main/examples/neon-website-react-router)