Rails 6, Hot-wire with Asset Pipeline, Bootstrap5

1

When starting a new rails app with “rails new myapp --skip-javascript” and then adding the hotwire-rails gem and running “rails hotwire:install” how do I go about adding additional libraries such as Bootstrap etc?

Had a bit of a play but could not seem to get it working and wondered if anyone had any pointers?

1 Like
2

Currently, you have to download the ESM versions yourself, and then put them in app/assets/javascripts/mylib@1.0.0.js, which then allows you to reference it with import “mylib” in your controllers. Skypack is a good place to start to find the ESM version of your lib.

2 Likes
3

@Lee_Irving can you post an working example? I’m struggling with this, thanks.

4

Same here, I installed stimulus-rails gem and ran rails stimulus:install and it works great. But when I try to use other stimulus packages from skypack.dev it doesn’t work.

e.g. I added import stimulusClipboard from 'https://cdn.skypack.dev/stimulus-clipboard' in my app/assets/javascripts/controllers/index.js and then application.register("clipboard", stimulusClipboard).

But in my browser all I get is

Failed to autoload controller: clipboard Error: Unable to resolve specifier 'clipboard_controller' from http://localhost:3000/assets/stimulus/loaders/autoloader-01d…44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js
    throwUnresolved http://localhost:3000/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:472
    resolve http://localhost:3000/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:468
    importShim$1 http://localhost:3000/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:267
    loadController http://localhost:3000/assets/stimulus/loaders/autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js:20
    autoloadControllersWithin http://localhost:3000/assets/stimulus/loaders/autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js:8
    <anonymous> http://localhost:3000/assets/stimulus/loaders/autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js:52
autoloader-01d569d44d079bc65e1e6a36c9401b867e5c6da36c577cea65f7fd3082d039ac.js:22:29

Any help for a working example is much appreciated.

I also don’t know how to “download the ESM version yourself” from skypack.dev. Is there some kind of save/export functionality? When loading https://cdn.skypack.dev/stimulus-clipboard in my browser it just includes links to the actual code.

@dhh have you used an ESM module directly from skypack or downloaded it into your libraries folder? Wondering if you had some example code around.

2 Likes
6

I’ve not managed to get something running as yet. Work commitments meant I had to go back to the tried and tested methods for now.

7

@dhh could you illustrate how this would work with activestorage.js for example?

1 Like
8

FWIW I ended up importing directly from the skypack cdn which does work but I would like to understand how to autoload ES6 modules properly per @dhh original answer.

// app/assets/javascripts/controllers/my_controller.js

import { DirectUpload } from 'https://cdn.skypack.dev/@rails/activestorage';

Perhaps the non-loading of this module is the reason @dhh’s solution doesn’t work for me?

A preload for 'http://localhost:3000/assets/stimulus/libraries/es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

hotwire-rails (0.1.3), vanilla app created with no-javascript flag per tutorial

9

You can still globally require like so:

  • save ‘my_lib.min.js’ to app/assets/javascripts
  • add application.js file in same folder and and require //= require my_lib
  • in “config/initializers/assets.rb” Rails.application.config.assets.precompile += %w(application.js)
    my_lib will be available in controllers.
10

I’m currently searching for the best practice answer to requiring activestorage.js with the asset pipeline as well because the vanilla install doesn’t create an application.js! I know I could create one and include it but I’m wondering if there isn’t a better recommended way.

No webpack, no skypack.

  1. Create the /app/assets/javascripts/application.js file just to //= require activestorage?
  2. Include an application_controller stimulus controller that includes and starts activestorage?
  3. Create a stimulus controller just to be attached to an input needing direct upload and check that active storage is started?

Any opinions gladly appreciated.