tRPC, React Router and Hono for building stuff
If you’re building fullstack TypeScript applications and want a stack that feels lightweight, fast, and modern, combining tRPC, React Router, and Hono is a great place to start.
Why this stack?
- tRPC gives you type-safe API calls without writing a single line of REST or GraphQL boilerplate.
- React Router is a flexible client-side routing solution that has matured into a full-featured SPA routing system with nested routes, loaders, and more.
- Hono is a super-fast web framework for building HTTP servers with JavaScript/TypeScript, perfect for edge deployments or lightweight backends.
Let’s break down what each brings to the table.
---
## Hono for the backend
Hono is a tiny web framework that runs on various JavaScript runtimes like Bun, Deno, Node, and Cloudflare Workers. It's incredibly fast and expressive.
Example server.ts
:
import { Hono } from 'hono'
import { appRouter } from './trpc/router'
import { createTRPCMiddleware } from 'trpc-hono'
const app = new Hono()
app.use(
'/trpc/*',
createTRPCMiddleware({
router: appRouter,
createContext: () => ({}),
})
)
app.get('/', (c) => c.text('Hello from Hono'))
export default app