How to run ActiveAdmin v4 without node and yarn installed?

[amkisko]

importmap-rails and propshaft do not require node and yarn to be installed, although cssbundling-rails requires.

Are there any options to patch ActiveAdmin to have no dependence on node/yarn?

References:

• https://github.com/activeadmin/activeadmin/blob/master/UPGRADING.md

[javierjulio]

Hi @amkisko. First and foremost, thank you for creating a discussion. This may be doable from some past experimenting so I will share my thoughts on how I think it could work but it's not something that the library will support. I know some others are interested in this as well.

You would have to use and customize tailwindcss-rails since it is designed for a single entrypoint file. You could install that gem and start copying it's tasks to work with the tailwind-active_admin.config.js file or if you aren't using Tailwind in your app, and only plan to do so with ActiveAdmin, then just update the files to work directly with the tailwindcss-rails defaults, assuming your application styles can live in a different named entrypoint file.

From there, you'll have to copy the plugin.js file to the root of your project and keep it up to date. Since you don't want to run Node, you will need that file locally because we provide some CSS through a Tailwind plugin and for the standalone CLI to run that plugin, it has to be relative/local. I've tried executing it from the gem path since it's included in the gem but it fails with an error. Then update your config to require the relative file require("./plugin") and it may work.

Resources:

• Deploying multiple stylesheets rails/tailwindcss-rails#151
• Standalone CLI: multiple inputs and outputs tailwindlabs/tailwindcss#7698
• What's the 2.0 strategy for including styles seen in engines? rails/tailwindcss-rails#108

[amkisko]

Thanks, sounds promising. First thought was if it is possible to use importmap-rails for fetching artefacts out from tailwindcss-rails... seems to be not that straight forward thing.

To me it seems that with ActiveAdmin v4 got strong requirement of node due to cssbundling-rails only, but previously it was possible to detach from node, using propshaft and importmap-rails for example. 🤔

Reasons to switch to Tailwind are quite clear.

[djolereject]

...

Would it be possible to get some kind of example app or at least more detailed solution? I'm trying to setup exactly this, but still struggling and can't quite make it work. What should we put in this config file, is there a need for another tailwind css file besides generated one and where from to call require plugin... I'm doing something wrong, but not sure what.
Thanks!

[henrikbjorn]

@amkisko @djolereject @javierjulio

This is what I did as part of my upgrade from ActiveAdmin 3.x to the latest 4.0 (beta.4).

I took inspiration in the tailwindcss-rails code and basically used the same pattern, which together with Procfile.dev makes my rails setup completely node less.

I think this also could be a good default for ActiveAdmin, since I think many are wanting to not have node installed when developing with Rails (dartsass-rails, tailwindcss-rails, mrml-rails are examples of this)

How to do it

1. I moved tailwind-active_admin.config.js into the config/ directory. Since the other config from tailwindcss-rails is there.
2. Changed the plugin require statement to require(${activeAdminPath}/plugin.js) since the code is in the gem anyways, and the path is already resolved. This way I don't need to maintain anything separately.
3. Then I ran bundle binstub tailwindcss so that I get a bin/tailwindcss bin script
4. Dumped the following into lib/tasks/active_admin.rb https://gist.github.com/henrikbjorn/cf9ab168bb6ff9195691d7add5cb7d1b It will hook into the precompile tasks (as tailwindcss-rails)
5. Into Procfile.dev add a line active_admin: bin/rails active_admin:watch.
6. 🥳

[henrikbjorn]

@amkisko Can't you just do something like:

ActiveAdmin.importmap.draw do
  # do the pin stuff here ?
end

Seems to be used in the partial

activeadmin/app/views/active_admin/_html_head.html.erb

Line 13 in 01d0156

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

[amkisko]

Yes, I saw this one and tried to hook into ActiveAdmin importmap without proper success. Probably it should be done in combination with javascript_import_module_tag "application" after javascript_importmap_tags. Resolved by fully copying javascript from ActiveAdmin and having custom importmap class.

[henrikbjorn]

@amkisko you should be able to just pin stuff into it there. No need for anything custom

[amkisko]

Works perfect! Thanks @henrikbjorn!

In views/active_admin/_html_head.html.erb:

<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>
<%= javascript_import_module_tag "application" %>

In config/initializers/active_admin.rb:

