ReactRouter

Source: src/Fly/Website/ReactRouter.ts

Deploy a React Router v7 app (framework mode) to Fly: the SSR server on a Machine, static assets baked into the image, served assets-first then the framework handler.

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 wraps the manifest with createRequestHandler and packages the resulting fetch handler as a Node HTTP server on port 3000.

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* Fly.Website.ReactRouter("Web", {
  rootDir: "./app",
});

Custom Domain

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

Server Configuration

Process Environment

const site = yield* Fly.Website.ReactRouter("Web", {
  rootDir: "./app",
  env: {
    GREETING: "Hello from React Router on Fly!",
  },
});

Read An Environment Variable From A Loader

app/routes/home.tsx

export function loader() {
  return { greeting: process.env.GREETING ?? "Hello!" };
}