CODEWITHSUNDEEP
keycloakfreemarker
thelr
thelr

Reputation: 1194

Keycloak CSS is not updating in browser

I am upgrading Keycloak from 9.x to 12.x in a development environment. I initially copied some custom themes forward, and found that the styling was badly broken (no surprise). I reviewed my FTL files, copied some of the core changes into my theme, and things are much better - just some minor issues to adjust.

Now the problem. I've made the changes to my login.css file, but those changes aren't showing up in the browser. It continues to fetch an old version of my custom CSS file.

What I have tried (multiple times for most of these):

I've also now grepped the entire Keycloak directory for some of the CSS rules I've removed, and I can't find any copies of the "old" css file anywhere that might be getting referenced by accident.

Also, there are no messages in the Keycloak log when loading the CSS file.

I want to figure out how to get Keycloak to deliver the updated CSS to the browser.

Upvotes: 5

Views: 15032

Answers (6)

Dawid
Dawid

Reputation: 691

I had the same issue in my production Keycloak deployment where my custom theme changes were not reflecting, even after updating the theme files.

Disabling the theme cache was not an acceptable solution for me, as I wanted to keep the performance benefits of Keycloak's caching mechanism.

Solution

The appropriate solution for me was to manually clear the cache while keeping caching enabled. You can do this by deleting the cached files with the following command:

rm -rf /opt/keycloak/data/tmp/kc-gzip-cache

After running this command, Keycloak will automatically recreate the cached files when they are accessed again. No further configuration changes are needed.

Additional Notes

  • Ensure you have the correct path (/opt/keycloak/ might vary based on your installation).
  • If running Keycloak in a container, you may need to execute this inside the container using docker exec or kubectl exec.
  • While testing, make sure to reload the page with an uncached version (e.g., Shift + F5 in most browsers) to ensure you're seeing the latest updates.

This method allowed me to keep caching enabled while ensuring my theme updates applied properly.

Upvotes: 0

Eduard Frankford
Eduard Frankford

Reputation: 351

I changed the CSS of my Keycloak (version 18) theme, and restarting the docker container did not refresh the cache. I had to run: docker exec -it docker_keycloak_1 rm -rf /opt/jboss/keycloak/standalone/tmp/kc-gzip-cache

The cache files will be recreated automatically when specific sites are visited.

Upvotes: 1

Juan hernan jaime arias
Juan hernan jaime arias

Reputation: 179

You must delete the path keycloak-server\standalone\tmp\kc-gzip-cache\sbgwq or otherelse folder... and test in a browser in incognit mode.

enter image description here

Upvotes: 1

Andrew Forman
Andrew Forman

Reputation: 91

Apart from disabling cache, as described above, you can also adjust the theme resource URLs, breaking the client-side cache. It's a bit of a hack, but you can directly modify the resource tag portion of the URL by adjusting the database migration_model.id value.

references:

Upvotes: 1

Nalin Kularathna
Nalin Kularathna

Reputation: 346

For me it worked when changed this file standalone.xml like below way

<cacheThemes>false</cacheThemes>
<cacheTemplates>false</cacheTemplates>

I think it is because I am using single instance mode instead cluster ha mode.

Upvotes: 2

Jan Garaj
Jan Garaj

Reputation: 28716

Blind guess, so please don't blame me if it doesn't work. (question should include minimal reproducible example):

Edit /opt/jboss/keycloak/standalone/configuration/standalone-ha.xml and update it as follows:

<theme>
  <staticMaxAge>-1</staticMaxAge>
  <cacheThemes>false</cacheThemes>
  <cacheTemplates>false</cacheTemplates>
  
  ...
  
</theme>

Upvotes: 10

Related Questions