clover's git

the-knife

1	---
2	title: Vinext
3	description: Deploy vinext to Prisma Compute with the shared Website API, native local development, and traced runtime dependencies.
4	sidebar:
5	order: 9.6
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.Vinext` builds with the Vinext Vite API, then hosts vinext's production
13	Node server on **Bun in Prisma Compute**. Alchemy packages `dist/`, public
14	assets, and locally installed runtime dependencies into a `tar.gz` artifact.
15	There is no Dockerfile, registry, Wrangler configuration, or OpenNext build.
16
17	## Install
18
19	Keep `vinext`, `react`, `react-dom`, and `react-server-dom-webpack` in your
20	application dependencies, and install `vite` and `@vitejs/plugin-rsc` for
21	building. Add the Alchemy integration and dependency tracer:
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 vinext
31
32	```typescript
33	// vite.config.ts
34	import { defineConfig } from "vite";
35	import vinext from "vinext";
36
37	export default defineConfig({
38	plugins: [vinext({ prerender: true })],
39	});
40	```
41
42	Alchemy injects the Node data-cache adapter during deployment. No Alchemy plugin
43	is required in `vite.config.ts`. Configure deployment settings on
44	`Prisma.Website.Vinext` and leave Cloudflare plugins out of the Vite config.
45
46	## Declare the Website
47
48	```typescript
49	// alchemy.run.ts
50	import * as Prisma from "alchemy/Prisma";
51
52	export const Website = Prisma.Website.Vinext("Website", {
53	rootDir: ".",
54	});
55	```
56
57	A live deployment creates a database-less project when `project` is omitted.
58	Pass an existing project to share it with other applications.
59
60	## Add it to the Stack
61
62	```typescript
63	import * as Alchemy from "alchemy";
64	import * as Effect from "effect/Effect";
65
66	export default Alchemy.Stack(
67	"MyVinextSite",
68	{ providers: Prisma.providers(), state: Alchemy.localState() },
69	Effect.gen(function* () {
70	const site = yield* Website;
71	return { url: site.url };
72	}),
73	);
74	```
75
76	`site.url` is the Compute endpoint on deploy and the native dev-server URL locally.
77	The result also exposes `compute`, `project`, and `domain`, matching other
78	Prisma Website constructors.
79
80	## Add environment variables
81
82	```typescript
83	export const Website = Prisma.Website.Vinext("Website", {
84	env: { GREETING: "Hello from vinext on Prisma!" },
85	});
86	```
87
88	`env` is available during build, development, and production. Server components,
89	route handlers, and server actions read `process.env`. Public framework variables
90	can be compiled into browser assets; keep secrets out of public keys.
91
92	## Configure the data cache
93
94	The default cache is process-local and does not survive a Compute restart or
95	provide cross-instance consistency. For persistent ISR and `"use cache"`, provide
96	an existing Redis endpoint:
97
98	```typescript
99	import * as Redacted from "effect/Redacted";
100
101	export const Website = Prisma.Website.Vinext("Website", {
102	env: {
103	REDIS_URL: Redacted.make("rediss://user:password@cache.example.com:6379"),
104	},
105	});
106	```
107
108	The injected cache adapter uses Redis when `REDIS_URL` is set and memory
109	otherwise. Prisma.Website does not provision Redis. The same Node adapter is
110	used by Fly, Hetzner, and Railway.
111
112	## Local development
113
114	```sh
115	bun alchemy dev
116	```
117
118	The Website runs `vinext dev` with native HMR without creating a Prisma project,
119	Compute service, or custom domain. Other resources declared in the Stack retain
120	their own provider behavior. Apply `.pipe(Alchemy.remote())` to deploy the
121	Website to Compute during development.
122
123	## Custom domains
124
125	```typescript
126	const site = yield* Prisma.Website.Vinext("Web", {
127	domain: "app.example.com",
128	});
129	```
130
131	The app must use the project's default branch. Configure the returned DNS records
132	and verify domain status before routing traffic; see
133	[Custom domains](/prisma/frontend/websites#custom-domains).
134
135	## Packaging
136
137	Prisma runs the uploaded artifact without installing dependencies. `@vercel/nft`
138	traces the installed application's runtime graph. Native addons require a
139	Linux-compatible build environment; a macOS deployment does not cross-compile them.
140
141	## Where next
142
143	- [vinext API reference](/providers/prisma/website/vinext).
144	- [Runnable example](https://github.com/alchemy-run/alchemy/tree/main/examples/prisma-website-vinext).
145	- [Websites](/prisma/frontend/websites) and [Compute apps](/prisma/compute/apps).
146	- [vinext on Cloudflare](/cloudflare/frontend/vinext), [AWS](/aws/frontend/vinext),
147	[Fly](/fly/frontend/vinext), [Hetzner](/hetzner/frontend/vinext), and
148	[Railway](/railway/frontend/vinext).