shadcnモノレポで構築したプロジェクトにAPI（hono）を追加する

2026-01-31

a month ago

開発環境

node 22.x
pnpm 10.x
hono 4.11.7

前提

shadcn/ui をベースにしたモノレポ構成がすでに存在している
apps/web（公開サイト）、apps/admin（管理画面）が作成済み
packages/ 配下に共通設定（TypeScript設定など）を持っている
パッケージマネージャーは pnpm を使用している

本記事は、以下の記事の続きです。

https://www.reactive-everyday.com/articles/2e46284e-febf-80a9-a4c0-dc65553106ea

本題

ここからは、shadcn モノレポで構築したプロジェクトに API（Hono）を追加する手順を紹介します。

6. apps/ 配下にプロジェクトを追加（api）

まずは Turborepo の generator を使って、apps/api を追加します。

pnpm turbo gen workspace

>>> Add an empty workspace to "shadcn-monorepo"

? What type of workspace should be added? app
? What is the name of the app? api
? Where should "api" be added? apps/api
? Add workspace dependencies to "api"? No

>>> Success! Created api at "apps/api"

これで、apps/api が空の workspace として作成されます。

7. Hono 初期化

次に、作成した apps/api 配下で Hono を初期化します。

cd apps/api
pnpm create hono@latest .

今回は Cloudflare Workers をターゲットにします。

✔ Using target directory … .
✔ Which template do you want to use? cloudflare-workers
✔ Directory not empty. Continue? Yes
✔ Do you want to install project dependencies? No
✔ Cloning the template

依存関係のインストールは、後でモノレポ全体でまとめて行うため、ここでは No を選択しています。

8. Hono のセットアップ

TypeScript 設定をモノレポ向けに調整

Hono の初期化で生成された tsconfig.json を、モノレポの共有設定を使う形に調整します。

Cloudflare Workers 特有の設定は保持しつつ、packages 側で管理している共通の TypeScript 設定を extends します。

// apps/api/tsconfig.json
{
  "extends": "@workspace/typescript-config/base.json",
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "skipLibCheck": true,
    "lib": ["ESNext"],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}

この形にしておくことで、フロントエンド（web / admin）と API で TypeScript の思想を揃えたまま開発できます。

9. 依存関係のインストール

Hono 初期化時には依存関係をインストールしていないため、モノレポのルートでまとめてインストールします。

pnpm install

これで apps/api も含めて、全 workspace の依存関係が解決されます。

10. web / admin との疎通確認

このまま web や admin から api を叩くと、CORS エラーが発生します。そのため、Hono 側で CORS 設定を追加します。

// apps/api/src/index.ts
import { Hono } from 'hono';
import { cors } from 'hono/cors';

const app = new Hono();

app.use(
  '*',
  cors({
    origin: ['http://localhost:3000', 'http://localhost:3001'],
  }),
);

app.get('/', (c) => {
  return c.text('Hello Hono!');
});

export default app;

http://localhost:3000 → web
http://localhost:3001 → admin

といった形で、ローカル開発時のフロントエンドから API を問題なく呼び出せるようになります。

さいごに

shadcn モノレポを使っていると、フロントエンドだけでなく API の追加も非常にシンプルです。

apps/ 配下に API を追加するだけで、モノレポとして自然な構成になる
共通の TypeScript 設定や lint ルールをそのまま流用できる

最終的な構成は、以下のような「標準的で分かりやすいモノレポ」になります。

├── apps/          # デプロイ可能なアプリケーション
│   ├── web        # 公開サイト
│   ├── admin      # 管理画面
│   └── api        # API
├── packages/      # 共有ライブラリ・コンポーネント
│   ├── ui         # UIコンポーネント
│   ├── config     # 共有設定
│   └── utils      # 共通ユーティリティ

「管理画面＋公開サイト＋API」をまとめて管理したい場合、この構成はかなり扱いやすいのでおすすめです。

参照

Hono - CORS Middleware