First you want to create a new subproject in your monorepo, just clone the starter template into apps/keycloak-theme.
Copy 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
Copy {
- "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
Copy 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
Copy {
"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
Copy {
"$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
Copy npm run build-keycloak-theme
Building the theme, only compiling for Keycloak 25 with a custom jar file name. Demonstrating the effectiveness of turborepo cache 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
Copy export default defineConfig ({
plugins : [ react () , keycloakify ({
themeName : "my-app" ,
keycloakifyBuildDirPath : "../../dist/apps/keycloak-theme"
})]
});
Copy {
"$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 2 months ago