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

Top comments (6)

Collapse
 
ccastillop profile image
ccastillop

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

Collapse
 
wdiechmann profile image
Walther Diechmann

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

Collapse
 
roqkabel profile image
Roqkabel

Thanks so much for sharing,

Collapse
 
igorkasyanchuk profile image
Igor Kasyanchuk

I've an own alternative github.com/railsjazz/rails_live_re..., with no dependency on hotwire

Collapse
 
chmich profile image
Christian Sedlmair

Thanks Igor, i installed it, it works fine, is slimmer and configurable. i will continue with yours

Collapse
 
alfmachine profile image
Flaxmagic

Image description

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.