Skip to main content

Getting Started

Install​

yarn add @rapidrest/react

@rapidrest/react requires @rapidrest/core, @rapidrest/service-core, React 19, and React DOM 19 as peer dependencies. vite, @vitejs/plugin-react, and tsx are optional peers, only needed if you use client-side hydration or the dev CLI.

If you generated your project with rapidrest generate server and selected the React feature, all of this is already wired up. Skip to App Directory Convention.

Minimal setup by hand​

1. Create the app directory (the default is apps/app):

apps/app/
├── _layout.tsx    ← required HTML wrapper
└── index.tsx      ← page: GET /

2. Write the layout

// apps/app/_layout.tsx
import type {PropsWithChildren} from 'react';

export default function Layout({children}: PropsWithChildren) {
  return (
    <html>
      <head><title>My App</title></head>
      <body>{children}</body>
    </html>
  );
}

3. Write a page

// apps/app/index.tsx
export default function HomePage() {
  return <h1>Hello from RapidREST React!</h1>;
}

4. Mount the route

// src/AppRouter.ts
import {RouteDecorators} from '@rapidrest/service-core';
import {ReactRoute} from '@rapidrest/react';

const {Route} = RouteDecorators;

@Route('/app')
export class AppRouter extends ReactRoute {}

A named prefix like /app (rather than a bare /) is important: RapidREST also registers a static-file handler at /*, and the last-registered wildcard wins, so a named prefix keeps your pages from being shadowed by it. Don't add a trailing /* yourself — ReactRoute.get() already declares @Get("/*") under the hood, so @Route('/app/*') would register the effective path as the broken /app/*/*.

5. Run it

npx rapidreact dev

The page at apps/app/index.tsx is now served at /app/. See Dev Mode for what this command actually runs.

Changing the app directory

The app directory isn't configured via nconf. Override the appDir property on your route subclass instead:

@Route('/app')
export class AppRouter extends ReactRoute {
  protected override readonly appDir = 'apps/app';
}