React SPA, esbuild, react-router-dom + D1 + pages、フルスタック

概要

cloudflare pagesで、React SPA フルスタック構成のメモです。

• esbuildで、ビルド
• react-router-domで、ルーティング
• CF-pagesに、デプロイ

[ 公開: 2024/01/08 ]

環境

• cloudflare pages
• cloudflare d1
• esbuild
• react-dom/client, react-dom/server
• react-router-dom
• hono

書いたコード

https://github.com/kuc-arc-f/hono_44react

• install, build, preview
• ./dist に、ビルドします。

* npm i
* yarn build
* npx esbuild --bundle ./src/client.tsx --format=esm --minify --outfile=./dist/static/client.js
* yarn preview

• deploy

npx wrangler pages deploy dist

• 追記: 2024/01/11

• yarn dev使う場合、サーバー起動時の修正でエラー発生しました。

• 回避的な方法は、下記参考です

• ホットリロードできないです。

• 手動コンパイルですが。。

• client.js : 別windows で実行

npx esbuild --bundle ./src/client.tsx --format=esm --minify --outfile=./public/static/client.js