hotwired / stimulus

A modest JavaScript framework for the HTML you already have
https://stimulus.hotwired.dev/
MIT License
12.55k stars 420 forks source link

Non easy start #157

Closed lucfranken closed 6 years ago

lucfranken commented 6 years ago

Example of my experience trying this for the first time, written as a beginner to see if we can find improvements:

But I got dragged into: https://stimulusjs.org/handbook/installing and other manuals and encounter:

Stimulus integrates with the webpack asset packager to automatically load controller files from a folder in your app.

add the stimulus npm package to your JavaScript bundle

(Note that the stimulus-starter project uses the Yarn package manager for dependency management, so make sure you have that installed first.)

Some code I really have no clue of why it's needed:

// src/application.js
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

It's using paths like /src which seem familiar with React, coming from a Rails project they don't make sense.

It feels like it does not optimally support the nagging sense:

If, on the other hand, you have nagging sense that what you’re working on does not warrant the intense complexity and application separation such contemporary techniques imply, then you’re likely to find refuge in our approach. https://stimulusjs.org/handbook/origin

I don't know whether I want NPM or Yarn, or how they mix. I don't want to understand how controllers are loaded. I want to add some javascript feature like the example at the homepage: https://stimulusjs.org

Wouldn't it be possible to give the installation experience a more Rails like experience?


After a quite long time I found the Discourse forum via one of the issues. There seem to be more people experiencing this at first:

https://discourse.stimulusjs.org/t/organize-controllers-in-rails-app-without-webpacker/224 https://discourse.stimulusjs.org/t/work-with-rails/43

adrienpoly commented 6 years ago

well to install stimulus in rails you can use the official installer

https://github.com/rails/webpacker#stimulus

for a new app rails new myapp --webpack=stimulus

or

to add it to an existing app rails webpacker:install:stimulus

While it is well documented in webpacker a link in the handbook would be nice

lucfranken commented 6 years ago

@adrienpoly Thanks for the link and command! That did it!

The steps I took:

I run:

rails webpacker:install:stimulus

I get error:

rails webpacker:install:stimulus
rails aborted!
Don't know how to build task 'webpacker:install:stimulus' (see --tasks)

What I needed to do:

Add this to Gemfile:

gem 'webpacker', '~> 3.5'

Then:

bundle install

Then I got error:


rails webpacker:install:stimulus
Webpacker requires Yarn >= 0.25.2 and you are using 0.22.0
Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/
MacBook:myapp lucfranken$ bundle install

Then I go to: https://yarnpkg.com/lang/en/docs/install/ with a complicated story but luckily I had brew installed. So I run:

brew install yarn

That one fails too:

Error: yarn 0.22.0 is already installed
To upgrade to 1.6.0, run `brew upgrade yarn`

Then I run:

brew upgrade yarn

Then I run again:

rails webpacker:install:stimulus

Fails:

webpack binstubs not found.
Have you run rails webpacker:install ?
Make sure the bin directory or binstubs are not included in .gitignore
Exiting!

So I run:

rails webpacker:install

Then I run again:

rails webpacker:install:stimulus

schermafbeelding 2018-05-18 om 11 50 07

πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰ πŸŽ‰

I then manually added this into application.html.erb layout:

<%= javascript_pack_tag 'application' %>

See, it doesn't really feel as smooth as installing Rails things. Hopefully this may become more easy in the future. I think for sure that the manual of Stimulus needs to have a clear direction towards your command:

rails webpacker:install:stimulus

Which is essentially the correct installation command but is missing.

ocarreterom commented 6 years ago

@lucfranken

All in the same page.

  1. https://github.com/rails/webpacker#prerequisites
    • Yarn 0.25.2+
  2. https://github.com/rails/webpacker#installation
    • gem 'webpacker', '~> 3.5'
    • bundle
    • bundle exec rails webpacker:install
  3. https://github.com/rails/webpacker#stimulus
    • bundle exec rails webpacker:install:stimulus
javan commented 6 years ago

Thanks for the feedback! Feel free to start a new thread on https://discourse.stimulusjs.org/ if there's more to discuss.

lucfranken commented 6 years ago

@javan Thanks! Is this process something which your team would like improvement on? Or is it ok in current state for you and your team? Asking because the issue is closed, it's not totally clear for me whether improvement is desired here.