Introduction
Rebask is a Vite plugin and runtime for React Server Components apps.
It adds file based routing, streaming HTML, Partial Pre-Rendering (PPR), Server Functions, and soft navigations.
If you use a coding agent, start with Agents. It points agents at cheatsheet.md , Markdown docs, and the Rebask skill.
Getting started
Get started with a new app using create-rebask-app:
pnpm create rebask-appManual setup
1. Install dependencies
pnpm add @rebask/core react react-dom
pnpm 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:
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. Start with a root layout
under app/layout.tsx that will wrap every page and should render <html> and <body>:
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:
export default function HomePage() {
return <h1>Hello</h1>
}4. Add scripts and run
In package.json:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}Finally, start the dev server:
pnpm dev