Automatically reload Hotwire Turbo when app files are modified.
demo.mp4
Add hotwire-livereload to your Gemfile:
bundle add hotwire-livereload --group development
Run installer:
rails livereload:install
Folders listened by default:
app/viewsapp/helpersapp/javascriptapp/assets/stylesheetsapp/assets/javascriptsapp/assets/imagesapp/componentsconfig/locales
The gem detects if you use jsbundling-rails or cssbundling-rails and watches for changes in their output folder app/assets/builds automatically.
You can watch for changes in additional folders by adding them to listen_paths:
# config/environments/development.rb
Rails.application.configure do
# ...
config.hotwire_livereload.listen_paths << Rails.root.join("app/custom_folder")
endYou can disable default listen paths and fully override them:
# config/environments/development.rb
Rails.application.configure do
# ...
config.hotwire_livereload.disable_default_listeners = true
config.hotwire_livereload.listen_paths = [
Rails.root.join("app/assets/stylesheets"),
Rails.root.join("app/javascript")
]
endIf you don't have data-turbo-track="reload" attribute on your JS and CSS bundles you might need to setup force reloading. This will trigger full browser reloading for JS and CSS files only:
# config/environments/development.rb
Rails.application.configure do
# ...
config.hotwire_livereload.force_reload_paths << Rails.root.join("app/assets/stylesheets")
config.hotwire_livereload.force_reload_paths << Rails.root.join("app/javascript")
endInstead of a direct ActionCable websocket connection, you can reuse the existing TurboStream websocket connection and send updates using standard turbo-streams:
# config/environments/development.rb
Rails.application.configure do
# ...
config.hotwire_livereload.reload_method = :turbo_stream
endIn that case you need to place hotwire_livereload_tags helper in your layout after the <%= action_cable_meta_tag %>.
<head>
...
<%= action_cable_meta_tag %>
+ <%= hotwire_livereload_tags if Rails.env.development? %>
...
</head>Listen gem, which is used for file system monitoring, accepts options like enabling a fallback mechanism called "polling" to detect file changes.
By default, Listen uses a more efficient mechanism called "native" which relies on the operating system's file system events to detect changes. However, in some cases, such as when working with network-mounted file systems or in certain virtualized environments, the native mechanism may not work reliably. In such cases, enabling force_polling ensures that file changes are still detected, albeit with a slightly higher resource usage.
You may use listen_options to pass these options like:
# config/environments/development.rb
Rails.application.configure do
# ...
config.hotwire_livereload.listen_options[:force_polling] = true
endTo temporarily disable livereload use:
bin/rails livereload:disableTo re-enable:
bin/rails livereload:enableNo server restart is required. Disabling is managed by tmp/livereload-disabled.txt file.
To get started:
- Run
npm install - Run
npm run watch
Hotwire::Livereload is released under the MIT License.
