The project is in a healthy, maintained state
Automatically reload Hotwire Turbo when app files are modified.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
 Dependencies

Runtime

>= 3.0.0
>= 6.0.0
 Project Readme

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/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:

  1. Run npm install
  2. Run npm run watch

License

Hotwire::Livereload is released under the MIT License.