Guide / Quickstart

Quickstart

From an empty folder to a page served by Rust. Four steps, each one a command or a file you can copy as is.

1Check the requirements

Bun 1.4 or newer. The Rust server ships prebuilt for macOS and Linux, so there is no Rust toolchain to install.

$ bun --version
1.4.3

2Create the project

The blank template has one layout, one page (the brust mark, a native counter and three links to these docs), the site favicon, and the scripts you will use every day.

$ bun create @brust/app@latest my-app
$ cd my-app && bun install

Note

Keep the @latest. bun create caches the scaffolder, and a stale cache gives you an old template.

3Write a page

A page is a plain React component. routes.tsx maps paths to components, and the layout wraps every page through Outlet.

pages/HomePage.tsx

import Counter from '../components/Counter'

const link = 'font-semibold text-amber-ink underline underline-offset-[0.2em] hover:decoration-2 focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-amber-ink'

export default function HomePage() {
  return (
    <>
      <header className="flex items-center gap-[0.9rem]">
        <svg className="flex-none" viewBox="0 0 32 32" width="44" height="44" aria-hidden="true">
          <rect width="32" height="32" rx="8" fill="#062323" />
          <path d="M7 19a9 9 0 0 1 18 0z" fill="#f2a516" />
          <rect x="5" y="20.5" width="22" height="2.2" rx="1.1" fill="#f2a516" />
          <rect x="10" y="24.6" width="12" height="2" rx="1" fill="#f2a516" opacity=".55" />
        </svg>
        <h1 className="m-0 text-4xl leading-[1.1] font-bold tracking-[-0.01em]">brust app</h1>
      </header>
      <p className="mt-4 mb-8 text-lg text-ink-2">Edit pages/HomePage.tsx and save. The page reloads.</p>
      <section className="rounded-2xl border border-rule bg-sheet p-6">
        <Counter />
        <p className="mt-4 mb-0 text-[0.9375rem] text-ink-2">useState only, so this button is native: a signal in the browser, no React shipped.</p>
      </section>
      <nav className="mt-8 flex flex-wrap gap-x-6 gap-y-2" aria-label="Learn more">
        <a className={link} href="https://brust.dev">
          Docs
        </a>
        <a className={link} href="https://brust.dev/docs/routing">
          Routes
        </a>
        <a className={link} href="https://brust.dev/docs/actions">
          Actions
        </a>
      </nav>
    </>
  )
}

routes.tsx

import { defineRoutes } from '@brust/core/routes'
import Layout from './components/Layout'
import HomePage from './pages/HomePage'

export const routes = defineRoutes([{ Component: Layout, children: [{ path: '/', Component: HomePage }] }])

This page has no state and no handlers, so the compiler marks it static: rendered once, served as HTML, no client JavaScript.

4Run it

bun run dev starts the dev server, which builds the app and rebuilds it when a file changes. Open the address it prints.

~/my-app

$ brust dev routes.tsx
[brust] dev server on http://127.0.0.1:1337 — [r]eload  [o]pen  [w]arnings  [c]lear  [q]uit
[brust] building http://127.0.0.1:1337 gen 0
[brust] change detected: .
[brust] ready http://127.0.0.1:1337 gen 1 (656ms)

~/my-app

$ curl -i http://127.0.0.1:1337/
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
x-powered-by: brust/2.0.0-alpha.3
content-length: 1965

5Where to go next

Routing: nested layouts, path params, the catch-all 404.
Loaders and params: fetch data per route in Bun.
Rendering tiers: what makes a component static, native, or a React island.

Edit this page on GitHub