Rails7, Hotwire, ViewComponent, TailwindCSS でのサンプルプロジェクト.

Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す.

• Version
• Install
  • 1. node_modules フォルダを作成
  • 2. env ファイルを作成
  • 3. Docker イメージを作成
  • 4. database を作成
  • 4. seed データを投入
  • 5. プロジェクトを起動
  • 6. seed ファイルに定義したアカウントでログイン
  • 7. 画面にアクセス
  • 8. 完了
• Command
• Other
  • ViewComponentのプレビュー

• Ruby 3.2.2
• Rails 7.0.4
• Tailwind CSS

Docker Componse で node_modules ボリュームをバインドするために必要.

./
  ├─ app
  ├─ ...
  ├─ node_modules // このフォルダを作成
  └─ ...

.envに記述したクレデンシャルは、docker-compose.yml経由でプロジェクト内に環境変数として登録される.(※本プロジェクトでは未使用)

./
  ├─ app
  ├─ ...
  ├─ .env // このファイルを作成
  └─ ...

docker compose build

docker compose run web rails db:create && rails db:migrate

docker compose run web rails db:seed

docker compose up

ブラウザから各画面にアクセスして表示されることを確認.

• view_component と stimulus コントローラをジェネレート
  • rails generate component Hoge::Fuga --stimulus --preview
• stimulus コントローラを index.js に登録(rake コマンドで拡張したもの)
  • rails view_component:stimulus_manifest:update

/rails/view_componentsからコンポーネント単位でのプレビューを確認できる