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

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

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

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

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

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

Then run

bundle install
bin/rails livereload:install

Modified files

• Note that this line was inserted inside app/views/layouts/application.html.erb:

<%= hotwire_livereload_tags if Rails.env.development? %>

• 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

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

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.