kirillplatonov / hotwire-livereload Goto Github PK

My logs show when ERB files change, no reload occurs. This is so strange! Also, my browser shows lots of problems with wss:// connections. I am really trying hard to figure out where the true issue lies! So far, no clues...

Rebuilding...
Done in 18ms.
[ActionCable] Broadcasting to hotwire-reload: {:changed=>["/Users/beers/Documents/Workspace/Apps/planty/app/views/kilts/index.html.erb"], :force_reload=>false}
[watch] build started (change: "app/javascript/application.js")
[watch] build finished
Rebuilding...
Done in 19ms.
[ActionCable] Broadcasting to hotwire-reload: {:changed=>["/Users/beers/Documents/Workspace/Apps/planty/app/javascript/application.js"], :force_reload=>true}

Example of browser messages.


    Firefox can’t establish a connection to the server at wss://myshite.test/cable. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31
    The connection to wss://myshite.test/cable was interrupted while the page was loading. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31
    Firefox can’t establish a connection to the server at wss://myshite.test/cable. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31
    The connection to wss://myshite.test/cable was interrupted while the page was loading. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31
    Firefox can’t establish a connection to the server at wss://myshite.test/cable. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31
    The connection to wss://myshite.test/cable was interrupted while the page was loading. hotwire-livereload-69f109e9f29dd4f334a14c739a16f66d96595dcede55037f287ea8712288c0ae.js:226:31

I just installed this gem and added

config.hotwire_livereload.reload_method = :turbo_stream

to my development.rb as well. Im seeing this route error in my logs:

ActionController::RoutingError (No route matches [GET] "/rails/live/reload

And every time I update a CSS or JS, the entire page reloads. Here is my application.haml:

!!!
%html
  %head{data: {controller: 'page'}}
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title{data: {page_target: 'title'}} Wecora
    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
    %meta{content: "false", name: "turbo-prefetch"}/

    = csrf_meta_tags
    = csp_meta_tag

    = hotwire_livereload_tags if Rails.env.development? 
    
    = stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" 
    
    = javascript_include_tag "application", "data-turbo-track": Rails.env.development? ? "" : "reload", type: "module"
    = javascript_include_tag 'https://kit.fontawesome.com/f1cda1e9fa.js', crossorigin: 'anonymous', "data-mutate-approach": "sync"

    = yield :head

  %body{id: controller.controller_name, class: application_body_classes, data: {controller: 'home utilities', view: get_board_view}}
    - unless hide_header?
      = render 'layouts/nav_header'  

    = yield
    
    = render 'layouts/flash'

    = turbo_frame_tag :remote_modal

and here is my gem file:

source "https://rubygems.org"

ruby "3.3.4"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.1.3", ">= 7.1.3.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
# gem "sprockets-rails"
gem "propshaft"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
gem "redis", ">= 4.0.1"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ windows jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri windows ]
  gem "httplog"
  gem "rubocop"
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"
  gem "letter_opener"
  gem "annotate"
  gem "hotwire-livereload"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
end

gem "devise", "~> 4.9"

gem "haml-rails", "~> 2.1"
gem "airbrake", "~> 13.0"
gem "money-rails", "~> 1.15"
gem "ledermann-rails-settings", "~> 2.6"

gem "sidekiq", "~> 7.2"

gem "stripe", "~> 11.6"
gem "stripe_event", "~> 2.9"
gem "nokogiri", "~> 1.16"
gem "simple_form", "~> 5.3"
gem "aws-sdk-s3", "~> 1.152"
gem "aws-sdk-rekognition", "~> 1.97"
gem "airbrake-ruby", "~> 6.2"
gem "html2haml", "~> 2.3"
gem "intuit-oauth"
gem "oauth2", "~> 2.0", ">= 2.0.9"
gem "omniauth"
gem "omniauth-rails_csrf_protection"
gem "email_validator", "~> 2.2"

gem "public_activity", "~> 3.0"
gem "postmark-rails", "~> 0.22.1"
gem "imgkit", "~> 1.6"
gem "mini_magick", "~> 4.12"
gem "cancancan"
gem "kt-paperclip", "~> 7.2"
gem "paranoia", "~> 2.6"
gem "acts-as-taggable-on", "~> 10.0"
gem "active_storage_validations", "~> 1.1"
gem "image_processing", "~> 1.12"
gem "activeadmin", "~> 3.2"
gem "browser", "~> 6.0"
gem "doorkeeper", "~> 5.7"

