But I don't know how to deal with active_admin.js and my custom scss files.
I am new to esbuild.

Hi

⚠️ Disclaimer: I'm not a JavaScript developer

I switched back to webpacker for the moment, because I can see that Active Adminis using jQuery UI and this library does not play well with esbuild by default

I think this resource could be helpful:https://gorails.com/episodes/how-to-use-jquery-with-esbuild

It requires to download custom assets from jquery-ui and I'm not comfortable in doing that

Slightly refers to#7226

I did some progress, everything is not tested but It is really promising.

The goal is to compile inapp/assets/builds

• two CSS files
  • application.css for my web app and build with tailwindcss
  • active_admin.css build with sass compiler
• two js files
  • application.js for my web app
  • active_admin.js

Files tree

• app
  • assets
    • builds
    • config
      • manifest.js
    • stylesheets
      • active_admin.scss
      • application.tailwind.css
  • javascript
    • controllers
      • application.js
      • index.js
    • active_admin.js
    • application.js

1/ In package.json, I have

..."scripts": {    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css && sass ./app/assets/stylesheets/active_admin.scss ./app/assets/builds/active_admin.css --no-source-map --load-path=node_modules",}...

application.tailwind.css: I regroup all my CSS this file

@tailwind base;@tailwind components;@tailwind utilities;// overriding default @layer base {    h1 { @apply ...}    h2 { @apply ...}}@layer components {    .red_button { @apply whitespace-nowrap ... }}

active_admin.scss

@import "@activeadmin/activeadmin/src/scss/mixins";@import "@activeadmin/activeadmin/src/scss/base";// my custom css.yes {  background-color: #c3d4ab;}

active_admin.js

import "@activeadmin/activeadmin";

I wanted to get this working with rails 7 and esbuild and took the nuclear option 😅

1. Generate the final active_admin.js and active_admin.css in a new app.
2. Copy the generated files to the original app under app/assets/activeadmin
3. Fork activeadmin and remove dependency on jquery-rails and remove app/assets, app/javascript and vendor/assets
4. Use the fork in the app

And it works!

It might have been possible to make it work withhttps://github.com/excid3/esbuild-rails but jquery-ui needs a custom build.

If activeadmin can publish a gem with assets precompiled, it will be much easier to use.

I have a similar issue, although it is entangled with my limited understanding of the new Rails 7 css and js options. I created a new Rails 7 app with--tailwind, and thusly havetailwindcss-rails in myGemfile. Now, thanks to the works of the developers on the recent Rails 7 PR, I have addedactiveadmin using themaster branch to myGemfile.

After installing and visiting/admin, I am greeted withThe asset 'active_admin.css' was not found in the load path. fromraise Propshaft::MissingAssetError.new(logical_path). Not sure where to go from here, or if I need to replace my tailwind install with one of the other css bundling options.

I successfully manage to installactive_admin withvite_ruby (ViteJS):

To handle theundefined method assets while runningrake activeadmin:install, I temporary installedgem 'propshaft'. Later the gem is not needed.

I've added the following snippet to mimic Webpacker methods theconfig/initializers/active_admin.rb:

module ActiveAdminViteJS  def stylesheet_pack_tag(style, **options)    style = 'active_admin.scss' if style == 'active_admin.css'    vite_stylesheet_tag(style, **options)  end  def javascript_pack_tag(script, **options)    vite_javascript_tag(script, **options)  endendActiveAdmin::Views::Pages::Base.include ActiveAdminViteJS

Ensure you haveconfig.use_webpacker = true in the config.

app/frontend/entrypoints/active_admin.js:

import '../jquery'import 'jquery-ui'import 'jquery-ui/ui/widgets/mouse'import '@activeadmin/activeadmin'

app/frontend/entrypoints/active_admin.scss:

@import "@activeadmin/activeadmin/src/scss/mixins";@import "@activeadmin/activeadmin/src/scss/base";

app/frontend/jquery.js:

import $ from 'jquery'window.jQuery = window.$ = $

No issues so far, but I guess jquery-ui components would require explicit importing

Hi guys, sorry to resurrect this discussion but while this solution works like a charminside Active Admin, I can't seem to get the sign in page working. I keep getting the following error:

ActionView::Template::Error (Shakapacker can't find active_admin.css in /Users/.../public/packs/manifest.json. Possible causes:...Your manifest contains:{}

I already removed most of the webpacker files and configs, but I can't seem to find the place to make this particular page working, which means I can't log in to Active Admin at all.

Any help would be greatly appreciated!

Hi all, I've been back to this url several times in the last week, I wanted to report on my progress and what i think is a tenable solution for my needs. I started with the snippets from@guillaumebesseup there☝️ . This was perfect to get me css / scss compiling and get me on the right track but as soon as i added inline forms that required javascript (has_many, nested attributes) is when I noticed the javascript was not getting built.

active_admin.js

import"@activeadmin/activeadmin";

issue: web conole reports

Uncaught SyntaxError: Cannot use import statement outside a module

solution (I think): declare the build to be a module inpackage.json

"module":"true","dependencies": {"@activeadmin/activeadmin":"^3.0.0",...

Issue: jquery is not defined:
solution:import statements hoist variables so you have to force jquery to be defined and added to the window in a separate file

app/javascripts/add_jquery.js

importjqueryfrom'jquery';window.jquery=jquery;// i mean why not?!window.jQuery=jquery;// jquery ui is looking for this onewindow.$=jquery;// activeadmin wants this one

application.js

import"./add_jquery"// forces hoisting to behaveimport'./jquery-ui'// jQuery is now definedimport"@activeadmin/activeadmin";

Final issue, jQuery UI when loaded from node_modules has a ton of load dependencies outside the initial widget.js, as you can see from the above import, I vendored jquery-ui instead of using it from the node modules. you can download the full version from the website. I finally came acrossthis video which ended up being really useful to get that final step.

% tree app/javascript app/javascript├── active_admin.js├── add_jquery.js├── application.js├── controllers│   ├── application.js│   ├── hello_controller.js│   └── index.js└── jquery-ui.js

Like often, javascript has taken hours off of my life, but I'm super grateful to not be in the business of building forms, so thanks ActiveAdmin folks. Hopefully this helps streamline the process for others on Rails 7 and esbuild.

I'm not sure if this is necessarily still an issue for people but i was able to get this resolved with two steps. This seems to be acceptable considering the new propshaft asset model handling:

Roughly: transpile with dartsass-rails. That means running the set up for dartsass-rails and then i added a build step inProcfile.dev foradmin_css

admin_css: bin/rails dartsass:watch

My initializer fordartsass-rails looks like the following:

# config/initializers/dartsass.rbRails.application.config.dartsass.builds = {  "#{Rails.root}/vendor/assets/stylesheets/active_admin.scss" => "#{Rails.root}/vendor/assets/builds/active_admin.css"}

You should do the above to make sure that your application css won't get clobbered by active_admin css. nothing else is really needed, propshaft will deliver the correct asset once it's transpiled for active admin css to use because active admin is using stylesheet_link_tag i believe

Then in the active_admin initializer you need to add this configuration:

 # clear any previous assets  config.clear_javascripts!  # We need jQuery and jQuery UI and jQuery-ujs which are dependencies  config.register_javascript "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"  config.register_javascript "https://cdn.jsdelivr.net/npm/jquery-ujs@1.2.3/src/rails.min.js"  config.register_javascript "https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"  # The actual active admin javascript file  config.register_javascript "https://cdn.jsdelivr.net/npm/@activeadmin/activeadmin@2.13.1/app/assets/javascripts/active_admin/base.min.js"

I had trouble actually figuring out the javascript. I tried esbuild to bundle the smaller files but that was leading to some other issues with imports and what not and seemed like a rabbit hole. Credit for the javascript goes to Henrik on medium:https://henrikbjorn.medium.com/til-using-activeadmin-with-importmap-rails-289cde6f76b8

He also has a section on importmaps but i don't fully understand importmaps yet so ...

anyways hope the above is helpful especially for people integrating activeadmin with rails 8. This seems to fully work, at least I tested one delete action and was able to successfully delete a resource on the admin backend.

tldr: To use Active Admin v3 with Propshaft, puthttps://gist.github.com/losnikitos/46b4fb8c63bfd14577299611ec90f61b intoapp/assets/javascripts/active_admin.js (quick and dirty solution)

I had a problem with missing js bundle after migrating from Sprockets to Propshaft (Rails 7, Active Admin v3). Myactive_admin.js file was basically this one line

//= require active_admin/base

Which Sprockets would have picked up and assembled a bundle, but Propshaft wouldn't.

What I did was 'quick and dirty' solution: I assembled a bundle with sprockets (rails assets:precompile), grabbedpublic/assets/active_admin-{digest}.js and put the contents intoapp/assets/javascripts/active_admin.js. This would work if you don't plan to update active admin very often. Here's what the bundle looks for me (build for active admin v3.2.2)https://gist.github.com/losnikitos/46b4fb8c63bfd14577299611ec90f61b