ActiveAdmin.importmap.draw do
  pin "@rails/actioncable", to: "actioncable.esm.js", preload: true
  pin "@rails/activestorage", to: "activestorage.esm.js", preload: true

  pin "@hotwired/turbo-rails", to: "turbo.js", preload: true
  pin "@hotwired/stimulus", to: "stimulus.js", preload: true
  pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

  pin "application", preload: true
  pin_all_from "app/assets/javascripts/controllers", under: "controllers"
end

ActiveAdmin.setup do |config|
  ...
end

[ryanckulp]

nice work @henrikbjorn ! just a couple things:

1. your docs (Step 4) should say lib/tasks/active_admin.rake vs .rb
2. the task itself is not super DRY and also does not take advantage of minification; slightly better gist here

thanks again!

[djolereject]

Thank for the detailed explanation!

[amkisko]

What is the suggestion on extending header and layout of ActiveAdmin v4?

That's what I been up to before:

module AdminPageLayoutOverride
  def build_page(*args)
    within super do
      render "active_admin/layout_additions"
    end
  end

  def build_active_admin_head
    within super do
      render "active_admin/header"
    end
  end
end

ActiveAdmin::Views::Pages::Base.prepend AdminPageLayoutOverride

[henrikbjorn]

Overwrite the partials that you can get from bin/rails g active_admin:views

[amkisko]

This thread might become a more general "migration to v4" topic.

I've got another one, that can't figure out how to fix, getting this for all resources except custom pages:

No route matches {:action=>"index", :controller=>"active_admin/users", :format=>:csv}

No route matches {:action=>"index", :controller=>"active_admin/user_metrics"}

[amkisko]

This one happens during migration from v3 to v4. Does not happen in the project started from scratch.

[amkisko]

This one is resolved, details here: #8279

[amkisko]

Also it was not really clear how main_app variable change affects the migration, basically I started using it everywhere for all routes paths, even this one:

# PATH: config/initializers/active_admin.rb
ActiveAdmin.setup do |config|
  ...
  config.logout_link_path = ->(*) { main_app.destroy_user_session_path }
  ...
end

[kirillplatonov]

It would be much easier if you just shipped bundled versions of active_admin.css. Having strict dependency on cssbundling-rails and tailwind to build CSS for third party library in the host app sounds weird. It will make adoption of new version harder. Personally, I very rarely have the need to customize ActiveAdmin CSS and I would rather add regular CSS classes when necessary.

Here's an example of how Avo solves it:
https://avohq.io/blog/how-to-bundle-assets-in-a-rails-engine

But it can be even simpler. Just a pre-commit hook that will run tailwind building and save the output into app/assets/stylesheets/active_admin.css.

[javierjulio]

@kirillplatonov it would not have been easier. From your perspective but not from the library's. There are more Rails asset management libraries now than before which means more possible combinations of them and others expect each to just work without much effort. That's difficult and time consuming to figure out how to get each implemented (e.g. you may not be familiar with some) and then also having each tested in an engine. It doesn't sound weird at all when you put yourself in the shoes of someone that actually has to do the work.

I've read their approach before I started working on v4 last year. I made a deliberate choice to not do that. Compiling the library CSS in advance is a bad choice as styles can clash with the parent app (ordering, colors, etc.). While you may not want to make changes, others do. The approach they shared works well for a library UI that you wouldn't need to make changes. If I recall right, the inspiration for that approach came from Sidekiq. In my research, GoodJob does something similar as well.

[amkisko]

@javierjulio what is the current support level for Turbo in ActiveAdmin? At least I have not seen any traces of usage here. One thing that does not properly work is form errors, there is a reply from server but HTML code from response is not applied to the current page, I've been experiencing such starting from v3. Have you seen such behaviour?

[amkisko]

Page not found, is that a private repo?

Ah, sorry, will make it public soon!

[amkisko]

Fixed, repo is now available for everyone.

[tagliala]

I can imagine that there are use cases for this, but I did not expect the following:

https://github.com/kiskolabs/activeadmin-demo/blob/b0641022af71b679f6435479f6c4bc0109ac092d/app/views/active_admin/_html_head.html.erb#L14

@javierjulio is it a good practice or common practice to include application javascript in active admin?

[amkisko]

I can rename it to custom_active_admin if that's critical. :)

[amkisko]

So I decided to go with <body data-turbo="false" for ActiveAdmin layout.