Vinext

Hetzner.Website.Vinext builds with the Vinext Vite API for production and runs native vinext dev locally. The built app runs on a Hetzner Cloud Server using vinext’s production Node server as a systemd service. Alchemy creates a server when server is omitted and uploads dist/ with the runtime dependency installation.

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 Hetzner from "alchemy/Hetzner";

export const Website = Hetzner.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: Hetzner.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 = Hetzner.Website.Vinext("Website", {
  env: { GREETING: "Hello from vinext on Hetzner!" },
});

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. To persist ISR and "use cache" across restarts, supply an existing Redis endpoint through env.REDIS_URL. The Website does not install or provision Redis. Protect credentials with Redacted.make and keep the Redis service private.

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* Hetzner.Website.Vinext("Web", {
  domain: "app.example.com",
  zone,
});

Hetzner requires an existing DNS zone when setting domain. See Website domains for platform-specific DNS and certificate configuration.