Personally, I never used live reloading in Rails apps apart from the one that comes with
webpacker gem. But things changed when I started working on embedded Shopify apps. They’re loaded as an iframe inside the Shopify admin panel. And reloading parent page + iframe together is pretty slow. This made editing views, CSS, or JS pretty painful 😞. To see the results of my changes I have to wait for 4-5s for browser to reload the page. At this point, I started to think that there should be a better way and started exploring live reloading.
Usually, live reloading is done by fully reloading browser page via
location.reload();. But this wasn’t sufficient for my use case. I wanted to only update page content without doing a full page reload. Luckily my apps were built with Hotwire Turbo. And
Turbo already knows how to reload only the content inside
body without reloading the whole page. All I needed to do is to teach
Turbo how to reload the current page when app’s view, CSS, or JS files are changed.
This is how Hotwire::Livereload gem was born. I created a simple Rails engine that uses
listen gem to track changes in app files and sends reload requests to
ActionCable when files are changed. As a result, we get very fast live reloading without a full browser refresh. Exactly what I was needed.
To start using Hotwire::Livereload add it to Gemfile:
bundle add hotwire-livereload --group development
And run installer:
That’s basically it! By default the gem will listen for changes in the following folders:
This covers the most common use cases. But you can tweak it with configuration if needed.
To listen for custom folder add:
# config/environments/development.rb Rails.application.configure do # ... config.hotwire_livereload.listen_paths << Rails.root.join("app/custom_folder") 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:
In case if you want to disable live reloading temporarily you can do it using the following rake task:
This will create
tmp/livereload-disabled.txt file and will stop live reloading immediately. No server restart is required. To enable it again run:
Live reloading is a very handy tool for modern web app development. I found it especially useful for Rails apps with TailwindCSS and for embedded Shopify apps. And Hotwire::Livereload gem makes it very easy to setup live reloading for Hotwire Rails apps. I will use it in all of my Rails apps moving forward. And I hope you’ll find it useful too.
If want to hear more from me follow me on Twitter. I tweet about my journey of building and growing Shopify apps using Ruby on Rails, Hotwire, and Polaris ViewComponents.