Flowを使用してポートフォリオサイトを作成しました。Pagesにデプロイするまでの方法をまとめています。Portfoliohttps://sakupi01.com/(リポジトリ)HonoXとはHonoXは、HonoとViteを組み合わせてできたHonoのメタフレームワークです。Componentの棲み分け、SSRを実現し、Next.jsのようなフルスタックWebフレームワークの書き心地を実現したHonoアプリを作成できます。詳細は、以下のyusukebeさんの記事を参照ください。templateに倣って、以下のコマンドを実行し、x-basicを選択します。実行完了すると、以下のようなディレクトリ構成でHonoXアプリが作成されます。Boundaryの設置ができることがわかります。アクセスすると以下のように初期画面が表示されます。HonoXアプリの初期画面レンダリングの仕組みレンダーは_renderer.tsxで設定されたレンダラーによって行なわれます。デフォルトの場合だと、hono/jsx-rendererのレンダラーであることがわかります。)})レンダラーの引き数や戻り値はglobal.d.tsで定義されています。}}このように、デフォルトの設定ではhono/jsx-rendererのレンダラーが使用されており、アプリケーション全体を通してhono/jsxコンポーネントが使用されています。hono/jsxからインポートされたuseStateを使用して、以下のように[route]/app/islands/counter.tsxを実装できます。)}しかし、今回はReactベースのUIライブラリを使用するため、hono/jsxをレンダーするhono/jsx-rendererは使用できません。ReactベースのUIライブラリを使用するためには、reactのJSX(ReactNode)をレンダーするためのreact-dom/clientが必要です。そこで、次のステップでは、ReactNodeのレンダラーを提供するreact-dom/clientにレンダラーを変更し、使用するJSXをreactから提供されているReactNodeにします🏃🏻‍♀️React化するレンダラーを変更するHonoXの面白い特徴として、レンダラーとしてHono純正のhono/jsx-renderer以外の任意のレンダラーを使用できます。Flowを使用可能にしていきます。HonoXでReactNodeをレンダリングするために必要なモジュールをインストールします。--exact./app/client.tsではクライアントでコンポーネントをレンダリングするためのレンダラーの生成を行なっています。引数を渡さない場合のデフォルトcreateClientだと、レンダラーはhono/jsx-renderer、コンポーネントはhono/jsxとして生成されます。今回は、レンダラーをreact-dom/client、コンポーネントをreactコンポーネントとして生成するように設定します。Issueとして確認されており、後続のリリースで修正されると思われますので、現時点では黙認しておきます。./app/client.ts...https://github.com/honojs/honox/issues/87次に、@hono/react-rendererのレンダラーが受け取るpropsを定義します。今回はページごとにtitleとdescriptionをheadに設定したかったので以下のように定義しました。}}最後に、Reactレンダラーを適用して完成です。)})各rootではglobal.d.tsで定義したpropsを渡して、以下のようにレンダリングを構成できます。});});ライブラリを使用するviteはデフォルトではすべての依存関係を外部化、つまり、開発中にバンドルは行なわずプログラムの配布前にのみ行なうということをします。これにより、ビルドの高速化しています。ViteのSSRではリンクされた依存関係はHMRをするために外部化しない、つまりSSRではリンクされたパッケージをバンドルに含めてビルドします。SSR)しかし、外部化したい、つまりリンクされたパッケージでもバンドルに含めずビルドしたい場合にはssr.externalsに入れる必要があります。具体的にssr.externalsに含めるパッケージとしては以下のようなものが考えられるでしょう。ブラウザ環境でのみ使用されるパッケージクライアントサイドレンダリング用のライブラリは、サーバー側レンダリング時には不要だからです。YamadaUIの場合は以下のようなエラーが出ます。Node.js依存のパッケージNode.js依存のコードには、Node.js固有のAPI、グローバル変数、モジュールシステムなどが使われており、これらはブラウザ環境では存在しません。そのため、ViteがNode.js依存コードをそのままトランスパイルしようとするとエラーになります。含める必要があるでしょう。これにより、Viteはそのパッケージをバンドル化せずに、Node.js実行環境から直接読み込むようになります。含めないと、逆にViteはそのパッケージをバンドル化しようとしてエラーとなってしまいます。Flowをクライアントサイドで使用できるようにします。Flowは、各ライブラリの公式ドキュメントに従うことで使用できます。Pagesのプロジェクトを作成し、GitHubと統合します。Pagesへ自動デプロイされるようになります。Pagesで依存関係をインストールすると以下の状態から進行しませんでした。(32abb4eb)パッケージマネジャにbunを用いる場合は、現状以下の環境変数の設定が必要なようです。installを含めます。モノリポにおける依存関係との仁義なき戦い本当は2日前くらいにデプロイ&この記事を書いていて、「よーし、ツイートして終わり〜〜」と思っていたのですが、投稿時にog画像がいつものようにうまく表示されなくなっていました。ブログアプリはVercelにデプロイしているので、Vercelのログを確認してみたところ、og画像生成のためのファイルにうまくアクセスできていないようでした。'/var/task/articles/_dev/blog-tech-stack.md'}原因を調査したところ、./apps/blogと./apps/me間での依存関係に整合性が取れてなかったことが問題だとわかりました。具体的には、./apps/meを付け足しで作った際にインストールした@hono/react-rendererの内部依存パッケージAが、別マイクロサービスである./apps/blogで^x.y.zとしてインストールしていたパッケージAとバッティングして、元々./apps/blogで動いていたパッケージAのバージョンが上書きされてしまったことが原因でした。