Zenn
✍️

Railsにviteを入れてviewをlive reloadする手順

2022/04/30に公開
Rails
Vite
tech

最近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に読み込み周りを書く

上のコマンドを打つと勝手に追記されるのですが、既にいじってあるプロジェクトに追加する場合はうまくいかないかもしれません

こんな感じです

/app/views/application.html.erb
<!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!
/app/frontend/entrypoints/stylesheet.js
import '../stylesheets/tailwind.css'
/app/frontend/stylesheets/tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/utilities";
/app/views/application.html.erb
<!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されるようにします

Gemfile
group :development do
  gem 'guard-livereload', require: false
  gem 'rack-livereload'
end
/config/enviroment/development.rb
Rails.application.configure do
  # ↓追記
  config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
  ...

あとは起動時のコマンドを追加する必要がありますのでProcfile.devに追記しましょう

/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されるようになったかと思います

Discussion