gem "pinterest-api", github: "noctivityinc/pinterest-api"
gem "pipedrive-api-client"
gem "quickbooks-ruby", "~> 2.0", ">= 2.0.3"
gem "rack-cors", require: "rack/cors"

gem "twilio-ruby"
gem "recaptcha"
gem "intercom", "~> 4.2"

gem "pusher", "~> 2.0"

gem "local_time", "~> 3.0"
gem "link_thumbnailer", "~> 3.4"

gem "caxlsx", "~> 4.1"
gem "caxlsx_rails", "~> 0.6.3"
gem "riif", github: "linjunpop/riif", branch: "master"

gem "pagy", "~> 8.4"

gem "redcarpet", "~> 3.6"

gem "down", "~> 5.0"
gem "mimemagic"
gem "ruby-openai"

gem "rest-client", "~> 2.1"

gem "apipie-rails", "~> 1.4"

gem "rack-wwwhisper", "~> 1.1"

gem "pg_search", "~> 2.3"

gem "dotenv", groups: [:development, :test]

gem "numbers_and_words", "~> 0.11.12"

gem "bootstrap-email", "~> 1.5"

gem "country_select", "~> 9.0"

I have a simple template that renders, based on the hotwire rails sample App. Some components are hooked up to Stimulus controllers and call the back-end. The back-end responds, does some work, and returns a status like head :ok.

Once I do that, the console starts logging connection errors to wss://

Why does ActionCable all of a sudden become disconnected and all uppity, filling the console with these errors? Am I somehow causing this disconnect? Is there some special thing we are supposed to do to silence that? I am not using ActionCable as far as I know... but maybe with all the turbo related code in this Rails 7 hotwire App I am. Anyway, I am looking for tips on what to look for to try and mitigate a console filling with these messages.

Firefox can’t establish a connection to the server at wss://webapp.test/cable. [hotwire-livereload.source.js:226](https://webapp.test/assets/hotwire-livereload.source.js)

The connection to wss://webapp.test/cable was interrupted while the page was loading.

Hi, I didn't know this Gem will replace Async with Redis in the Action Cable Dev environment. Spent some time figuring out what happened when starting my dev env.

Just curious is it possible to stick to Async? Or at least we should mention that Redis is a prerequisite in the README.

Thanks!

Dear Team,

I've noticed that the <%= hotwire_livereload_tags %> snippet is currently only being added to the head section in the app/views/layouts/application.html.erb file. This tag is essential for utilizing Hotwire's live reload feature during development, which significantly enhances our development efficiency by enabling real-time page updates without a full reload.

To ensure that all our layouts benefit from Hotwire's live reloading capabilities, I propose one of the following actions:

1. Inclusion in All Layouts: We should consider adding the <%= hotwire_livereload_tags %> snippet to the head section of every layout file within the app/views/layouts directory. This approach ensures that any layout we use during development will automatically have the live reloading feature enabled, providing a consistent and efficient development experience.
2. Update the README: If there's a specific reason for limiting the live reload feature to the application.html.erb file, I suggest we clearly document this decision in the README. Providing this information helps in setting the right expectations and guides developers in their setup, ensuring they are aware that the live reload feature is only available when using the default application layout.

Implementing either of these solutions will help maintain consistency across our development environments and improve our workflow efficiency. Please consider this suggestion and let's discuss the best course of action to enhance our development practices.

Best regards,
Krzysztof Keczkowski

It's necessary when assets are loaded without data-turbolinks-track attribute (eg in embedded apps).

Hi,
i have an issue with the scroll position.
After editing my JS or CSS Code it reloads the page without scrolling to the restored scroll position.
I only changed the listen_paths of the gem because im using postcss to:
config.hotwire_livereload.disable_default_listeners = true
config.hotwire_livereload.listen_paths = [Rails.root.join("app/assets/builds")]
My console output:

I have installed the gem and html and css are hot reloading, but for some reason javascript isn't being updated.

Any idea?

I edit a view. So I change a Polaris view component maybe. Whatever.

