Integrating Stimulus with Ruby on Rails - Getting Started

[hotwired]

Integrating Stimulus with Ruby on Rails - Getting Started

[Johnsalzarulo]

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

Totally what I needed to get things up and running!

Thanks again.

[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.

[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 😢 😭

[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

[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.

[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?

[Paxa]

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

[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.

[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. 💩

[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

[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

[mufid]

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

[taskindrp]

@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

Hi, how to do you solve the autoloading the controllers?

[bitterloa]

Hi, how to do you solve the autoloading the controllers?

Hello, I'm unsure which controllers you are referring to here? I should mention that in recent projects I have moved on from using ParcelJS, which worked excellently for me for a couple of years, and now use Vite to compile my ES6 because I build apps using Vue 3.x -- at the time of the posting ParcelJS was a solid and easy solution but over the past few years Vite is now a great and simplest solution I've found (for Vue projects)

[taskindrp]

Hi, how to do you solve the autoloading the controllers?

Hello, I'm unsure which controllers you are referring to here? I should mention that in recent projects I have moved on from using ParcelJS, which worked excellently for me for a couple of years, and now use Vite to compile my ES6 because I build apps using Vue 3.x -- at the time of the posting ParcelJS was a solid and easy solution but over the past few years Vite is now a great and simplest solution I've found (for Vue projects)

referring to stimulus controller, let's say I have a following folder structure:

- components
- - Header
- - - header_controller.js
- - Footer
- - - footer_controller.js

I want to able to autoload all this controllers, how to achieve this?

[bitterloa]

@taskindrp -- I would not use autoloading at all. From what I can tell all the "autoloading" is doing is scanning directories and loading in all files with a *.js extension. This to me is completely unnecessary and when things break it is more difficult to troubleshoot. Also, you have no idea what order the js files will get loaded into the app (as far as I can tell).

To me it is much better to import all your files into your main.js so that you have an explicit list of exactly what files you are loading, and then register each controller with Stimulus -- this way you see exactly what you are importing and have control over the order. I've never used "autoloading" for any of my Stimulus, VueJS or Angular projects.

Something like this:
https://stimulus.hotwired.dev/handbook/installing#using-other-build-systems

// src/application.js
import { Application } from "@hotwired/stimulus"

import HeaderController from "./components/header/header_controller"
import FooterController from "./components/footer/footer_controller"

window.Stimulus = Application.start()

Stimulus.register("header", HeaderController)
Stimulus.register("footer", FooterController)

This way is better than autoloading in my opinion and is less confusing -- we are explicitly importing, then registering each controller separately. It is how I do all of my JS production projects across multiple languages and versions.