Stimulus: Integrating Stimulus with Ruby on Rails - Getting Started

[Johnsalzarulo]

A humble hello to whoever may be reading this. I can't tell you how excited I am for this framework. As an independent rails developer sprinkles of JS turn to spaghetti really quickly, this seems perfect.

My question:

Where does the Stimulus team recommend as best practice to put the JS controller files? For example, if I wanted to integrate a version of this walkthrough into an existing rails app.

I've spent the last hour + trying to integrate Stimulus into a demo rails 5 app and I can't seem to get things wired up. I get the initializing Content Script message listener in my console but I can't seem to make the controller actions fire. I think it's because I'm not putting these controllers in the right place?

Thanks so much any help is greatly appreciated.

[dixpac]

@Johnsalzarulo I'm not Stimulus team but I will try to help you :)

To get Stimulus working with Rails I would recommend using Rails webpacker gem(you get this out of the box in rails >=5.1).

Hook up everything following these steps:

• Install stimulus with yarn add stimulus

• Setup stimulus inside app/javascripts/packs/application.js

import { Application } from "stimulus"
import { autoload } from "stimulus/webpack-helpers"

// Look for controllers inside app/javascripts/packs/controllers/
const application = Application.start()
const controllers = require.context("./controllers", true, /\.js$/)
autoload(controllers, application)

• Link JavaScript packs in Rails view with <%= javascript_pack_tag 'application' %>, and you're good to go :)

_An alternate option would be to use Rails asset pipeline(sprockets), as you do for any other vendor js, but then you lose the ES6/webpack niceties_ 😢 😭

[pacMakaveli]

@Johnsalzarulo if it helps, this is my personal project where I have Rails 5.1.4 along with webpacker, react and stimulus. I also have a fully working 'real-life' use of Stimulus.

https://github.com/games-directory/games.directory/tree/v2.0-beta1

An example: view, another view with the same JS controller and the JavaScript controller.

Feel free to have a look and ask any questions if you have any! I'll be more than happy to help.

I've spent the last hour + trying to integrate Stimulus into a demo rails 5 app and I can't seem to get things wired up. I get the initializing Content Script message listener in my console but I can't seem to make the controller actions fire. I think it's because I'm not putting these controllers in the right place?

Might be because you're not declaring the controller that Stimulus needs to use in order to fire your click action. At least that was my issue when I stumbled over a similar problem like you described.

[Johnsalzarulo]

Thank you! @pacMakaveli and @dixpac you guys are awesome.

Totally what I needed to get things up and running!

Thanks again.

[justinperkins]

Are we moving away from the asset pipeline and putting everything into webpack now? Or are we going hybrid? Would be cool to see some more definitive stuff here rather than hello worlds

[bbugh]

@justinperkins The asset pipeline in Sprockets 4 doesn't support ES6 in a conventional way. In order to use ES6 with Sprockets 4, you have to name all your JavaScript files with .es6 as the file extension, which causes all kinds of problems - editor tools don't work, third party libraries don't work, etc. Sprockets is a dead end for modern JavaScript development. I put in some effort (rails/sprockets#460) to change that, but couldn't get the necessary support from the project managers. It's webpack or bust, now. 💩

[mufid]

If you need an example, i think this is pretty good: https://github.com/gorails-screencasts/gorails-episode-225

[Paxa]

I made a gem for integrating with rails and sprockets https://github.com/Paxa/stimulus-rails

[bitterloa]

Just wanted to add my 2 cents about using ES6 with Rails -- I've spent many hours working with both regular webpack, and webpacker gem in Rails. In a recent project I completely disabled webpacker and started using ParcelJS which is a webpack alternative that I've found to be much simpler and also a lot faster than webpack. I feel like the Rails team was strong-armed into creating webpacker gem since Sprockets doesn't support ES6, but webpack is just a mess in my opinion. I mean, the whole JS compiler scene is kind of a mess in my opinion so I'm always looking for a simpler/easier solution so I spend more time developing and less time troubleshooting js build issues. I highly recommend trying out ParcelJs over both webpack or the webpacker gem...we've got to get back to keeping things simple.

[celesteking]

stimulusjs comes from Rails team yet there's nothing in https://stimulusjs.org/handbook/installing on installing it on Rails. This is bullshit. Either stick to your values or ditch them. There's nothing about webpack on https://edgeguides.rubyonrails.org/asset_pipeline.html page. Again, you should pick a strategy and hold onto it.

[bitterloa]

@celesteking I don't think your comment is correct in that I don't think it's up to the Rails team to talk about installing StimulusJs. However I totally feel your frustration -- using any of the newer Javascript frameworks that use ES6 requires you choose some kind of Javascript builder:

Rails team already provides plenty of tutorials on setting up and using webpack, and/or Rail's 'version' of webpacker -- _however_ I want to reiterate here -- I have had much more success and simplicity setting up ParcelJs in multiple rails projects. I highly recommend ignoring anything webpack-related right now and at least trying out ParcelJS along with Yarn for managing node packages.

The whole JS scene sucks right now. If you're confused it's because damn near everyone is. But in my humble opinion, using StimulusJS and compiling it with ParcelJs is the easiest way to go. Best of luck!

FYI, i setup Stimulus using Parcel following the "Using Other Build Systems" method--ParcelJs being that "other build system" (i.e. other than wack ass webpack :-)
https://stimulusjs.org/handbook/installing#using-other-build-systems

Setup of Parcel:
https://parceljs.org/getting_started.html

[skyksandr]

@celesteking you're completely wrong.
No one of the main contributors is in the Rails core team.
Webpack integration is managed by webpacker, not by assets pipeline so you'd better to figure it out here https://github.com/rails/webpacker
Once you made your webpack up and running simply invoke bundle exec rails webpacker:install:stimulus

And last, don't be that offensive. From your comment, it looks like you paid these guys couple of millions $ and completely dissatisfied with the result, but did you bought them a coffee? Or said Thank you?

[gbirchmeier]

I'm also stunned that the docs don't just give us a simple Rails-install command sequence, especially given that (from the Github readme):

Stimulus is MIT-licensed open-source software from Basecamp, the creators of Ruby on Rails.

The maintainers are obviously very experienced with Rails. No doubt they are quite versed in using Stim with Rails. Why not doc the install for it?

And it turns out to be so easy! Literally this is all I needed to do (for Rails 6):

bundle exec rails webpacker:install:stimulus

From there, it was very easy to add a quick view and get a working HelloController demo (from stimulusjs.org home page) on my existing project.

EDIT: Documented this in a StackOverflow post