Installing Stimulus

Stimulus is one of the frameworks Webpacker is aware of, and, because of that, there’s a default path to installation within our Rails app.

The first thing we are going to do to install Stimulus is remove application/javascript/src and reset application/javascript/packs/application.ts back to its original application/javascript/packs/application.js form (the Stimulus installer expects it there). Then, we’re going to use Webpacker’s installer to add Stimulus:

$ bundle exec rails webpacker:install:stimulus

Here’s what the Stimulus installer does for us:

• The installer adds stimulus as a package to the package.json file.
• It appends the line import controllers to the application.js file.
• It adds the directory, app/javascript/controllers.
• In that directory is the file, app/javascript/controllers/index.js, which includes information on auto loading the Stimulus code we’re going to write. We’re going to leave it alone for the moment.
• It also adds a sample file, called app/javascript/controllers/hello_controller.js.

This chapter uses Stimulus 2.0, which has not yet been released as of this writing. So, in order to use the pre-release version of Stimulus, you need to change the stimulus entry in the package.json file to this (the long URL needs to be all on one line):

"stimulus": "https://github.com/stimulusjs/dev-builds/archive/b8cc8c4/stimulus.tar.gz"

There’s a discussion on GitHub that you can look at for more details.

Please note that there must be an app/javascript/packs/application.js file or the installation will fail. This is a bug in the installer. Maybe it will be fixed by the time you read this. In the meantime, we temporarily renamed application.ts then named it back.

In order to prep for using TypeScript with Stimulus and to write our own code, you need to do two things:

• Delete the sample file at app/javascript/controllers/hello_controller.js. We don’t need it.
• In the app/javascript/controllers/index.js file, you’ll see the following on line 8:

const context = require.context("controllers", true, /_controller\.js$/)

Change it to:

const context = require.context("controllers", true, /_controller\.ts$/)

This allows Stimulus to see our TypeScript controllers.

Leaving things alone
We’re leaving the index.js file itself in JavaScript rather than converting it to TypeScript for the moment. We will come back to it in an upcoming installation lesson.