Rails 8とNext.js 15とその通信はGraphQLで行うWebアプリのサンプルを作ったので公開します。 サンプルなんで所々粗いですが、概要を掴むくらいには使えるかと思うので参考になればと思います。
- 他のディレクトリからコピってきたのでcommit logが無いですがご了承ください
- ポイントとなる箇所はNOTE: とコメントしてあるのでgrepして調べてください
作業をする上で特に重要なリンクを登録し管理するWebアプリです 例えば仕事でタスクをやるとnotion, figma, githubではbackendのPRリンク, frontendのPRリンク, backendとfrontendのベースブランチ、 小タスクのPRのリンク, google spreadsheetのリンク、、、 とかとか大量に必要なリンクが出てくるのでこれに登録してすぐに開けるようにしたりしてます。
ちなみにChromeの拡張機能もあり、Chromeから一発でこのWebアプリに登録することも可能です。
- back -> Rails
- front -> Next.js
- post_link -> Chrome機能拡張
- dockers -> 今回の開発に使ったdockerたち
- Ruby On Rails 8
- ActionCable
- ridgepole
- graphql-ruby
- batch-loader
- Next.js 15
- Apollo Client
- Tailwind CSS
- shadcn/ui
- react-hook-form
- zod
- date-fns
- webpack
- RSpec, factory_bot は未実装。そのうちやるかも
- 今回権限系がなかったのでgraphqlのfieldの非表示とかはやってません。そのうち機会があったらやるかも
- CIは,そのうちやるかも
- デプロイはそのうちやるかも(Fly.ioとか)
- Style/ClassAndModuleChildren は compactにしてあります。nestedはソースが空中戦になるのであんまし好きじゃないので
- ※ 昔は本番でモジュール未定義エラーとか出てたりしてたけど最近はいけるような気がする(ダメなら考えます)。
- gem solid系は定義してるけど使用せずredisつかってます。fly.ioとかの親和性があるのでそのうちやりたい
- App Routerを使用してます
- TypeScriptの型はちょこちょこanyが入ってます。そのうちちゃんとやるかも
- jest, storybook は未実装。そのうちやるかも
- graphqlのschema.graphql等から型を生成するのは未実装。そのうちやるかも
- CIは,そのうちやるかも
- デプロイはそのうちやるかも(Vercelとか)
1. 適当なディレクトリに行く ~/projects とか
2. git clone [email protected]:yoshioota/hotlink.gitcd ~/projects/hotlink
cp dot.env.example .env
cp back/dot.env.example back/.env
cp front/dot.env.local.example front/.env.localcd ~/projects/hotlink
docker compose up※ ちなみにridgepole使ってます
cd ~/projects/hotlink/back
rails db:create
rails ridgepole:update
rails db:seedcd ~/projects/hotlink/back
rails ridgepole:update
frontはdocker compose立ち上げれば普通に動きます
デフォルトURLは以下
※ あらかじめchrome://extensionsにてDeveloper modeをONにしておく必要あり
- Chromeを立ち上げる
- アドレスバーから chrome://extensions/ を入力して機能拡張メニューに遷移し [Load unpacked] ボタンからdistを選択する
そうするとChrome機能拡張として使えるはず
MIT