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
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” is here to avoid interruption while building the app.
See the issue I opened on Github. [EDIT: closed by DHH recently]
now
bin/rails db:create db:migrate
Install a default welcome page
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 :
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
# Add this
group :development do
gem “hotwire-livereload”
end
Then run
bin/rails livereload:install
Modified files
Note that this line was inserted inside app/views/layouts/application.html.erb:
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
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.
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.