Tutorial: How to integrate Hotwire / Turbo / Stimulus in AAv4 #8694

vfonic · 2025-04-30T03:43:13Z

vfonic
Apr 30, 2025

In app/views/active_admin/_html_head.html.erb:

-<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>
+<%= javascript_importmap_tags %>

Load ActiveAdmin, Turbo and Stimulus through importmaps:

Here's an example `config/importmap.rb`:

# Pin npm packages by running ./bin/importmap

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"

pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js" # @2.5.2
pin "@stimulus-components/auto-submit", to: "@stimulus-components--auto-submit.js" # @6.0.0
pin "@activeadmin/activeadmin", to: "@activeadmin--activeadmin.js" # @4.0.0
pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.400

pin "stimulus-datepicker" # @1.0.9
pin "flowbite-datepicker" # @1.3.1

Most of these files are in vendor/javascript, added by running bin/importmap pin @stimulus-components/auto-submit or similar.
turbo.min.jsandstimulus-loading.jsare part ofturbo-rails gem (I believe).
Flowbite is loaded as recommened by Flowbite docs for Rails/importmaps: https://flowbite.com/docs/getting-started/rails/

Add this line to your config/application.rb:

config.importmap.paths << ActiveAdmin::Engine.root.join("config", "importmap.rb")

Update your app/javascript/application.js:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

import "active_admin";
import "@hotwired/turbo-rails";
import "controllers";

If you use this, please comment here.

Feel free to post any questions and comments.

tagliala · 2025-04-30T07:38:44Z

tagliala
Apr 30, 2025
Maintainer

Hello, is this a replacement of #8573?

10 replies

vfonic Apr 30, 2025
Author

As a reference, there is a mention to activeadmin here: rails/importmap-rails#279

Would that help?

I think it would!

I noticed that, by following my instructions above to separate admin and application importmaps, the <%= javascript_importmap_tags %> or <%= javascript_importmap_tags "admin" %> always output the entire config/importmap.rb mapping:

Output

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "flowbite": "https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js",
    "@rails/ujs": "/assets/@rails--ujs-7bfe798b.js",
    "active_admin": "/assets/active_admin-1f4b319c.js",
    "controllers/hw_combobox_controller": "/assets/hotwire_combobox.esm-51aa78e9.js",
    "application": "/assets/application-c8a17222.js",
    "admin": "/assets/admin-f3a1e1e0.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-1262d735.js",
    "@hotwired/stimulus": "/assets/@hotwired--stimulus-132cbc23.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
    "@stimulus-components/auto-submit": "/assets/@stimulus-components--auto-submit-6fcf2e50.js",
    "@activeadmin/activeadmin": "/assets/@activeadmin--activeadmin-bed5bb29.js",
    "stimulus-datepicker": "/assets/stimulus-datepicker-bb618857.js",
    "flowbite-datepicker": "/assets/flowbite-datepicker-cf5b6ca8.js",
    "active_admin/features/batch_actions": "/assets/active_admin/features/batch_actions-1d7f386b.js",
    "active_admin/features/dark_mode_toggle": "/assets/active_admin/features/dark_mode_toggle-184c54d4.js",
    "active_admin/features/filters": "/assets/active_admin/features/filters-6c101f9e.js",
    "active_admin/features/has_many": "/assets/active_admin/features/has_many-2ade3ece.js",
    "active_admin/features/main_menu": "/assets/active_admin/features/main_menu-f6d05848.js",
    "active_admin/features/per_page": "/assets/active_admin/features/per_page-375aaac7.js",
    "active_admin/utils/dom": "/assets/active_admin/utils/dom-fd0d5978.js",
    "controllers/application": "/assets/controllers/application-3f3d5175.js",
    "controllers": "/assets/controllers/index-5a48c1ca.js",
    "controllers/map_controller": "/assets/controllers/map_controller-473b4762.js"
  }
}</script>
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js">
<link rel="modulepreload" href="/assets/@rails--ujs-7bfe798b.js">
<link rel="modulepreload" href="/assets/active_admin-1f4b319c.js">
<link rel="modulepreload" href="/assets/hotwire_combobox.esm-51aa78e9.js">
<link rel="modulepreload" href="/assets/application-c8a17222.js">
<link rel="modulepreload" href="/assets/admin-f3a1e1e0.js">
<link rel="modulepreload" href="/assets/turbo.min-1262d735.js">
<link rel="modulepreload" href="/assets/@hotwired--stimulus-132cbc23.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
<link rel="modulepreload" href="/assets/@stimulus-components--auto-submit-6fcf2e50.js">
<link rel="modulepreload" href="/assets/@activeadmin--activeadmin-bed5bb29.js">
<link rel="modulepreload" href="/assets/stimulus-datepicker-bb618857.js">
<link rel="modulepreload" href="/assets/flowbite-datepicker-cf5b6ca8.js">
<link rel="modulepreload" href="/assets/active_admin/features/batch_actions-1d7f386b.js">
<link rel="modulepreload" href="/assets/active_admin/features/dark_mode_toggle-184c54d4.js">
<link rel="modulepreload" href="/assets/active_admin/features/filters-6c101f9e.js">
<link rel="modulepreload" href="/assets/active_admin/features/has_many-2ade3ece.js">
<link rel="modulepreload" href="/assets/active_admin/features/main_menu-f6d05848.js">
<link rel="modulepreload" href="/assets/active_admin/features/per_page-375aaac7.js">
<link rel="modulepreload" href="/assets/active_admin/utils/dom-fd0d5978.js">
<link rel="modulepreload" href="/assets/controllers/application-3f3d5175.js">
<link rel="modulepreload" href="/assets/controllers/index-5a48c1ca.js">
<link rel="modulepreload" href="/assets/controllers/map_controller-473b4762.js">
<script type="module">import "admin"</script>