The system watchers issue a Build. Things build! But the browser reload process shows wss cut off, and other than those messages contantly building, the template no longer auto-refreshes. So I am curious. How did I manage to somehow misconfigure my Hotwire Reload from reloading ERB views when they change. The message from Action Cable under the Build message in the logs is, Template "blah.html.erb" changed, reload => false...

Usually this Hotwire Reload thing works great. But somehow I managed to get it screwed up. Any clues as to where there might be a config for this I can tinker with? My development use of it looks like this...

<%= stylesheet_link_tag "application", 'polaris_view_components', "data-turbo-track": "reload"  %>
<%= javascript_include_tag 'application' %>
<% if Rails.env.development? %>
  <%= javascript_include_tag 'hotwire-livereload', defer: true %>
<% end %>

Propshaft::MissingAssetError in Home#show
Showing /Users/danieldocki/.asdf/installs/ruby/3.2.2/lib/ruby/gems/3.2.0/gems/hotwire-livereload-1.2.3/app/views/hotwire/livereload/_head_action_cable.html.erb where line #2 raised:

The asset 'hotwire-livereload.js' was not found in the load path.

16:49:30 web.1      | ActionView::Template::Error (The asset 'hotwire-livereload.js' was not found in the load path.):
16:49:30 web.1      |     1: <% if Rails.env.development? %>
16:49:30 web.1      |     2:   <%= javascript_include_tag('hotwire-livereload', defer: true) %>
16:49:30 web.1      |     3: <% end %>

What can it be?

Doesn't look like reloads happen on error pages (anymore?) — from what it looks like in the code it should be triggering a reload, yeah? I'm not seeing any requests made in the browser after I make a correction of the error in Railsland (and not seeing anything to log or other errors stemming from it).

@kirillplatonov thank you very much for your work on this project. It's a great enhancement for the developer experience.
Just wanted to drop a note that redis is not required it you use litestack and works out of the box.

I'm looking to switch from ActionCable to AnyCable using JWT identification. In it's current state, hotwire-livereload does not work with this configuration.

QUESTION:
Does this gem only require the application to enable ActionCable, or could it also require the application supports TurboStreams over ActionCable (i.e. application includes turbo-rails gem)?

If the later, I have a possible solution.

Really enjoy working with Hotwire and your gem as it speeds up development. Unfortunately, I run into troubles when interacting with components using StimulusReflex. Seems that gem breaks the connection used by StimulusReflex when hot-reload happens via TurboStream or ActionCable. Enforcing a full-page reload is my temporary fix for it.

Steps to reproduce:

• gems

hotwire-livereload (1.2.2)
stimulus_reflex (3.5.0.pre9)

• create a simple input field

<input data-reflex="change->Resources#edit_simple_field" data-gid="#{@product.to_global_id.to_s}">

• create respective reflex

  class ResourcesReflex < ApplicationReflex

    def edit_simple_field
      @resource = GlobalID::Locator.locate element.dataset.gid
      @resource.update(element.id.underscore => element.value)

      morph :nothing
    end
  end

• change anything on the same page as input you created
• hotwire-livereload will do its job and change the view
• enter new value for input and click away
• SR magic will fire
• refresh the page manually, it will show old value in input field
• consecutive updates of input values will result in proper behavior, but only because we did manual full reload of the page

For now, I am resolving this with enforcing automatic full reload that library allows
config.hotwire_livereload.force_reload_paths << [] but would be great if there would be a way to make it work the old way. Appreciate any suggestion, on how I could approach a described problem.

I am using a custom host in development, so I can access the app from jwkit.local url

It seems that hotwire-livereload does not work with custom hosts, I am getting this error in console

Love the idea of this gem! ❤️

I followed the README and my browser console says [Hotwire::Livereload] Websocket connected. But when I change any file, nothing gets reloaded.

Whatever it is, it's probably user error. But I followed the README and don't see anything in the Rails logs or browser console.

Any additional installation instructions (perhaps related to ActionCable) would be appreciated 🙌

Is there any risk of adding this to the global Gemfile, outside of development/test?

I see it only has one non-Rails dependency, listen, but that is usually reserved for development, only. Does the dependency chain spiral after that or can we assume it is sane?

If not, do you recommend wrapping the tag helper in an if Rails.env.development? or similar?

