Railsにviteを入れてviewをlive reloadする手順
最近Railsのjs周りはviteを使うことが多いです
viteはhot reloadが超絶早く開発中の気持ち良い度が非常に高いので興味がある方は試してみてください
jsを使わない場合でもtailwind cssをjit modeで使う場合はそちらの再読み込みも非常に早くなります
1. gem 'vite_rails'
vite_railsはwebpackerなどと違いラップして抽象化するわけではなく良い感じに素のviteとの橋渡しをしてくれるやつなのでとりあえずこれを入れておきましょう
bundle exec vite install
これでvite関連のファイルがインストールされます
2.application.htmlに読み込み周りを書く
上のコマンドを打つと勝手に追記されるのですが、既にいじってあるプロジェクトに追加する場合はうまくいかないかもしれません
こんな感じです
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application', "data-turbo-track": "reload" %>
</head>
<body>
<%= yield %>
</body>
</html>
3. cssを分離する
個人的にはcssだけ分離したいのでentrypointを増やしてこんな感じの2分割にしています
app
└── frontend
├── entrypoints
│ ├── application.js
│ └── stylesheet.js # NEW!
└── stylesheets # NEW!
└── tailwind.css # NEW!
import '../stylesheets/tailwind.css'
@import "tailwindcss/base";
@import "tailwindcss/utilities";
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application', "data-turbo-track": "reload" %>
<%= vite_javascript_tag 'stylesheet', "data-turbo-track": "reload" %> // NEW!
</head>
<body>
<%= yield %>
</body>
</html>
余談ですが、上では「vite_javascript_tag」で読み込んでいるのでstylesheetではなくjsとして読み込まれるのでは？と思うかもしれませんが、本番では勝手に<link rel="stylesheet" href...になってくれます
4. 起動コマンドを bin/rails s から foremanに変更する
1.のコマンドを打った人は、気付けば/Procfile.devみたいなファイルが作成されていると思います。今後はこれを使って起動することになります
もしまだforeman.gemを入れてない場合はGemfileに記載するか適当にインストールしてください
bundle exec foreman start -f Procfile.dev
これで起動します。ちなみにdockerを使っている場合に直接http://localhost:3036/vite-dev/にアクセスしても404が表示されますが、Rails側に2. をきちんと行っている場合はrails側からちゃんと読み込めます
実際にtailwindが動くか適当に試してみます（package.jsonに追加したりする作業は割愛）
動いてます。viteの方の設定ファイル/config/vite.json, /vite.config.tsは一切触らなくてもこんな感じでviteが動くようになります
5.Railsのviewを変更した時にlive reloadされるようにする
これでviteは動いているのですが、webpacker時代と違ってRailsのviewを変更してもブラウザ側が更新されずめんどくさいです
そこでgemを導入して開発環境においてviewの更新時にlive reloadされるようにします
group :development do
gem 'guard-livereload', require: false
gem 'rack-livereload'
end
Rails.application.configure do
# ↓追記
config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
...
あとは起動時のコマンドを追加する必要がありますのでProcfile.devに追記しましょう
vite: bin/vite dev
web: bin/rails s
# ↓ 追記
livereload: bundle exec guard start -i -g livereload
これでOKです。一回Railsのサーバーを終了した後にまたあの起動コマンドを打ちましょう
bundle exec foreman start -f Procfile.dev
Railsのviewを更新した時にブラウザ側もlive reloadされるようになったかと思います
Author And Source
この問題について(Railsにviteを入れてviewをlive reloadする手順), 我々は、より多くの情報をここで見つけました https://zenn.dev/sesere/articles/23a8ef2c54d489著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol