# Introduction

Rebask is a Vite plugin and runtime for React Server Components apps.

It adds [file based routing](./routing/introduction.md), streaming HTML,
[Partial Pre-Rendering (PPR)](./rendering/ppr.md), [Server Functions](./server-functions.md), and
[soft navigations](./routing/navigations.md).

If you use a coding agent, start with [Agents](./agents.md). It points agents at [cheatsheet.md](https://www.rebask.com/cheatsheet.md), Markdown docs, and the Rebask skill.

## Getting started

Get started with a new app using `create-rebask-app`:

::package-manager

```bash [pnpm]
pnpm create rebask-app
```

```bash [npm]
npm create rebask-app@latest
```

```bash [bun]
bunx create-rebask-app
```

```bash [yarn]
yarn create rebask-app
```

::

## Manual setup

### 1. Install dependencies

::package-manager

```bash [pnpm]
pnpm add @rebask/core react react-dom
pnpm add -D vite @vitejs/plugin-rsc @vitejs/plugin-react
```

```bash [npm]
npm install @rebask/core react react-dom
npm install -D vite @vitejs/plugin-rsc @vitejs/plugin-react
```

```bash [bun]
bun add @rebask/core react react-dom
bun add -d vite @vitejs/plugin-rsc @vitejs/plugin-react
```

```bash [yarn]
yarn add @rebask/core react react-dom
yarn add -D vite @vitejs/plugin-rsc @vitejs/plugin-react
```

::

| Package                | Role                                       |
| ---------------------- | ------------------------------------------ |
| `rebask`               | Framework runtime and Vite plugin          |
| `react` / `react-dom`  | React 19                                   |
| `vite`                 | Bundler and dev server                     |
| `@vitejs/plugin-rsc`   | React Server Components for Vite           |
| `@vitejs/plugin-react` | Fast Refresh and the automatic JSX runtime |

### 2. Configure Vite

Add the RSC, React, and Rebask plugins in `vite.config.ts`:

```ts
import rsc from "@vitejs/plugin-rsc"
import react from "@vitejs/plugin-react"
import { rebask } from "@rebask/core/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [rsc(), react(), rebask()],
})
```

### 3. Create the app entry files

Rebask [maps files under `app/` to routes](./routing/introduction.md). Start with a root layout
under `app/layout.tsx` that will wrap every page and should render `<html>` and `<body>`:

```tsx
import type { ReactNode } from "react"

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>My App</title>
      </head>
      <body>{children}</body>
    </html>
  )
}
```

`app/page.tsx` is the `/` route:

```tsx
export default function HomePage() {
  return <h1>Hello</h1>
}
```

### 4. Add scripts and run

In `package.json`:

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
```

Finally, start the dev server:

::package-manager

```bash [pnpm]
pnpm dev
```

```bash [npm]
npm run dev
```

```bash [bun]
bun run dev
```

```bash [yarn]
yarn dev
```

::