Zenn
Open2

hono で live reload を実現する

Hono
プログラミングをするパンダプログラミングをするパンダ

https://zenn.dev/dannya/articles/4b416423916ff0 の記事を参照しています

{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:wrangler": "wrangler dev src/index.tsx --live-reload",
    "dev:esbuild": "esbuild --bundle src/index.tsx --format=esm --watch --outfile=dist/_worker.js"
  },
  "dependencies": {
    "hono": "^4.5.5"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240529.0",
    "esbuild": "^0.23.0",
    "npm-run-all": "^4.1.5",
    "wrangler": "^3.57.2"
  }
}

esbuild で dev ビルドして、 wrangler を --live-reload でリロードすれば、JSX で書いたコードの live reload が実現できます。

プログラミングをするパンダプログラミングをするパンダ

init した時の package.json はこんな感じなので、esbuild と npm-run-all 入れて、scriptsを書き換えないといけないですね

{
  "scripts": {
    "dev": "wrangler dev src/index.ts",
    "deploy": "wrangler deploy --minify src/index.ts"
  },
  "dependencies": {
    "hono": "^4.5.5"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240529.0",
    "wrangler": "^3.57.2"
  }
}