Introduction:
In recent years, building modern web applications has evolved beyond the traditional model of page reloads for every user interaction. Developers have sought ways to create more dynamic, seamless user experiences. Historically, this was done using JavaScript frameworks like React or Vue, but Hotwire presents a new, Ruby-native approach to achieving the same dynamic behavior without extensive JavaScript code.

Hotwire, short for HTML Over The Wire, is a revolutionary framework introduced by the creators of Ruby on Rails. It enhances user experience by sending HTML responses instead of JSON data or JavaScript, allowing for fast page updates without a full reload. Hotwire achieves this with minimal client-side JavaScript, making it an excellent fit for Ruby on Rails applications. Its components include Turbo and Stimulus, which work together to create modern, responsive user interfaces.

By embracing Hotwire, Rails developers can leverage the power of server-rendered HTML with the speed and interactivity typically associated with single-page applications (SPAs). This approach simplifies development by keeping most of the logic on the server and improves maintainability and performance.

In this blog, we’ll explore how to configure Hotwire in a Ruby on Rails application and how to take advantage of its capabilities for building dynamic applications.

What is Hotwire?
Before diving into the setup, let's briefly understand the core concepts of Hotwire:

• Turbo: Turbo enhances page load times by optimizing page navigation and partial updates. It eliminates the need for full-page reloads, making the user experience smoother and more responsive. Turbo is made up of three main components:

1. Turbo Drive: Handles navigation by intercepting links and form submissions to load pages using AJAX requests. 
2. Turbo Frames: Allow for partial page updates by isolating a section of the page and refreshing only that portion without a full reload.
3. Turbo Streams: Enable real-time updates by automatically updating parts of the page in response to server-side changes, perfect for live updates like chat messages or notifications.

• ​Stimulus: Stimulus is a lightweight JavaScript framework that helps make HTML more interactive. It is particularly useful for adding custom behaviors to Turbo-powered pages. Unlike traditional JavaScript frameworks that require heavy client-side logic, Stimulus enhances HTML elements with simple controllers that respond to user actions.
   

Configuring Hotwire in a Ruby on Rails Application

Let’s walk through the steps for setting up Hotwire in a new or existing Ruby on Rails project.

Install Hotwire

Hotwire can be added to your Rails application with a single command. If you're starting with a new Rails application or integrating it into an existing one, follow these steps:

Add Hotwire to your Gemfile (Rails 7+ comes with Hotwire by default):

 

gem 'hotwire-rails'

Then run:

bundle install

 

Once the gem is installed, you can run the Hotwire installer to set up Turbo and Stimulus:

 

rails hotwire:install

 

This command does the following:

• Adds necessary JavaScript dependencies for Turbo and Stimulus.
• Creates the app/javascript/controllers/ directory for Stimulus controllers.
• Modifiy your application layout to include Hotwire.

 

​Verify and Customize the Configuration

After running the installer, ensure that the following files and configurations are set up correctly.

Application Layout

The installer should automatically add the following line to your app/views/layouts/application.html.erb layout file to include the necessary JavaScript:

 

<%= javascript_include_tag 'application', type: 'module' %>

This tag ensures that the Turbo and Stimulus JavaScript files are included on every page.

JavaScript Entry Point

The installer modifies the app/javascript/packs/application.js file to import Turbo and Stimulus:

 

// app/javascript/packs/application.js
import { Turbo } from "@hotwired/turbo-rails"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

// Initialize Stimulus
const application = Application.start()
const context = require.context("controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

This code initializes Turbo and Stimulus in your application.

Stimulus Controllers

The installer creates a directory for Stimulus controllers:

 

app/javascript/controllers/ 

 

You can add custom controllers here as needed. The example below shows a simple Stimulus controller setup:

 

// app/javascript/controllers/hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!")
  }
} 

Turbo Setup

Turbo is automatically configured to enhance form submissions and link clicks. You can manage its behavior with attributes like data-turbo on forms and links.

Restart Your Rails Server

After making these changes, restart your Rails server to apply the configurations:

 

rails server

 

Conclusion 

The hotwire-rails gem integrates seamlessly into a Ruby on Rails application, providing powerful tools to create dynamic, responsive user interfaces with minimal JavaScript. By following the steps above, you’ll have a fully configured Hotwire setup, ready to enhance your application's interactivity.