Skip to content
Reactra

Installation

Section titled “Scaffold a new app (recommended)”

The fastest way to a running app is create-reactra:

Terminal window
npm create reactra@latest my-app
cd my-app
npm install
npm run dev

Open the printed URL (default http://localhost:5173). You’ll see a working counter page. That page lives at src/pages/index.tsx — open it and edit; the dev server hot-reloads.

create-reactra pins each @reactra/* package to the exact alpha version it was built against, so the generated app is reproducible.

Templates

Section titled “Templates”
Terminal window
# the default: one page, no store (smallest surface)
npm create reactra@latest my-app -- --template starter


# adds a session store
npm create reactra@latest my-app -- --template todo

Add Reactra to an existing Vite app

Section titled “Add Reactra to an existing Vite app”

Reactra is a Vite plugin plus a set of runtime libraries.

  1. Install the packages:

    Terminal window
    # runtime
    npm install @reactra/router@alpha @reactra/store@alpha @reactra/service@alpha @reactra/resource@alpha @reactra/behaviours@alpha
    # build-time
    npm install -D @reactra/vite-plugin@alpha @vitejs/plugin-react vite typescript @types/react @types/react-dom

    Install only the runtime packages your app actually uses — at minimum @reactra/router.

  2. Wire the Vite plugin. Plugin order is load-bearing — reactra() runs first (enforce: "pre") so it transforms the DSL to React TSX before @vitejs/plugin-react runs:

    vite.config.ts
    import { defineConfig } from "vite"
    import react from "@vitejs/plugin-react"
    import reactra from "@reactra/vite-plugin"
    

    export default defineConfig({
      plugins: [reactra(), react()],
    })

  3. Boot the router from your entry point:

    src/main.tsx
    import { StrictMode } from "react"
    import { createRoot } from "react-dom/client"
    import { configureRouter, RouteRenderer } from "@reactra/router"
    import { ROUTES } from "./routeManifest.generated"
    

    configureRouter({ mode: "history", routes: ROUTES })
    

    createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <RouteRenderer />
      </StrictMode>,
    )

    @reactra/vite-plugin generates routeManifest.generated.ts by walking src/pages/** on dev start and on file changes.

  4. Add your first page at src/pages/index.tsx — see Your first page.

Requirements

Section titled “Requirements”
  • Node ≥ 22.18 (or any current LTS) — Reactra’s packages are Node-portable.
  • React 19.2+ (a peer dependency).
  • Vite 7+.