みやけ

 プロジェクトの作成とりあえず yarn を実行すると package.json を基に node_modules がインストールされることは知っている。
公式によると、 yarn create hono などとやると hono プロジェクトを作れることを知る。
HonoX は、Hono + Vite のフルスタックWebフレームワークでα版ぽいが、セットアップテンプレートで x-basic を選択することでも合わせて導入されるようだ

みやけ

ミドルウェア

半日溶かした。
server.ts を見ると、

const app = createApp();
showRoutes(app);
export default app;

みたいな記述があって、なるほどここがエントリーポイントか、と思い console.log('aaa'); みたいな行を追加したが、yarn dev 時に1回出るだけでリロードしても2回以上出ない。

公式ではいとも簡単に書かれているが、こんな追記をしても全く反応しない。

const app = createApp();
app.use((c, next) => {
  console.log(c.req.method, c.req.url);
  return next();
});
showRoutes(app);
export default app;

どうやら、createApp の引数でチェインする仕様のようだ（参考）

import { createHono } from "honox/factory";

const baseApp = createHono();
baseApp.use((c, next) => {
  console.log(c.req.method, c.req.url);
  return next();
});
const app = createApp({ app: baseApp });
showRoutes(app);
export default app;

でも、やりたいことは、logger が担ってくれるようだ。

import { createHono } from "honox/factory";
import { logger } from "hono/logger";

const baseApp = createHono();
baseApp.use(logger());
const app = createApp({ app: baseApp });
showRoutes(app);
export default app;

サーバサイド脳をリセットしないと苦しそうだ

みやけ

 ミドルウェア(2)前述のものは全体に適用することだけを実現したが、
ログイン/非ログインの制御
ロール周りのチェック
このあたりの「特定のルーティングのみ適用」する仕組みを調べる

みやけ

Prisma Client

それくらい知ってるぜー、

yarn add --dev prisma@latest
yarn add @prisma/client@latest

して、こうやろ？

npx prisma init --datasource-provider sqlite
npx prisma init generate
npx prisma migrate dev

くらいの気分でいったら、1日溶かしました。

HonoX (正しくは Vite) 環境では、prisma client が commonJS やら何やら（不明）
というわけで、 vite.config.ts に ssr オプションを追加する必要がありました。

import pages from '@hono/vite-cloudflare-pages'
import adapter from '@hono/vite-dev-server/cloudflare'
import honox from 'honox/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [honox({ devServer: { adapter } }), pages()],
  # ここ
  ssr: {
    external: ['@prisma/client'],
  },
})

拡張子を cjs にしないといけないとか、vite-plugin-commonjs が必要とか、
いろいろな情報を見ては試したけど、HonoX + Vite についてはこれだけでした。