FWIW, I'm wrapping this as follows so I can keep the gem in the development group, only.

# app/helpers/application_helper.rb
module ApplicationHelper
  def hotwire_livereload_tags
    super if Rails.env.development?
  end
end

Hey nice gem, thanks!
I've tried it on bare configuration and it's great but using Webpack and for example SASS + Bootstrap configuration, It does not work and force_reload the page, is there any turnaround? I'd be glad to know more about the possible issue. thanks!

I installed the gem in a rails project following the readme instructions and it works great.

However, I'm working on a separate rails project where I do not want to use this gem, therefore I didn't add it to the gemfile or run the install script. Yet I keep getting a warning message in the logs, despite not installing the gem for this project.

Error:
Subscription class not found: "Hotwire::Livereload::ReloadChannel"

Is there a way to prevent this appearing in other rails apps which I am also developing locally? Is there some global setting causing this?

I noticed that the gem only works when I am logged in. I am using devise.
Maybe we can add a hint that one needs to modify connection.rb or add something to the initializer of the gem?
connection.rb :

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

    def find_verified_user
      if verified_user = env['warden'].user
        p verified_user
        verified_user
      else
        p verified_user
        reject_unauthorized_connection
      end
    end
  end
end

Sometimes assets builder is not so fast as your gem :)

Loading application environment...
Loading code in search of Active Record models...
rails aborted!
Loading models failed!
Error occurred while loading application: expected file /Users/alec/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/hotwire-livereload-1.2.0/app/channels/hotwire/livereload/reload_channel.rb to define constant Hotwire::Livereload::ReloadChannel, but didn't

      raise Zeitwerk::NameError.new("expected file #{file} to define constant #{cpath}, but didn't", cref.last)
      ^^^^^ (Zeitwerk::NameError)


Caused by:
Zeitwerk::NameError: expected file /Users/alec/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/hotwire-livereload-1.2.0/app/channels/hotwire/livereload/reload_channel.rb to define constant Hotwire::Livereload::ReloadChannel, but didn't

      raise Zeitwerk::NameError.new("expected file #{file} to define constant #{cpath}, but didn't", cref.last)
      ^^^^^

Tasks: TOP => erd => erd:generate => erd:load_models
(See full trace by running task with --trace)

Hi, looks like a problem with zeitwerk. To reproduce - just create an app with template https://github.com/alec-c4/ks-rails-bootstrap then run bundle exec rails g erd:install and bundle exec rails db:migrate.

Right now changes are broadcasted from rails console processes as well.

Hello, happy new year, and thank you for your time and effort creating this package.

I have a Rails 7.1 app with a default setup, I've added the gem, installed redis, and run your installer. HTML seems to reload, but I'm not able to have my styles auto reload. Here's a video. Is there anything I'm doing wrong that stands out?

os:- mac-m1-16-sonama
rails. :- 7

after install ,, when go to reload its railse a error :- undefined local variable or method `hotwire_livereload_tags' for

From 1.3 I noticed what I think is a bug with the way the scroll is preserved.

Lazy loaded content

I have a view with lazy loaded content. (infinite scroll). While I am scrolling down new content will appear but now as the new content appear I am being scrolled UP creating a strange effect.

Links targeting a frame

another case is when I have a link that targets a Turbo Frame. By example a link that will show some content in a text zone. Then same thing the preserve scroll will kick in and break the usual UX.

• app/assets/stylesheets
• app/assets/javascripts
• app/assets/images
• app/components

This will minimize the need for custom configuration.

I created a new application with puma 6.0.0 and saw that the gem does not work with this puma version. I can't figure out if this is a problem with livereload or puma )

I just installed this on an rails app that I just updated from rails 5 to rails 7.0.2.
I installed hotwire-livereload to my app following your steps.
When I tried to make a small update to an html.erb file I got the error:
Uncaught ReferenceError: Turbo is not defined
Does this mean I have to install turbo rails as well?

So I followed your tutorial here: https://kirillplatonov.com/posts/hotwire-livereload/

Added the gem to my Gemfile, ran bundle install and then ran rails livereload:install.
But then when I restart the local server (through docker-compose) it doesn't seem to be able to find hotwire_livereload_tags.

Ruby 3.2.1
Rails 7.0.4.3
Puma 5.6.5

Anything I might have missed?