😊

Remix で認証付き SaaS UI をいい感じのルーティングで組む

2022/08/24に公開

React

これはなに？

remix フレームワークは一人でサービス開発するときに、最高に楽しいです。
ただ、特徴でもある nested routing がどうしてもややこしいのです。

認証付きのSaaSっぽいUIを組むときに、loader を通しての認証ガードをしつつ、いい感じの(ださくない) URL パスを組むのがどうやったらいいかRouting の公式ドキュメントを見てもわかりませんでした。

そこで、いろいろ試行錯誤して、いい感じのが作れたので備忘録として残しておきます。

よくあるこういう画面です。

結論

routes 以下をこうするといい感じになる。

app/routes              URLパス        役割
├── __index.tsx                       ログイン後全体レイアウト(認証ガード付き)
├── __index
│   ├── __index.tsx                   トップページのレイアウト
│   ├── __index
│   │   └── index.tsx   /             トップページの中身
│   ├── bookmarks.tsx   /bookmarks
│   ├── help.tsx        /help
│   ├── settings.tsx    /settings
│   ├── tasks.tsx       /tasks
│   └── users.tsx       /users
├── login.tsx           /login
└── logout.tsx          /logoout

デモ

ログインは以下のアカウントで可能です (DBは使わずの決め打ち認証です)

ユーザ名: demo@techtalk.jp
パスワード: password

ソースコード

ここで公開しています。

利用技術スタック:

remix
chakra-ui
typescript
vercel

remix でロジックと UI 一緒に作るのが、めっちゃ楽しいです。
typescript と react で組めるモダンな PHP、みたいなイメージでおります。

これはなに？

結論

デモ

ソースコード

Discussion