@bounda-dev/react-router

Bounda inside a React Router 8 app in framework mode: one middleware boots the app and every loader and action reads it from the router context.

The quickest start is a new project:

npm create bounda@latest my-app -- --framework react-router

In an app you already have, add the Vite plugin:

// vite.config.ts
import { bounda } from "@bounda-dev/react-router/vite";
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({ plugins: [bounda(), reactRouter()] });

The plugin runs bounda generate when the dev server or the build starts and after every change under app/domain and app/read, and serves @bounda-dev/react-router/app:

// app/root.tsx
import { boundaMiddleware } from "@bounda-dev/react-router/app";
export const middleware: Route.MiddlewareFunction[] = [boundaMiddleware];

// app/routes/orders.tsx
import { bounda } from "@bounda-dev/react-router/app";

export const loader = ({ context }: Route.LoaderArgs) =>
  context.get(bounda).queries.listOrders({ customerId: "ada" });

export const action = async ({ request, context }: Route.ActionArgs) => {
  const form = await request.formData();
  await context.get(bounda).commands.placeOrder({
    orderId: crypto.randomUUID(),
    customerId: "ada",
    total: Number(form.get("total")),
  });
  return redirect("/orders");
};

commands and queries are typed from your generated registry. The app in the context reads its own writes, so a page reached right after a command already shows it; pass bounda({ consistency: "eventual" }) to leave projections to the background. createBounda() is the same thing without the plugin, for a server module of your own.

On Cloudflare, with storage: cloudflare() and @cloudflare/vite-plugin, the same plugin serves the app from the Worker: each loader and action reaches the Durable Object of the tenant that app/tenant.ts names. A new project gets all of it from npm create bounda@latest my-app -- --runtime cloudflare --framework react-router.

Status

0.x. Until 1.0 the API can still change between minor versions, and every change that breaks something is called out in the changelog.

Docs: docs.bounda.dev/guides/react-router. Source and issues: github.com/bounda-dev/bounda.