[Rails 7] - Help to configure a newly migrated app to process activeadmin assets (js and scss) using jsbundling-rails with esbuild

[guillaumebesse]

Thanks to the work in progress in PR #7235, activeadmin is starting.

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

Any help is welcome.

[tagliala]

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 Admin is 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

[guillaumebesse]

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

The goal is to compile in app/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";

[j-manu]

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 with https://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.

[Aesthetikx]

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 have tailwindcss-rails in my Gemfile. Now, thanks to the works of the developers on the recent Rails 7 PR, I have added activeadmin using the master branch to my Gemfile.

After installing and visiting /admin, I am greeted with The asset 'active_admin.css' was not found in the load path. from raise 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.

[Kukunin]

I successfully manage to install active_admin with vite_ruby (ViteJS):

To handle the undefined method assets while running rake activeadmin:install, I temporary installed gem 'propshaft'. Later the gem is not needed.

I've added the following snippet to mimic Webpacker methods the config/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)
  end
end

ActiveAdmin::Views::Pages::Base.include ActiveAdminViteJS

Ensure you have config.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

[reinvanimschoot]

Hi guys, sorry to resurrect this discussion but while this solution works like a charm inside 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!

[jedschneider]

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 @guillaumebesse up 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 in package.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

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

application.js

import "./add_jquery" // forces hoisting to behave
import './jquery-ui' // jQuery is now defined
import "@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 across this 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.

[jedschneider]

I discovered that the delete buttons/links in activeadmin were not working, this was an issue with jquery-ujs not being imported, so my active_admin.js now looks like this:

import "./add_jquery"
import {} from 'jquery-ujs'
import './jquery-ui'
import "@activeadmin/activeadmin";

This allows the modal dialog to work and for the data-confirm attributes to be picked up on in that case.

[alexplatteeuw]

Hey @jedschneider, big thanks for dropping that comment! I was dealing with the same problem.

Initially, I tried importing turbo-rails into my active_admin.js file and then went on to replace all the link_to instances (that were using a patch/post/delete method and were not working anymore) with a button_to. I also fixed the modals by swapping out data: { confirm: with form: { data: { turbo_confirm:.

After that, I took the time to tweak all my button_to to match the appearance of the link_to... 😑

Thanks to your comment I just realized that activeadmin is still relying on UJS through jquery-ujs.

In the end, I imported jquery-ujs like this in my active_admin.js file:

import { } from "@activeadmin/activeadmin/node_modules/jquery-ujs"

[mario-amazing]

I've successfully configured ActiveAdmin version 3.2 in my Rails project with jsbundling-rails, and propshaft, all managed via node_modules. Here's the setup that worked for me:

//app/javascript/active_admin.js

import './add_jquery'

import 'jquery-ui'
import "jquery-ujs"
import 'jquery-ui/ui/unique-id.js'
import 'jquery-ui/ui/widgets/mouse'
import "jquery-ui/ui/widgets/sortable"
import "jquery-ui/ui/widgets/tabs"
import "jquery-ui/ui/widgets/dialog"
import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/ui/widget'
import '@activeadmin/activeadmin'