Skip to content

Quick start

A running app in one command, or added to a project you already have.

Updated View as Markdown

A new app

bun create rsc-kit@latest my-app
cd my-app
bun run dev

That is it. You get a page, a layout, a client component and a Vite config, wired together and running. There is no server file — Nitro builds one from the preset in that config when you build.

When you are ready to ship:

bun run build
bun run start

The build prints what it did:

  ○  /

  ○  (Static)  prerendered as static content

  1 static

Pages marked are static: rendered once at build time rather than for each visitor.

An app you already have

Already have a project? Add rsc-kit to it:

bunx rsc-kit@latest init

It reads your package.json, works out which server you use and where your source lives, and writes only what is missing:

  server      hono
  source      src
  react       will be added

  + src/app/layout.tsx
  + src/app/page.tsx
  + vite.config.ts
  ~ package.json  — added @rsc-kit/core, react, react-dom, vite, nitro, …
  ~ scripts  — dev, build, start, compile, typecheck

No server file. Nitro builds one around the route tree, so the app owns a route tree and a vite config and nothing in between.

It never overwrites anything. If you already have a vite.config.ts, it prints the edit to make instead of replacing work you have done. Running it twice is safe — the second run just tells you what is already in place.

Then:

bun install
bun run dev

Add a page

Routes are directories under src/app. Create a folder, put a page.tsx in it, and it exists:

src/app/about/page.tsxtsx
export default function AboutPage() {
  return <h1>About</h1>
}
bun run build   # the route tree is read at build time

Doing it by hand

If you would rather wire it up yourself — or the CLI cannot reach your setup — Installation walks through the same result one file at a time.

Where next

Navigation

Type to search…

↑↓ navigate↵ selectEsc close