Hono + Inertia + React Setup — Bun / Vite / TypeScript Bootstrapped in 30 Minutes [2026]

End state for this guide: - A Hono server running on Bun - React rendered through the Inertia adapter - Vite hot-reloading TypeScript + React - A browser showing "Hello, Inertia" on first load Later parts of this series cover CRUD, auth, and deployment.

- Node.js 20+ or Bun 1.0+ (this guide uses Bun) - Package manager: Bun (the `bun` command) - Editor: VS Code with TypeScript / ESLint / Tailwind extensions - A browser Install Bun: `curl -fsSL https://bun.sh/install | bash`.

A simple monorepo-ish layout is the most ergonomic.

my-app/
├─ server/        ← Hono app
│  ├─ index.ts    ← entry
│  ├─ routes/     ← route definitions
│  └─ inertia.ts  ← Inertia adapter init
├─ client/        ← React app
│  ├─ main.tsx    ← createInertiaApp
│  └─ pages/      ← Inertia-resolved page components
├─ vite.config.ts
├─ tsconfig.json
└─ package.json

When scaling, split into `apps/server` and `apps/web` under Turborepo / pnpm workspaces.

In your terminal:

mkdir my-app && cd my-app
bun init -y
bun add hono @hono/vite-build @hono/vite-dev-server
bun add @inertiajs/react @inertiajs/server
bun add react react-dom
bun add -d typescript @types/react @types/react-dom @vitejs/plugin-react vite

This pulls in Hono, Inertia, React, and dev tooling.

Enable the React plugin in `vite.config.ts` and use the Hono dev server during development. Refer to Hono's official Vite integration and Inertia.js's React client-side setup and adapt to your project. If you use Tailwind CSS, the `@tailwindcss/vite` plugin is the 2026 default.

What `server/index.ts` does: 1. Create a Hono instance 2. Register the Inertia adapter as middleware (shared props, route helpers) 3. Define routes (e.g., `/` → return an Inertia response for page `Home`) 4. Start the server (`Bun.serve` on Bun, `@hono/node-server` on Node, `export default app` on Workers) A mental model: `c.inertia('Home', { title: 'Hello' })` returns a page name plus shared props. Verify exact APIs against the version of the adapter library you install.

In `client/main.tsx` call Inertia's `createInertiaApp`: - `resolve`: function to resolve page names to `pages/{name}.tsx` - `setup`: mount with `ReactDOM.createRoot` - `progress`: configure the navigation progress bar In `client/pages/Home.tsx` write a normal React component and use `usePage()` to access props from the Hono side. For your first page, returning `<h1>{props.title}</h1>` is enough.

Run `bun run dev` and open `http://localhost:3000`: - The initial GET serves complete HTML (depending on SSR/CSR setup) - Subsequent link clicks use XHR + JSON for SPA-like navigation - Editing React components hot-reloads via Vite HMR With this in place you have the foundation for the CRUD / auth / deployment chapters that follow.

- `pages/` resolution mismatch: if the `resolve` glob doesn't match the actual file layout, you'll see `Page not found`. - Bloated shared props: Inertia shared props travel to every page. Keep shared props small — user info, flash messages, csrf, etc. - CSRF / session cookies: Inertia requests must carry a CSRF token. Wire that up in middleware. - Strict TypeScript page-prop types: `usePage<{ title: string }>()` saves you from drift in later chapters.

Part 3 covers forms and CRUD patterns with Drizzle / Zod / useForm. For the series overview see Part 1.

Q1: I want Node, not Bun. A: Install `@hono/node-server` and switch the start to `serve(app)`. The application code is unchanged. Q2: How do I dev locally on Cloudflare Workers? A: Use `wrangler dev`. Hono runs natively on Workers — no extra config required. Q3: Can I skip Vite? A: Possible, but Vite's HMR for React + TS is hard to beat in 2026. Stick with it. Q4: When should I split into a monorepo? A: Once 3+ shared types / validators / utilities show up between server and client, that's the threshold.

- Hono official (hono.dev) - Hono with Vite - Inertia.js official - Inertia.js React adapter — client-side setup - Vite official - Bun official