TL;DR

Bun、Hono、Vite、React を組み合わせた、軽量な Web アプリの構成。

仕組み

モノレポになっていて、package.json の workspaces で次の 3 つのパッケージを管理する。

  • client/: Vite でビルドする React のフロントエンド
  • server/: Hono のバックエンド
  • shared/: client と server の両方で使う TypeScript の型定義

server が返すレスポンスの型を shared に置き、client も同じ型を import する。これで API の型をフロントエンドとバックエンドで共有できる。特定のプロバイダーに依存せず、各パーツを別々の場所にデプロイできる。

例

bun create bhvr@latest
bun run dev    # server、client、shared をまとめて起動
bun run build  # client と shared をビルド

出典