clover's git

the-knife

1	---
2	title: Vinext
3	description: Deploy vinext to Fly with the shared Website API, native local development, and a platform-specific data cache.
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";
11
12	`Fly.Website.Vinext` builds with the Vinext Vite API for production and runs native
13	`vinext dev` locally. The built app runs in a Fly Machine using vinext's production Node server.
14	Alchemy creates an App when `app` is omitted and deploys a Service containing
15	`dist/` and vinext's runtime dependencies.
16
17	## Install
18
19	Keep `vinext`, `react`, `react-dom`, and `react-server-dom-webpack` in your
20	application dependencies, with `vite` and `@vitejs/plugin-rsc` for building.
21	Add the Alchemy integration:
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 target-specific data-cache adapter during deployment.
43	No Alchemy plugin is required in `vite.config.ts`; deployment settings belong on
44	`Website.Vinext`. Leave Cloudflare plugins and Worker entrypoints out of this application.
45
46	## Declare the Website
47
48	```typescript
49	// alchemy.run.ts
50	import * as Fly from "alchemy/Fly";
51
52	export const Website = Fly.Website.Vinext("Website", {
53	rootDir: ".",
54	});
55	```
56
57	`rootDir`, `env`, `memo`, `assets`, `dev`, and `domain` use the same vocabulary
58	as the other Website constructors. Framework configuration stays in
59	`vite.config.ts` rather than a nested server configuration object.
60
61	## Add it to the Stack
62
63	```typescript
64	import * as Alchemy from "alchemy";
65	import * as Effect from "effect/Effect";
66
67	export default Alchemy.Stack(
68	"MyVinextSite",
69	{ providers: Fly.providers(), state: Alchemy.localState() },
70	Effect.gen(function* () {
71	const site = yield* Website;
72	return { url: site.url };
73	}),
74	);
75	```
76
77	Keep the local state available for subsequent deploys and teardown.
78
79	## Add environment variables
80
81	```typescript
82	export const Website = Fly.Website.Vinext("Website", {
83	env: { GREETING: "Hello from vinext on Fly!" },
84	});
85	```
86
87	`env` is available during build, development, and production. Server code reads
88	`process.env`; public framework variables may be compiled into browser assets.
89	Keep secrets out of public keys and wrap credentials in `Redacted`.
90
91	## Read the runtime environment
92
93	```typescript
94	// app/api/hello/route.ts
95	export function GET(request: Request) {
96	const name = new URL(request.url).searchParams.get("name") ?? "world";
97	return Response.json({ name, greeting: process.env.GREETING ?? "hello" });
98	}
99	```
100
101	Request-dependent route handlers read the production environment. A prerendered
102	page reflects its build-time inputs instead.
103
104	## Configure the data cache
105
106	The default data cache is process-local. For shared, persistent ISR and
107	`"use cache"`, pass a `Fly.Redis` resource. Alchemy binds `REDIS_URL` as an App
108	secret. A separately declared Redis resource retains its own lifecycle in dev.
109
110	```typescript
111	const redis = yield* Fly.Redis("Cache", { eviction: true });
112	const site = yield* Fly.Website.Vinext("Web", { redis });
113	```
114
115	## Local development
116
117	```sh
118	bun alchemy dev
119	```
120
121	The Website runs `vinext dev` with native HMR and creates no cloud resources.
122	Other resources declared in the Stack retain their own provider behavior.
123	Apply `.pipe(Alchemy.remote())` to the Website for a live deployment during dev.
124
125	## Custom domains
126
127	```typescript
128	const site = yield* Fly.Website.Vinext("Web", {
129	domain: "app.example.com",
130	});
131	```
132
133	See [Website domains](/fly/frontend/websites) for platform-specific DNS and
134	certificate configuration.
135
136	## Where next
137
138	- [vinext API reference](/providers/fly/website/vinext).
139	- [Runnable example](https://github.com/alchemy-run/alchemy/tree/main/examples/fly-website-vinext).
140	- [Website overview](/fly/frontend/websites).
141	- [vinext on Cloudflare](/cloudflare/frontend/vinext) and [Prisma](/prisma/frontend/vinext).