HomeGitHubStorybookStarter TemplateAlternative to keycloak-js

Turborepo

First you want to create a new subproject in your monorepo, just clone the starter template into apps/keycloak-theme.

cd my-turborepo
git clone https://github.com/keycloakify/keycloakify-starter apps/keycloak-theme
rm -rf apps/keycloak-theme/.git
rm -rf apps/keycloak-theme/.github

Change the name field in the package.json of your keycloakify sub app.

apps/keycloak-theme/package.json
 {
-    "name": "keycloakify-starter",
+    "name": "keycloak-theme",
 }

Give an actual name to your theme (as you want it to apprear in the Keycloak Admin Console)

apps/keycloak-theme/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({
        themeName: "my-app"
    })]
});

Then you want to add a new script for building your theme in your root package.json

package.json
{
  "name": "my-turborepo",
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "lint": "turbo lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "build-keycloak-theme": "turbo run build-keycloak-theme --filter=keycloak-theme",
    "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
  },
  // ...
}

Add a turborepo task

turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    // ... Other tasks
    "build-keycloak-theme": {
        "outputs": [
            "dist/**", 
            "dist_keycloak/**"
        ]
    }
  }
}

You can now build your keycloak theme at the root of your monorepo by running

npm run build-keycloak-theme

Optionally, if you want to change the location of the directory where the jar for your theme are created you can do:

apps/keycloak-theme/vite.config.ts
export default defineConfig({
    plugins: [react(), keycloakify({
        themeName: "my-app",
        keycloakifyBuildDirPath: "../../dist/apps/keycloak-theme"
    })]
});
turbo.json
 {
   "$schema": "https://turbo.build/schema.json",
   "tasks": {
     // ... Other tasks
     "build-keycloak-theme": {
         "outputs": [
             "dist/**",
-            "dist_keycloak/**"
+            "../../dist/apps/keycloak-theme/**"
         ]
     }
   }
 }

If you applies those changes, when you'll run npm run build-keycloak-theme your JARs are going to be generated in dist/keycloak-theme/

When you want to use the keycloakify CLI commands you can either cd into your keycloakify sub app directory or use the --project option of the Keycloakify CLI. Like for example if you want to run add-story you can do either:

  • cd apps/keycloak-theme && npx keycloakify add-story

  • npx keycloakify add-story -p apps/keycloak-theme from the root of your monorepo

To go beyond the base configuration you might want to explore what build options are available. Starting with with keycloakVersionTargets to make sure that you only generates the JARs file you need.

🎯Targetting Specific Keycloak Versions

Last updated