ActiveAdmin v4 how to add custom JS via importmaps

Question

ActiveAdmin v4 supports importmaps.

How can I add custom JS to ActiveAdmin via importmaps?

E.g. https://github.com/ankane/chartkick as asked on GitHub

Answer 1

The following solution is from: https://github.com/activeadmin/activeadmin/discussions/8346#discussioncomment-10131266

It merges Rails and ActiveAdmin importmap config that was previously separate. Extending the ActiveAdmin config is also possible (see below) but it breaks some functionality.

config/application.rb

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

config/importmap.rb

pin 'chartkick', to: 'chartkick.js'
pin 'Chart.bundle', to: 'Chart.bundle.js'

app/javascripts/application.js

import 'active_admin'

import "chartkick"
import "Chart.bundle"

Eject ActiveAdmin views via bin/rails g active_admin:views.

Replace ActiveAdmin JS import tag in app/views/active_admin/_html_head.html.erb with:

<%= javascript_importmap_tags %>

The other views can be removed.

Old solution

This works for adding packages, but when making changes to JS files the whole server would need to be restarted.

ActiveAdmin v4 has its own layout and importmap separate from the app's default config/importmap.rb and app/javascript/application.js.

Edit ActiveAdmin's importmap in config/initializers/active_admin.rb:

ActiveAdmin.importmap.draw do
  pin 'chartkick', to: 'chartkick.js'
  pin 'Chart.bundle', to: 'Chart.bundle.js'

  pin 'active_admin_custom', to: 'active_admin_custom.js'
end

Restart rails when AA's importmap is modified.

Create your own app/javascript/active_admin_custom.js (which will function like a custom application.js for ActiveAdmin):

import "chartkick"
import "Chart.bundle"

Eject ActiveAdmin views via bin/rails g active_admin:views.

Add JS import tag to app/views/active_admin/_html_head.html.erb:

<%= javascript_import_module_tag "active_admin_custom" %>

The other views can be removed.

---

Resources

• ActiveAdmin's importmap: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/config/importmap.rb
• ActiveAdmin's application.js: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/app/javascript/active_admin.js
• HTML head template: https://github.com/activeadmin/activeadmin/blob/cd0891dab20d375928f82300c863bc2f551fa0ef/app/views/active_admin/_html_head.html.erb