Vinext

Railway.Website.Vinext builds with the Vinext Vite API for production and runs native vinext dev locally. The built app runs in a Railway Service using vinext’s production Node server. Alchemy creates a Project when project is omitted. The container includes dist/ and runtime dependencies; site.url is the Railway service domain.

Install

Keep vinext, react, react-dom, and react-server-dom-webpack in your application dependencies, with vite and @vitejs/plugin-rsc for building. Add the Alchemy integration:

bun add -d @alchemy.run/frontend-frameworks

npm install -D @alchemy.run/frontend-frameworks

pnpm add -D @alchemy.run/frontend-frameworks

yarn add -D @alchemy.run/frontend-frameworks

Configure vinext

import { defineConfig } from "vite";
import vinext from "vinext";

export default defineConfig({
  plugins: [vinext({ prerender: true })],
});

Alchemy injects the target-specific data-cache adapter during deployment. No Alchemy plugin is required in vite.config.ts; deployment settings belong on Website.Vinext. Leave Cloudflare plugins and Worker entrypoints out of this application.

Declare the Website

import * as Railway from "alchemy/Railway";

export const Website = Railway.Website.Vinext("Website", {
  rootDir: ".",
});

rootDir, env, memo, assets, dev, and domain use the same vocabulary as the other Website constructors. Framework configuration stays in vite.config.ts rather than a nested server configuration object.

Add it to the Stack

import * as Alchemy from "alchemy";
import * as Effect from "effect/Effect";

export default Alchemy.Stack(
  "MyVinextSite",
  { providers: Railway.providers(), state: Alchemy.localState() },
  Effect.gen(function* () {
    const site = yield* Website;
    return { url: site.url };
  }),
);

Keep the local state available for subsequent deploys and teardown.

Add environment variables

export const Website = Railway.Website.Vinext("Website", {
  env: { GREETING: "Hello from vinext on Railway!" },
});

env is available during build, development, and production. Server code reads process.env; public framework variables may be compiled into browser assets. Keep secrets out of public keys and wrap credentials in Redacted.

Read the runtime environment

export function GET(request: Request) {
  const name = new URL(request.url).searchParams.get("name") ?? "world";
  return Response.json({ name, greeting: process.env.GREETING ?? "hello" });
}

Request-dependent route handlers read the production environment. A prerendered page reflects its build-time inputs instead.

Configure the data cache

The default data cache is process-local. For shared, persistent ISR and "use cache", pass a Railway.Redis resource from the same project. Alchemy binds REDIS_URL. Resources declared separately retain their own lifecycle in dev.

const project = yield* Railway.Project("Project");
const redis = yield* Railway.Redis("Cache", { project });
const site = yield* Railway.Website.Vinext("Web", { project, redis });

Local development

bun alchemy dev

The Website runs vinext dev with native HMR and creates no cloud resources. Other resources declared in the Stack retain their own provider behavior. Apply .pipe(Alchemy.remote()) to the Website for a live deployment during dev.

Custom domains

const site = yield* Railway.Website.Vinext("Web", {
  domain: "app.example.com",
});

See Website domains for platform-specific DNS and certificate configuration.