Enhance Your Rails 7 App with Stimulus.js and JavaScript Integration

Stimulus.js is a modest JavaScript framework that augments your HTML. It's the perfect companion for Rails' built-in functionality. In this post, we'll explore how to use Stimulus.js for JavaScript functionality, integrate it with other JavaScript libraries, and manage JavaScript dependencies effectively using Importmap.

Prerequisites

Before we begin, ensure you have the following:

• Rails 7 application setup
• Basic knowledge of JavaScript and Rails

Setting Up Stimulus.js in Rails 7

Rails 7 comes with default support for Stimulus.js. To get started, ensure Stimulus is included in your application by running:

rails new my_app
cd my_app

You can find the Stimulus controllers in app/javascript/controllers.

Creating a Stimulus Controller

Let's create a Stimulus controller to handle a simple click event. Run the following command:

rails generate stimulus hello

This will generate a new controller hello_controller.js in app/javascript/controllers. Open the file and add the following code:

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

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

In your HTML, use the Stimulus controller:

<div data-controller="hello">
  <h1 data-hello-target="output"></h1>
  <button data-action="click->hello#greet">Greet</button>
</div>

When the button is clicked, the text will change to "Hello, World!".

Integrating with Other JavaScript Libraries

Stimulus.js can work seamlessly with other JavaScript libraries. For example, let's integrate jQuery with Stimulus.js.

First, add jQuery using Importmap:

Add jQuery to your config/importmap.rb:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

Then, import jQuery in your Stimulus controller:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

Managing JavaScript Dependencies

Managing JavaScript dependencies in Rails 7 is straightforward with Importmap. Here are some tips:

• Add a library: Use pin "library_name", to: "library_url" in your config/importmap.rb to add a new library.
• Remove a library: Remove the corresponding line from config/importmap.rb to remove an existing library.
• Update libraries: Update the URLs in config/importmap.rb to the latest versions.
• Check outdated libraries: Visit the URLs in config/importmap.rb to see if newer versions are available.

You can also add custom JavaScript files to your project. Place them in the app/javascript folder and import them where needed.

Conclusion

Stimulus.js provides a powerful yet simple way to add JavaScript functionality to your Rails application. By integrating it with other JavaScript libraries, you can create a rich and dynamic user experience. Properly managing your JavaScript dependencies ensures your application remains maintainable and up-to-date.

Happy coding!