Hotwire::Livereload

Automatically reload Hotwire Turbo when app files are modified.

demo.mp4

Dependencies

Redis

Getting started

Add hotwire-livereload to your Gemfile:

bundle add hotwire-livereload

Run installer:

rails livereload:install

Folders listened by default:

app/views
app/helpers
app/javascript
app/assets/stylesheets
app/assets/javascripts
app/assets/images
app/components
config/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")
end

You 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")
  ]
end

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

Instead 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
end

In 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:disable

To re-enable:

bin/rails livereload:enable

No 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.

cj / hotwire-livereload Goto Github PK