> ## Documentation Index > Fetch the complete documentation index at: https://better-router.bansal.io/llms.txt > Use this file to discover all available pages before exploring further. # What is better-router? > A Vite plugin for file-based routing, Hono server handlers, React SSR, islands, and Cloudflare Workers. This is the first public **alpha**. APIs may change. Install `better-router@alpha` and pin the version you ship. **better-router** is a fullstack Vite plugin. Files in `src/routes` become pages and API endpoints. Every request runs through [Hono](https://hono.dev). Loader data is typed into React pages. The same tree can run on Node, Bun, Deno, or Cloudflare Workers. The source tree is the app. The plugin generates the server. You do not maintain a central router file. ## What it gives you Pages live in `src/routes`. `_layout.tsx` wraps nested UI. Companion `.server.tsx` files hold loaders and actions. Global middleware in `src/middleware` and nested `_middleware.ts` files use `(c, next)`. API routes export `GET` / `POST`. The first load is HTML. `` navigations fetch JSON and swap the page. Island pages hydrate only the widgets you mark. `vite build` emits a Worker with `fetch`. Bindings land on `getEnv()`. Optional `scheduled`, `queue`, and `email` handlers live in `src/worker.ts`. ## Where things go | You need | Put it here | Call this | | ----------------------- | ----------------------------------- | -------------------- | | A page | `src/routes/dashboard.tsx` | default export | | Server data / mutations | `src/routes/dashboard.server.tsx` | `loader` / `action` | | HTML shell | `src/routes/_document.tsx` | default export | | JSON API | `src/routes/api/webhooks/stripe.ts` | `export const POST` | | Worker handlers | `src/worker.ts` | `defineWorker()` | | Bindings | `wrangler.jsonc` | `getEnv()` / `c.env` | Routes and middleware are the only required folders. Add `wrangler.jsonc` when you deploy to Cloudflare. ## Mental model ``` vite.config.ts betterRouter() src/routes/*.tsx React pages (SSR HTML, then SPA) src/routes/*.{md,mdx} Markdown pages (same layouts and loaders) src/routes/_document.tsx HTML shell (``, ``, ``) src/routes/*.server.tsx loaders and actions (server only) src/routes/api/*.ts Hono HTTP handlers src/middleware/*.ts Hono middleware src/worker.ts Worker fetch / scheduled / queue / email (Cloudflare) wrangler.jsonc Cloudflare deploy + bindings ``` The plugin scans those files, generates a Hono app, and hydrates the client. ## Install ```bash theme={null} npm install better-router@alpha hono react react-dom npm install -D vite ``` ```ts title="vite.config.ts" theme={null} import { defineConfig } from "vite"; import { betterRouter } from "better-router/plugin"; export default defineConfig({ plugins: [betterRouter()], }); ``` Put pages in `src/routes` and middleware in `src/middleware`. Then run `vite`. Full walkthrough: [Quickstart](/quickstart). For Workers, see [Cloudflare](/cloudflare). ## Next steps Add the plugin, a page, a loader, and an API route. Build a Worker, point Wrangler at it, and deploy. Declare D1, KV, R2, and secrets in Wrangler. Read them with `getEnv()`. `defineWorker` for `fetch`, cron, queues, and inbound email.