๐ŸŽฏTargetting Specific Keycloak Versions

By defaullt, Keycloakify generates multiples jar files, each one meant to be used with a given Keycloak version range.

However you might want to customize this behavior. If you know ahead of time what Keycloak you theme will using you can build only for this version using the keycloakVersionTargets build option.

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { keycloakify } from "keycloakify/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), keycloakify({
        keycloakVersionTargets: {
            hasAccountTheme: true,
            "21-and-below": false,
            "23": true,
            "24": false,
            "25-and-above": false
        }
    })]
});

In this configuration only the keycloak-theme-for-kc-23.jar will be created by npx keycloakify build.

You can also define the file names of the generated jar files, example:

{
    hasAccountTheme: true,
    "21-and-below": false,
    "23": false,
    "24": false,
    "25-and-above": "keycloak-theme.jar"
}

In the above configuration, only one jar will be generated: keycloak-theme.jar and it will be the one for use with Keycloak 25 and above.

Removing the account theme

If you don't customize the pages of the account theme, you are encouraged to remove the account theme sources files from your project, you'll be able to target larger Keycloak version range with a single jar file, the build time will be faster and the jar will be smaller.

To remove the account theme:

Start by deleting the src/account directory from your project

Then update your src/main.tsx (or src/index.tsx)

src/main.tsx
 import { createRoot } from "react-dom/client";
 import { StrictMode, lazy, Suspense } from "react";
 
 const KcLoginThemePage = lazy(() => import("./login/KcPage"));
 const KcAccountThemePage = lazy(() => import("./account/KcPage"));
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
         <Suspense>
             {(() => {
                 switch (window.kcContext?.themeType) {
                     case "login":
                         return <KcLoginThemePage kcContext={window.kcContext} />;
-                    case "account":
-                        return <KcAccountThemePage kcContext={window.kcContext} />;
                 }
                 return <h1>No Keycloak Context</h1>;
             })()}
         </Suspense>
     </StrictMode>
 );
 
 declare global {
     interface Window {
         kcContext?:
             | import("./login/KcContext").KcContext
-            | import("./account/KcContext").KcContext;
     }
 }

If it was defined, update your keycloakVersionTargets Keycloakify build option.

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { keycloakify } from "keycloakify/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), keycloakify({
        keycloakVersionTargets: {
            hasAccountTheme: false,
            "21-and-below": false,
            "22-and-above": true
        }
    })]
});

Note that the hasAccountTheme is not authoritative. What determines if you implement an account theme or not is the existence of an account directory in your sources. This property is just used to give you correct typing for the keycloak ranges availabes.

Last updated