ReactRouter

Source: src/Hetzner/Website/ReactRouter.ts

Deploy a React Router v7 app (framework mode) to a Hetzner Cloud Server: the SSR server as a systemd unit on port 3000, static assets baked into the unit.

The build runs through @alchemy.run/frontend-frameworks/react-router with the @alchemy.run/frontend-frameworks/react-router/node deploy target — both must be installed in your project, alongside @react-router/dev, react-router, and vite.

Your vite.config.ts needs no adapter wiring. React Router’s server build is a ServerBuild manifest rather than a request handler, so the integration makes the server pass’s build input a module that wraps the manifest with createRequestHandler and packages the resulting fetch handler as a Node HTTP server.

React Server Components (React Router’s unstable RSC plugin) and multi-environment builds are not supported yet — the build fails with an actionable error when more than one server entry is emitted.

Creating React Router Sites

Basic React Router App

const site = yield* Hetzner.Website.ReactRouter("Web", {
  rootDir: "./app",
});

Custom Domain

const site = yield* Hetzner.Website.ReactRouter("Web", {
  rootDir: "./app",
  domain: "app.example.com",
  zone,
});

Server Configuration

Process Environment

const site = yield* Hetzner.Website.ReactRouter("Web", {
  rootDir: "./app",
  env: {
    API_BASE: "https://api.example.com",
  },
});

Read An Environment Variable From A Loader

app/routes/home.tsx

export function loader() {
  return { apiBase: process.env.API_BASE ?? "unset" };
}