DEV Community

thomasvanholder
thomasvanholder

Posted on

How to set-up Rails Hotwire live reload

  1. Install Gem
  2. Run install script
  3. Listen to file changes

This tutorial will explore a modern way to live-reload a rails app set-up with css-bundling (tailwind) and js-bundling (esbuild).


1. Install Gem

Add to Gemfile

group :development do
  gem "hotwire-livereload"
end
Enter fullscreen mode Exit fullscreen mode
bundle install
Enter fullscreen mode Exit fullscreen mode

2. Run install script

rails livereload:install
Enter fullscreen mode Exit fullscreen mode

3. Listen to file changes

View, helpers, and assets files are listened for by default.

If you use rails's css-bundling and js-bundling gems, find the bundled JS and CSS file app/builds.

The app/builds folder includes:

  • app/builds/application.css
  • app/builds/application.js

An additional watch process is needed to re-build the JS and CSS file after changes (see docs). Tailwind, for example, uses a Just-in-time compiler to only add classes to the CSS that are being used in your application. This requires specifying an additional path to listen for any (Just-in-time) changes.

# config/environments/development.rb

config.hotwire_livereload.listen_paths << Rails.root.join("app/assets/builds")
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
wdiechmann profile image
Walther Diechmann

thank you so much for sharing! This really hit a "soar spot" :D