Epic Stackを使ってみよう
はじめに
この記事はRemixのテンプレートの1つであるEpic Stackを紹介する記事です。
Epic Stackとは
Remixの開発メンバーでもあるKent C. Dodds氏が中心となって開発しているRemixのテンプレートです。これだけでは公式テンプレートである The ○○○ Stack系と何が違うのかわからないので、特徴をまとめてみましょう。
- 何故その技術を採用したかが明確にドキュメント化されている
- csrfの対策やhoneypotなどを用いたセキュリティ対策などがデフォルトで使用できる
- Sentry等の便利な物がconfigなどを変更し、コードを一部変更するだけで使用できるようになっている
- sitemapが使用できる
- MSW を用いたAPIのモックを簡単に実装できる
-
remix-authを用いた認証が用意されており、SSOで簡単にログインができ、拡張も容易 -
remix-flat-routesを使ったroutesフォルダを記述可能。Remix v1の時のようなフォルダ構造を作れる
リポジトリはこちら
使ってみて全体的に感じたこと
Epic Stackは作成した時点で一つの簡単なサイトとして完成しています。メモを投稿したり画像をアップロードしたりと様々なことが最初からできます。これらの利点としてはRemixを使ってみたいけど、一から作るのではなく具体的な実装を見ながら作ってみたい人にお勧めできます。
また、GitHubでの認証がデフォルトで搭載されていますが、envのキーにて MOCK_ prefixを付けることでGitHubのクライアントキーなどを用意せずとも簡単にテストを行うことができます。私はMSWをEpic Stackを使用するまで知らなかったので結構感動しました。
特徴別に感じた利点
remix-auth を用いた認証の拡張が非常に簡単
remix-auth 用のproviderを提供してくれているライブラリは多種多様にありますが、以下のGitHub認証を参考にすることで簡単にサードパーティー認証を追加することができます。
GitHubのプロバイダーの定義
使用できるプロバイダーとしてロゴと名前を定義する箇所
実際にプロバイダーを登録する箇所
これらの作業に追加でMSWのモックを定義することでE2Eテストなどが簡単に行えるようになります。
使う人によってはデメリットになると思う点
テンプレートは最小限に抑えるか実際の例を多く含むか等といった問題は様々な場所で議論されていますが、「テンプレートは最小限、自分で色々機能を追加する」という考えの人にはあまり向いていない可能性があります。
また、テンプレート的としてはデータベースにSQLiteとLiteFSを用いるようになっていますが、私はPostgresqlが使用したかったためデータベース周りは少しごにょごにょしてたりします（キャッシュなどにも使用されているので、その箇所はそのままですが）。
他にもnpmを使用するようになっているので、pnpmやyarnなどで動作するかは実際に試してみる必要があります。
最後にこのプロジェクトはESModuleなので、その点も予め注意した方がいいと思います。
実際にプロジェクトを作る
以下のコマンドで作成できます
npx create-epic-app@latest
## ディレクトリ移動後に以下のコマンドを実行してセットアップを行う
npm run setup
## 開発環境を実行
npm run dev
最後に
まとめとしてはEpic Stackは昔私がRemixを始めたときに「あれ、これどうすればいいんだろ」って思ってた箇所を大体カバーしてくれているので、その点では結構Remix使ってみたいけど使ったことないって方にお勧めです。
余談に歯なりますが、実は Remix Conf 2023 はリアルタイムで見てたのですが、実際に使ったのが最近だったので結構遅くなってしまいました。個人的には結構満足して使えています。元々shadcn/uiを使っていたのもあって全体的に満足してます。（個人的にはデフォルトでAuth0をメインに使用するようにしてくれないかな...?って思ったりもしますが）
それでは、ここまで読んでいただきありがとうございました！
一応最後に触れたRemix Conf2023でのKent C. Dodds氏が登壇して実際にEpic Stackについて紹介されているアーカイブ動画があるので気になる方は 参考から見てみてください。
参考
Discussion