Add Stimulus JS to a Rails 6 app

published: 19th of January 2021

Intro

Stimulus JS is a "A modest JavaScript framework for the HTML you already have." The aim of the project is to sprinkle your webapp with Javascript to load dynamic content as opposed to building your entire frontent with JS.

In this post I will cover the process of installing and getting started with StimulusJS in a Rails 6 app.

Software Used

The following software was used in this post.

Rails - 6.0.3.4
Stimulus - 2.0.0

Installation

Install Stimulus with the bundle exec rails webpacker:install:stimulus command.

    cmd
  

    bundle exec rails webpacker:install:stimulus

# output 

Installing all Stimulus dependencies
         run  yarn add stimulus from "."
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ stimulus@2.0.0
info All dependencies
├─ @stimulus/core@2.0.0
├─ @stimulus/multimap@2.0.0
├─ @stimulus/mutation-observers@2.0.0
├─ @stimulus/webpack-helpers@2.0.0
└─ stimulus@2.0.0
Done in 4.08s.
Webpacker now supports Stimulus.js 🎉
  

This will install Stimulus and also in typical rails fashion the following boilerplate files/folders will be created.

app/javascript/controllers
app/javascript/controllers/hello_controller.js
app/javascript/controllers/index.js

Usage

I will use the example code from the Stimuls website for the next section.

At the time of writing the code for the hello_controller.js file generated by the install process was not compatible with the example code from the website.

Change the file to the following contents.

    file
  

     # app/javascript/controllers/hello_controller.js

import { Controller } from "stimulus"

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

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}
  

In some view add the following example content.

    file
  

     # app/views/examples/index.html.erb

<!--HTML from anywhere-->
<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-hello-target="output">
  </span>
</div>
  

This will create an input like the below.

Type something in the box and press the Greet button.

If everything is setup correctly you will see some output next to the input box.

If not, open the inspector console in your browser and check for any errors.

Outro

In this post I covered the process of installing and using Stimulus JS in a Rails 6 application. Do you feel stimulated? I know I do!