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.
Adds this gem in the
development group, or whatever group you need, in you Gemfile
group :development do gem 'rails_live_reload' ... end
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.
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.
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 🤯