Stack App with API - TanStack Start + Hono + Cloudflare + Drizzle

https://developers.cloudflare.com/workers/framework-guides/web-apps/tanstack/

Getting Started

Install the dependencies

vp install

Start the development server

vp dev

Build for Production

vp build

Preview the production build

vp preview

Deploy to Cloudflare

vp run deploy

Verify

vp lint
vp fmt
vp test
vp run check

マイグレーション

ここでは仮に「open-stack-cloudflare」というデータベース名を使用します。これはwrangler.jsonの database_name と一致させてください。

以下のコマンドでマイグレーションのファイルを作成します。

make create-migration

以下のコマンドでローカルのデータベースを更新します。

make apply-migration-local

もしくは

vp exec wrangler d1 migrations apply open-stack-cloudflare --local

リモート環境のマイグレーション

以下のコマンドで本番環境のデータベースを更新します。

vp exec wrangler d1 migrations apply open-stack-cloudflare --remote

ただし、先にデータベースが作成されている必要があります。

vp exec wrangler d1 create open-stack-cloudflare

リモートのデータベースと接続する

プロパティにremoteを追加します。

{
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "open-stack-cloudflare",
      "database_id": "e0097010-e9a1-4800-8a7e-xxx",
      "remote": true
    }
  ]
}

Accessing bindings

Hono handlers can access Cloudflare bindings through c.env:

const database = c.env.DB

See src/api/interface/routes/index.ts and src/api/interface/middlewares/database-middleware.ts for examples.

メモ

~ vs @

初期値では ~ ですが、Claudeが間違って rm -rf ~/xxx など実行した場合に危険なので @ に変更しました。

{ "resolve": { "alias": { "@": "/src" } } }

route-tree.gen.ts

初期値では routeTree.gen.ts ですが、Claudeがこのファイル名を参考に他のファイルの命名規則を間違って camelCase にしてしまう可能性があるので、kebab-case に変更しました。

{ "router": { "generatedRouteTree": "route-tree.gen.ts" } }