Hotwire::Livereload
Automatically reload Hotwire Turbo when app files are modified.
demo.mp4
Dependencies
Getting started
Add hotwire-livereload to your Gemfile:
bundle add hotwire-livereload
Run installer:
rails livereload:install
Folders listened by default:
app/viewsapp/helpersapp/javascriptapp/assets/stylesheetsapp/assets/javascriptsapp/assets/imagesapp/componentsconfig/locales
Configuration
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>Disable livereload
To 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.
Development
To get started:
- Run
npm install - Run
npm run watch
License
Hotwire::Livereload is released under the MIT License.