Cloudflare Developer Challenge 2022 Spring 参戦メモ
Hi MORISHIGECloudflare Developer Challenge 2022 Springに参加してみる
Hi MORISHIGE5/24締め切りが6/7まで延びたみたい。
駆け足で何となく形にしてきたけどなかなかひどい感じなので作り直すのもありかな…
Hi MORISHIGE期限が延びてモチベーションダウン感もあるけど作り直すか。
DOのベストプラクティスが知りたい。
Hi MORISHIGEWorkers、Cloudflare Pages、Durable Objects、Wokers KVの2つ以上のサービスを利用したリアルタイムコラボなアプリケーションを約1週間で作成して提出する。
ひとまずRemixを使って、WorkersとDOを利用したアプリケーションでいこうと思う。
Hi MORISHIGERemixでDOを利用する場合、Remix配布のテンプレートからではESM対応していないため大変。
テンプレートとしては下記が以前より広く使われている模様。ただ今回は作り込む時間もないのでシンプルにいきたい。
Remixメンテナーのjacob氏のTurborepoを使ったテンプレートが最近公開され、かなりシンプルにまとまっているので今回はそれをベースに新規テンプレートを用意した。
TurborepoをYarnで利用する場合、v1.22.18ではエラーがでてWorkspacesの操作がうまくいかなかった。v1.18にダウングレードで動作するという情報もあるが、わざわざダウングレードするのもいまいちなので今回はnpmでいく。
Hi MORISHIGEYarnのコマンドを打ち間違えていたのか何かおかしかったのかやり直したら問題なく動作した。
各レポジトリにパッケージをインストールする場合
$ yarn workspace remix-app add tiny-invariant
共通に利用するパッケージ等ルートにインストールする場合
$ yarn add -W hogehoge
CSS-in-JSのほとんどがSSRでまともに使えない。。アプリケーションをつくるときに一番の大きな課題。Node.jsで動かないため各種UIライブラリのSSR機能が軒並みNode.js想定なので動かない。
無難にTailwindCSSを選択する。いつの間にかRemix用のドキュメントも追加されていた。
UIはRadixUIをあとで試してみる。
Hi MORISHIGERadixUIの前にHeadlessUIを試して用件は済んだのでひとまずよしとする。
Hi MORISHIGEStichesは問題なく動作している。
Hi MORISHIGE今回Sessionを使うので忘れずにWorkerにシークレットを登録しておく。wrangler.tomlのあるディレクトリで実行する。
$ wrangler secret put SESSION_SECRET
⛅️ wrangler 2.0.5 (update available 2.0.6)
-----------------------------------------------------
Enter a secret value: ******
🌀 Creating the secret for script remix-on-the-fridge
✨ Success! Uploaded secret SESSION_SECRET
SessionにKVを利用するのでKVも用意しておく。
$ wrangler kv:namespace create "SESSION_KV"
$ wrangler kv:namespace create --preview "SESSION_KV"