Hono + Inertia + React Setup

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