The only thing that changes is that last line:

-<script type="module">import "admin"</script>
+<script type="module">import "application"</script>

It's leaking the list of JS files/libraries that are being used in the admin to the frontend. What's worse, it also instructs the browser to preload all of these files and so browsers download them even if they don't need/use it.
Maybe with the PR to allow multiple importmaps we could have this properly separated and working well.

vfonic Apr 30, 2025
Author

@thisismydesign do you have any examples of what exactly breaks when you connect ActiveAdmin and Turbo? I haven't had any issues so far.

thisismydesign Apr 30, 2025

@vfonic It's the issue you opened: #8573 it's an interaction between flwobite and turbo, so it might be flowbite, but IMO it should work out of the box. And there's this: #8603 (might be fixed already, didn't test yet)

tagliala Apr 30, 2025
Maintainer

Reference for flowbite: themesberg/flowbite#796

Semi-OT

I'm currently attempting to use flowbite on the front-end of an application, but I've noticed that there is a lot of improvement in the JavaScript part of that library (I'm not a JavaScript developer).

I noticed that it is exposing object to window and adds turbo events to deal with

I also have issues with tree-shaking, it looks like it's all or nothing because of the requires in initFlowbite

This is my implementation to remove some of the features I don't need from the output build, but I'm thinking to move the javascript part to stimulus controllers

For this reason too, I would advise not to mix active admin assets with application assets (especially the opposite)

import Dismiss from 'flowbite/lib/esm/components/dismiss'
import Dropdown from 'flowbite/lib/esm/components/dropdown'
import Modal from 'flowbite/lib/esm/components/modal'
import Tooltip from 'flowbite/lib/esm/components/tooltip'

// Turbo patch, vendored from flowbite/lib/esm/index.js
// Ref: themesberg/flowbite#796
import Events from 'flowbite/lib/esm/dom/events'
const afterRenderEvent = new Event('turbo:after-stream-render')
const initFlowbite = function () {
  window.initDismisses()
  window.initDropdowns()
  window.initModals()
  window.initTooltips()
}
window.addEventListener('turbo:before-stream-render', function (event) {
  const originalRender = event.detail.render
  event.detail.render = function (streamElement) {
    originalRender(streamElement)
    window.dispatchEvent(afterRenderEvent)
  }
})
const turboLoadEvents = new Events('turbo:load', [initFlowbite])
turboLoadEvents.init()
const turboFrameLoadEvents = new Events('turbo:frame-load', [initFlowbite])
turboFrameLoadEvents.init()
const turboStreamLoadEvents = new Events('turbo:after-stream-render', [
  initFlowbite,
])
turboStreamLoadEvents.init()

export {
  Dismiss,
  Dropdown,
  Modal,
  Tooltip
}

vfonic Apr 30, 2025
Author

The issue I had is fixed by using "Turbo" version of Flowbite JS (as per their documentation):
https://flowbite.com/docs/getting-started/rails/

pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.turbo.min.js" # @2.5.2

And, I just checked the validation issue

Seems to be fixed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Tutorial: How to integrate Hotwire / Turbo / Stimulus in AAv4 #8694

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 10 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Tutorial: How to integrate Hotwire / Turbo / Stimulus in AAv4 #8694

Uh oh!

vfonic Apr 30, 2025

Replies: 1 comment · 10 replies

Uh oh!

tagliala Apr 30, 2025 Maintainer

Uh oh!

vfonic Apr 30, 2025 Author

Uh oh!

vfonic Apr 30, 2025 Author

Uh oh!

thisismydesign Apr 30, 2025

Uh oh!

Uh oh!

tagliala Apr 30, 2025 Maintainer

Semi-OT

Uh oh!

vfonic Apr 30, 2025 Author

vfonic
Apr 30, 2025

Replies: 1 comment 10 replies

tagliala
Apr 30, 2025
Maintainer

vfonic Apr 30, 2025
Author

vfonic Apr 30, 2025
Author

tagliala Apr 30, 2025
Maintainer

vfonic Apr 30, 2025
Author