DEV Community

David Boureau
David Boureau

Posted on • Originally published at saaslit.com

Live reload a Rails 7 application, an unsatisfaying attempt

article originally published here : https://saaslit.com/blog/ruby/live-reload-a-rails-7-application-an-unsatisfaying-attempt

What is live reloading?

Live-reloading is a well-known concept for JavaScripters : you change your code, save the file, and the browser automagically reflect the change, without the need to press the "F5" key.

Actually I already tried with ViteJS 2 years ago.

Surprisingly, it has (not yet) been included by default in most backend frameworks, including Rails.

Prerequisites

ruby -v  # 3.3.0
rails -v  # 7.1.3
bundle -v  # 2.4.10
node -v # 20.11.0
git --version # 2.34.1
Enter fullscreen mode Exit fullscreen mode

Create a new Rails 7 app with eslint and cssbundling

I'm not sure this method will work with importmaps (which are new Rails default), so let's try with good old JS and CSS build :

echo "Y" | rails new theapp -j=esbuild -c=tailwind
Enter fullscreen mode Exit fullscreen mode

echo "Y" is here to avoid interruption while building the app.

See the issue I opened on Github. [EDIT: closed by DHH recently]

now

cd theapp
bin/rails db:create db:migrate

Enter fullscreen mode Exit fullscreen mode

Install a default welcome page

  echo "class WelcomeController < ApplicationController" > app/controllers/welcome_controller.rb
  echo "end" >> app/controllers/welcome_controller.rb
  mkdir app/views/welcome
  echo '<h1 class="mb-4 text-4xl font-extrabold">welcome page</h1>' > app/views/welcome/index.html.erb

Enter fullscreen mode Exit fullscreen mode

Now apply routes to these new pages :

  # inside config/routes.rb
  Rails.application.routes.draw do

    # add this line
    root "welcome#index"

    # all other routes remain unchanged
    # ...

  end
Enter fullscreen mode Exit fullscreen mode

Install a gem for that

I remember that I had to use a chokidar + custom JS and config to get it work in previous Rails version, but now the Rails API seems much more stable in the front, we can quite safely try a gem that does the job

# inside Gemfile

# Add this
group :development do
  gem "hotwire-livereload"
end
Enter fullscreen mode Exit fullscreen mode

Then run

bundle install
bin/rails livereload:install
Enter fullscreen mode Exit fullscreen mode

Modified files

  • Note that this line was inserted inside app/views/layouts/application.html.erb:
<%= hotwire_livereload_tags if Rails.env.development? %>
Enter fullscreen mode Exit fullscreen mode
  • Gemfile was modified - redis gem was uncommented to include it, then bundle install has been launched. So check that redis is running on your local machine.

  • Finally, config/cable.yml was modified to use redis.

Ensure redis is running on your machine by typing redis-cli ping in the terminal

Go! See changes live

Then launch your local web server with

bin/dev
Enter fullscreen mode Exit fullscreen mode

And try to add tailwind classes, or modify HTML tag or content inside app/views/welcome/index.html.erb. Then notice how things change in your terminal.

16:00:17 web.1  | Hotwire::Livereload::ReloadChannel is transmitting the subscription confirmation
Enter fullscreen mode Exit fullscreen mode

And more interestingly in your browser! Make some change in your HTML file (remove or add CSS classes, change text). Can you see them in the browser without hitting the F5 key ? Yay!

Problems

On my local machine, it's working so-so. Refreshing is not working all the time. So this method is not reliable enough on my side to use on it on wild, real Rails project.

That being said, a be thank you to the commiters of this gem, because it's free work, and a step in the right direction.

Next time I'll try to livereload, I need something more robust, and maybe also less invasive (whenever possible!).

Summary

Live (or hot-) reloading is not always possible in an easy way.

I appreciate how the community tries to circumvent this problem, there will probably a "part 2" for this tutorial, since everything didn't worked as expected 😬.

Sorry mates for this incomplete answer, see you soon!

David.

Top comments (1)

Collapse
 
dailson_igoaraujopalhet profile image
Dailson Igo Araujo Palheta

"Rails Live Reload" works fine for me.

  • Open the Gemfile
  • Search for "group :development do”
  • Add the line gem "rails_live_reload" inside the block. The entire block will look similar or the same as the content below:
group :development do
# Other gems

gem "rails_live_reload"
end
Enter fullscreen mode Exit fullscreen mode
  • Save the modification to the Gemfile file and run the bundle.
$ bundle install

Enter fullscreen mode Exit fullscreen mode
  • Generate the Rails Live Reload initialization file by running the command below
rails generate rails_live_reload:install
Enter fullscreen mode Exit fullscreen mode
  • If you use ViewComponent, update the config/initializers/rails_live_reload.rb configuration file to also watch the app/components folder by adding the following line
config.watch %r{app/components/.+\.(erb|rb)$}, reload: :always
Enter fullscreen mode Exit fullscreen mode