Rails live reloading assets

Recently I've been trying to learn more about the Rails assets pipeline. The standard documentation is very well written and has tons of tips and best practices but there's something I was still missing: live reloading the assets, in particular the css/scss assets.

Working with React this is the pretty standard behaviour: you update a file and you can instantly see the changes on the browser.

The Rails documentation does not explain how to obtain this behaviour and, honestly, I've never managed to make the live compilation work, so I've been killing the server, running bundle exec rails assets:precompile and restarting the server the whole time, until now.

Luckily, a few days ago I discovered an handy gem that solves this issue in a very simple way: rails_live_reload.

Install the rails_live_reload

Adds this gem in the development group, or whatever group you need, in you Gemfile

group :development do
  gem 'rails_live_reload'
  ...
end

and un bundle install.

Tweak the development settings

Open the config/environments/development.rb file and add these lines:

config.assets.compile = true
config.assets.digest = false

the assets.compile option enables the live compilation through Sprockets, as stated in the official documentation while the assets.digest turns off the generation of digest strings for the assets names. To be honest I'm not sure why the latter is required but if it is omitted both the live reloading and the live compilation won't work.

Run the css watch

We need to open a terminal window and spawn the process that watches for changes in the the css/scss files.
If you are using the dartsass-rails gem you can run:

bundle exec rails dartsass:watch

while if you are using cssbunding-rails or any other solutions you probably want to run:

yarn build:css --watch

keep this terminal running, do not kill it.

The Rails server

Finally, open a new terminal and run the Rails server to enjoy the live reloading assets 😎.

Feel free to write any suggestion or question in the comments. I would be really happy if someone could explain to me, and everyone who will read this tutorial, why the config.assets.digest = false is required to make the auto compilation/reloading work 🤯

Comments

[Liubomyr Manastyretskyi]

Hi, Christian
Another co-author here, first of all, thank you for bringing more attention to the gem.
We tried it on different projects, with different approaches for front-end, eg esbuild + tailwindcss, old school asset pipeline or webpacker (now shakapacker), and yet, we have never changed config.assets.compile or config.assets.digest, it would be great if you could create a sample app where your problem reproduces and open an issue.

[Christian]

ehi @manastyretskyi , sorry for the delay, I'haven't logged in for a while.
I can share the exact project on which I encountered this issue: github.com/a-chris/faenz

I've been using Rails 7 and I completely ditched the NodeJS dependency for the assets, let me know if you have any suggestion 🙏

[Liubomyr Manastyretskyi]

I cloned your project locally and commented out config.assets.compile = true and config.assets.digest = false, works perfectly fine.

[Christian]

I tried again but if I remove config.assets.digest = false the page doesn't automatically reload when I make some changes

[Liubomyr Manastyretskyi]

Not sure what the cause of it might be. It would make sense if page reloaded but styles didn't change, but I have doubts that this config can somehow affect if the page is reloaded or not.

[Igor Kasyanchuk]

as an co-author of this gem - thank you for your article :)