Can you explain how the routing system works in this template?
The template uses TanStack Router with file-based routing. Each file in src/routes/ becomes a route automatically.
Layout routes use the _ prefix — they wrap child routes via <Outlet /> without adding a URL segment. For example, _sidebar.tsx provides the sidebar shell for all routes under _sidebar/.
The root layout (__root.tsx) provides the outermost wrapper.
What about data fetching?
Data fetching uses React Query (@tanstack/react-query). The QueryClient is created in main.tsx and passed through context.
API calls go through typed helpers in lib/api.ts:
const data = await get<MyType>("/endpoint")
In dev, requests to /api/* are intercepted by a Vite plugin and routed to the Hono server in-process — no CORS, no proxy, no separate server process.
Nice. How would I add a new API endpoint?
Add a route handler in api.ts:
app.get("/api/my-endpoint", (c) => {
return c.json({ message: "hello" })
})
That's it. The Vite plugin picks it up immediately in dev. In production, server.ts serves the Hono app directly.