How to set-up Rails Hotwire live reload

#rails #hotwire #javascript #tutorial

Install Gem
Run install script
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

bundle install

2. Run install script

rails livereload:install

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")

Top comments (9)

ccastillop • Nov 24 '22

Makes a lot of sense working with hotwire reload, specially when working with tailwind v3.0 wich uses Just_In_Time compilation :)

Thanks for sharing

Walther Diechmann • Mar 18 '22

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

Erick Adrian Perez • Aug 16 '23

I love this new LiveReload and I have been using it on a Rails 7 app I've been using for practice on tutorials, etc.
I love it so much that I decided to try to install it to a small Rails app at work that we use to show design prototypes.
So I decided to install it to this existing app that was running on rails '5.2.4'.
I just updated it to rails '7.0.2'
Update was simple and it was successful.
I followed the steps on this artible to install hotwire-livereload.
I got my first error when I tried to make a small change to a html.erb template. The error is:

Uncaught ReferenceError: Turbo is not defined

Does this mean that this livereload requires gem "turbo-rails" as a dependency?

I've tried installing it to my app but I'm running into the problem of this app not allowing me to add this line to my application.js file:

import '@hotwired/turbo-rails'

This app is a couple of years old so I don't use import on my JS files.
I also tried to add it like this but the file could not be found.

//= require @hotwired/turbo-rails

I think it's obvious that it requires turbo-rails since it's finding that Turbo is not defined.
What should I do to make this LiveReload work on a rails app that I've updated to rails 7?