Browser Syncing for Rails

1

I’ve been playing around with importmaps-rails, jsbundling-rails and cssbundling-rails. I’m loving this new direction, as it brings us closer to a fully formed dev environment with Hotwire.

The only missing piece for me is live reloading, which seems to come as standard in the SPA world. I just released browsersyncing-rails which drops straight into this ecosystem, with the addition of being able to sync device/browser scroll positions, clicks etc.

The default configuration respects how turbo replaces the body tag, and so instead injects into the head, as well as forwarding headers so that form submissions work as expected. The new stack is a dream to work on with this setup.

I’d quite like this to be an option via rails new. Interested to get feedback.

4 Likes
2

Installed it in my project and it works really well, great job!
Would be nice to have only the component reload if you do a change, like with Next.Js but it’s already really nice to have the reload and more.

3

Actually I just found this gem to reload only components and not the hole page! GitHub - kirillplatonov/hotwire-livereload: Hotwire::Livereload automatically reloads Turbo when "view" files are modified.

4

Glad you found it useful. Take a look at the bs-config.js file that browsersyncing-rails generates for you. You can add any custom config there (see Browsersync docs): Browsersync options.