How to Remove Turbolinks from Rails 6

Turbolinks began shipping in Rails 4 and while it has some advantages, it also comes with some complications that sometimes you just don't want to deal with. For this reason many developers choose to remove it, especially for simple projects where its benefits are negligible.

Starting a New Project

If you are starting a new project, the simplest thing to do is pass the flag --skip-turbolinks which will generate your project without Turbolinks turned on. If this is the case for you, you're all done.

rails new project-name --skip-turbolinks

Removing from an Existing Project

If you need to remove Turbolinks from a project which has already been generated, you can simply follow the following steps. For our purposes we will create a new project but without skipping the Turbolinks installation.

rails new tutorial-remove-turbolinks
cd tutorial-remove-turbolinks/

Next we need to create a controller and a view for our new project.

rails generate controller hello world

Inside the /config/routes.rb file replace it with the following to set our new controller and action as our root path.

Rails.application.routes.draw do
  root 'hello#world'
end

Inside of the /app/views/hello/world.html.erb file that was created, replace it with the following:

<h1>Is Turbolinks running?</h1>
<h2 id="turbolinks-status">No</h2>

<script type="text/javascript">
  document.addEventListener("turbolinks:load", function() {
    document.getElementById("turbolinks-status").innerHTML = "Yes";
  })
</script>

Here we are checking for the Turbolinks load event handler and if it executes then it will update the <h2> status element. This will tell us whether we have successfully removed it or not.

Remove or comment out the Turbolinks line in your Gemfile.

# gem 'turbolinks', '~> 5'

Update your Gemfile.lock as well.

bundle

In your application.js, remove or comment out the line that requires Turbolinks.

// require("turbolinks").start()

In your application.html.erb layout file, remove the Turbolinks keys.

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Becomes:

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>

Refresh your browser and you should see "No" in the answer to our question. The reason for this is that Turbolinks is no longer loaded so the event never fires and the value in that headline never changes.