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
Tweak the development settings
config/environments/development.rb file and add these lines:
config.assets.compile = true config.assets.digest = false
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 🤯
Top comments (6)
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.digest, it would be great if you could create a sample app where your problem reproduces and open an issue.
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 🙏
I cloned your project locally and commented out
config.assets.compile = trueand
config.assets.digest = false, works perfectly fine.
I tried again but if I remove
config.assets.digest = falsethe page doesn't automatically reload when I make some changes
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.
as an co-author of this gem - thank you for your article :)