TIL: How to use ActiveAdmin v4 without installing nodejs

Henrik Hauge Bjørnskov
1 min readJan 28, 2024

--

ActiveAdmin is currently working on their next major version which I happily stumbled upon. Since I have been doing some small hacks to get ActiveAdmin 3 to work with Importmaps and ActiveAdmin 4 uses Importmaps and Tailwindcss by default.

Most of the following is taken from the tailwindcss-rails gem.

First move the tailwind-active_admin.config.js file into the config directory so it is next to the normal tailwind.config.js file.

In tailwind-active_admin.config.js change the path for the plugin to require(`${activeAdminPath}/plugin.js`). So it will load the plugin from the gem instead of looking for a NPM package.

Put the following into lib/tasks/active_admin.rake. It will setup a couple of convenience rake tasks and run bundle binstub tailwindcss-rails.

namespace :active_admin do
desc "Build Active Admin Tailwind stylesheets"
task build: :environment do
command = [
Rails.root.join("bin/tailwindcss").to_s,
"-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
"-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
"-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
]

system(*command, exception: true)
end

desc "Watch Active Admin Tailwind stylesheets"
task watch: :environment do
command = [
Rails.root.join("bin/tailwindcss").to_s,
"--watch",
"-i", Rails.root.join("app/assets/stylesheets/active_admin.css").to_s,
"-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
"-c", Rails.root.join("config/tailwind-active_admin.config.js").to_s,
]

system(*command)
end
end

Rake::Task["assets:precompile"].enhance(["active_admin:build"])

Rake::Task["test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("test:prepare")
Rake::Task["spec:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("spec:prepare")
Rake::Task["db:test:prepare"].enhance(["tailwindcss:build"]) if Rake::Task.task_defined?("db:test:prepare")

Add the following line into Procfile.dev which will watch the active_admin.cssfile for changes.

active_admin: bin/rails active_admin:watch

Thats it. Party time!

--

--

Henrik Hauge Bjørnskov

I build stuff at Relatel A/S, vivid traveller and gear junkie.