Skip to content

Blogging On Rails

Everything on Rails!

HOTWiring an Existing Rails Monolith

How do you add Turbo to your existing Rails app? What do you need to watch out for as you transition to a full HOTWire approach? I found it to be very straight forward, and mostly a search and replace operation.

Add Turbo Rails gem to the Gemfile and remove Turbolinks:

gem 'turbo-rails'

Then run ./bin/bundle install and

run ./bin/rails turbo:install

Search through your code base for turbolinks to see where you are using it. The first change I found was in the html layouts. 'data-turbolinks-track' became 'data-turbo-track'.

You may have configured some links that you didn’t want Turbolinks to follow, by setting the data-turbolinks attribute to false. This attribute is now data-turbo, so look for those throughout your code base.

You may have used the permanent attribute, data-turbolinks-permanent, which kept elements between page visits, and mimicked the behavior of single page applications. This attribute is now data-turbo-permanent.

If you have any JavaScript code that listened for turbolinks events, you should make sure the names of the events now start with turbo instead of turbolinks. I have a couple Stimulus controllers that listen to the turbolinks:before-visit event, so those are now turbo:before-visit. You can see all the Turbo events and compare them with the Turbolinks events.

Of course, run your tests after all these changes, and QA all your pages to make sure nothing is broken.

I’m looking forward to taking advantage of more of the features of Turbo, including lazy loading frames and an easier to use broadcast method for changes on the page.

Looking to make your Rails app more interactive?

Subscribe below, and you won’t miss the next Rails tutorial, that will teach you how to make really interactive web apps that just work.

We won’t send you spam. Unsubscribe at any time.

Leave a Reply

Your email address will not be published. Required fields are marked *