How to build the admin ui?

Francis Augusto Medeiros-Logeay

unread,

Jun 21, 2025, 9:22:39 AMJun 21

to 'Stan Silvert' via Keycloak User

Hi,

I am not so familiar with pnpm and react, but I managed to customize the admin theme exactly as I wanted using Keycloakify.

Thing is, I’d rather have an application running the admin console independently of my Keycloak instance. This way I don’t have to install themes in production. I imagine this will make it easier to find changes on the main themes.

But I do not understand really how to make this happen:

- Do I need to build the admin-ui (https://github.com/keycloak/keycloak/tree/main/js/apps/admin-ui) and use it as my new client, or

- Do I need to start my own project and import the admin-ui and the ui-shared?

When I run the pnpm install and pnpm dev on the admin-ui folder, I get a blank page and a 404. I have a localhost:8080 instance running, so I don’t know what I could make different here.

I’d really appreciate if someone could give me a small hint on how to start working with this.

Best,

Francis

Stan Silvert

unread,

Jun 24, 2025, 3:34:49 PMJun 24

to Francis Augusto Medeiros-Logeay, 'Stan Silvert' via Keycloak User

This can probably be done, but the admin console is really not meant to be run as a standalone application.

Our soon to be published UI Customization guide might help.

https://www.keycloak.org/nightly/guides#ui-customization

--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/keycloak-user/9A1F7697-D43C-46A3-820E-0A303E1FAD87%40gmail.com.

Francis Augusto Medeiros-Logeay

unread,

Jun 24, 2025, 3:59:14 PMJun 24

to Stan Silvert, 'Stan Silvert' via Keycloak User

Hi Stan,

On 24 Jun 2025, at 21:34, Stan Silvert <ssil...@redhat.com> wrote:

This can probably be done, but the admin console is really not meant to be run as a standalone application.

Actually, it works like a charm. I change the vite.config.ts to build the app into a dist folder. I add an index.html and inject the environment pointing to a keycloak instance, and boom, I got a (so far) fully functional Keycloak admin console outside of Keycloak.

For us it works very well because the can decouple the work on the gui to the running logic of Keycloak.

And even better because we can rewrite things: adding a tab to the ClientDetails was a breeze, and now I can edit certain attributes. I guess that this would only be possible inside a page, not sure how I’d inject a tab on a theme.

Our soon to be published UI Customization guide might help.
https://www.keycloak.org/nightly/guides#ui-customization

My experience with the Quicktarts have not been great. Maven doesn’t build things and complain about pnpm (which runs fine when outside maven), there are package collision (KeycloakAdminClient is probably imported twice), and it always complains react has been imported twice. I never made the extend-admin-ui-node to actually show anything.

Lastly, it’s hard to customize the built in components. As I said, it’s easier to add stuff, and also to remove stuff by only importing things you want, but since I’m not a react programmer at all, it gets hard to modify stuff you import. I suppose you can inject things, but I didn’t get that far.

Bu toverall, this new admin-ui is very powerful, and it’s great how it can be customized! Awesome work!