1---
2title: Vinext
3description: Deploy vinext to Railway with the shared Website API, native local development, and a platform-specific data cache.
4sidebar:
5 order: 9.6
6---
7
8import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
9
10export const devDeps = "@alchemy.run/frontend-frameworks";
11
12`Railway.Website.Vinext` builds with the Vinext Vite API for production and runs native
13`vinext dev` locally. The built app runs in a Railway Service using vinext's production Node server.
14Alchemy creates a Project when `project` is omitted. The container includes
15`dist/` and runtime dependencies; `site.url` is the Railway service domain.
16
17## Install
18
19Keep `vinext`, `react`, `react-dom`, and `react-server-dom-webpack` in your
20application dependencies, with `vite` and `@vitejs/plugin-rsc` for building.
21Add 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
34import { defineConfig } from "vite";
35import vinext from "vinext";
36
37export default defineConfig({
38 plugins: [vinext({ prerender: true })],
39});
40```
41
42Alchemy injects the target-specific data-cache adapter during deployment.
43No 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
50import * as Railway from "alchemy/Railway";
51
52export const Website = Railway.Website.Vinext("Website", {
53 rootDir: ".",
54});
55```
56
57`rootDir`, `env`, `memo`, `assets`, `dev`, and `domain` use the same vocabulary
58as 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
64import * as Alchemy from "alchemy";
65import * as Effect from "effect/Effect";
66
67export default Alchemy.Stack(
68 "MyVinextSite",
69 { providers: Railway.providers(), state: Alchemy.localState() },
70 Effect.gen(function* () {
71 const site = yield* Website;
72 return { url: site.url };
73 }),
74);
75```
76
77Keep the local state available for subsequent deploys and teardown.
78
79## Add environment variables
80
81```typescript
82export const Website = Railway.Website.Vinext("Website", {
83 env: { GREETING: "Hello from vinext on Railway!" },
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.
89Keep 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
95export 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
101Request-dependent route handlers read the production environment. A prerendered
102page reflects its build-time inputs instead.
103
104## Configure the data cache
105
106The default data cache is process-local. For shared, persistent ISR and
107`"use cache"`, pass a `Railway.Redis` resource from the same project. Alchemy
108binds `REDIS_URL`. Resources declared separately retain their own lifecycle in dev.
109
110```typescript
111const project = yield* Railway.Project("Project");
112const redis = yield* Railway.Redis("Cache", { project });
113const site = yield* Railway.Website.Vinext("Web", { project, redis });
114```
115
116## Local development
117
118```sh
119bun alchemy dev
120```
121
122The Website runs `vinext dev` with native HMR and creates no cloud resources.
123Other resources declared in the Stack retain their own provider behavior.
124Apply `.pipe(Alchemy.remote())` to the Website for a live deployment during dev.
125
126## Custom domains
127
128```typescript
129const site = yield* Railway.Website.Vinext("Web", {
130 domain: "app.example.com",
131});
132```
133
134See [Website domains](/railway/frontend/websites) for platform-specific DNS and
135certificate configuration.
136
137## Where next
138
139- [vinext API reference](/providers/railway/website/vinext).
140- [Runnable example](https://github.com/alchemy-run/alchemy/tree/main/examples/railway-website-vinext).
141- [Website overview](/railway/frontend/websites).
142- [vinext on Cloudflare](/cloudflare/frontend/vinext) and [Prisma](/prisma/frontend/vinext).