This is the documentation for v10, checkout the latest version
Keycloakify
HomeGitHubStartersStorybookDiscordKeycloak-js Alternative
v10
  • Keycloakify
  • Release Notes & Upgrade Instructions
  • FAQ
v10
  • ๐Ÿ‘จโ€๐Ÿ’ปQuick start
  • ๐ŸงชTesting your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • ๐Ÿ”ฉIntegrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • ๐ŸŽจCustomization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • ๐Ÿ–‹๏ธCustom Fonts
  • ๐ŸŒŽInternationalization and Translations
  • ๐ŸŽญTheme Variants
  • ๐Ÿ“Customizing the Register Page
  • ๐Ÿ‘คAccount Theme
    • Single-Page
    • Multi-Page
  • ๐Ÿ“„Terms and conditions
  • ๐Ÿ–‡๏ธStyling a Custom Page Not Included In Base Keycloak
  • ๐Ÿ”งAccessing the Server Environment Variables
  • ๐ŸŽฏTargetting Specific Keycloak Versions
  • ๐Ÿ“งEmail Customization
  • ๐Ÿš›Passing URL Parameters to your Theme
  • ๐ŸคตAdmin theme
  • ๐Ÿ“ฅImporting the JAR of Your Theme Into Keycloak
  • ๐Ÿ”›Enabling your Theme in the Keycloak Admin Console
  • ๐Ÿค“Taking ownership of the kcContext
  • ๐Ÿ“–Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • ๐Ÿ˜žCan't identify the page to customize?
    • ๐Ÿค”How it Works
    • ๐Ÿ˜–Some values you need are missing from in kcContext type definitions?
    • โ“Can I use it with Vue or Angular
      • Angular
    • โš ๏ธLimitations
    • ๐Ÿ›‘Errors Keycloak in Logs
    • ๐Ÿ™‹How do I add extra pages?
    • ๐Ÿค“Can I use react-hooks-form?
    • ๐Ÿš€Redirecting you users to the login/register pages
    • ๐Ÿ’ŸContributing
    • โฌ†๏ธMigration Guides
      • โฌ†๏ธv9 -> v10
      • โฌ†๏ธCRA -> Vite
      • โฌ†๏ธv8 -> v9
      • โฌ†๏ธv7 -> v8
      • โฌ†๏ธv6 -> v7
      • โฌ†๏ธv6.x -> v6.12
      • โฌ†๏ธv5 -> v6
    • ๐ŸชGoogle reCaptcha and End of third-party Cookies
    • ๐Ÿ”–Accessing the Realm Attributes
  • โญSponsors
Powered by GitBook
On this page

Was this helpful?

  1. Integrating Keycloakify in your Codebase
  2. As a Subproject of your Monorepo

Package Manager Workspaces

PreviousNx Integrated MonorepoNextCustomization Strategies

Last updated 2 months ago

Was this helpful?

Let's assume we have a monorepo project where sub applications are stored in the apps/ directory.

package.json
{
  "name": "my-monorepo",
  "workspaces": [
    "apps/*"
    "packages/*"
  ],
  "private": true,
pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

Then, you want to create a new app called, for example 'keycloak-theme' and initialize it with the code of the starter template:

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

Now you want to update the name field of your apps/keycloak-theme/package.json to match the name of your sub app.

apps/keycloak-theme/package.json
 {
-    "name": "keycloakify-starter",
+    "name": "keycloak-theme",
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"
    })]
});

Now you can add a script in your root package json to build the theme and start the keycloak dev server:

package.json
{
   "name": "my-monorepo",
   "scripts": {
       "build-keycloak-theme": "pnpm --filter keycloak-theme run build-keycloak-theme",
       "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
   },
   // ...
}
package.json
{
   "name": "my-monorepo",
   "scripts": {
       "build-keycloak-theme": "yarn workspace keycloak-theme run build-keycloak-theme",
       "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
   },
   // ...
}
package.json
{
   "name": "my-monorepo",
   "scripts": {
       "build-keycloak-theme": "npm run build-keycloak-theme --workspace=keycloak-theme",
       "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
   },
   // ...
}
package.json
{
   "name": "my-monorepo",
   "scripts": {
       "build-keycloak-theme": "bun run --cwd apps/keycloak-theme build-keycloak-theme",
       "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
   },
   // ...
}

Now you can run:

pnpm install
pnpm run build-keycloak-theme
yarn
yarn build-keycloak-theme
npm install
npm run build-keycloak-theme
bun install
bun run build-keycloak-theme
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",
        keycloakifyBuildDirPath: "../../dist/apps/keycloak-theme",
        keycloakVersionTargets: {
            hasAccountTheme: true,
            "21-and-below": false,
            "23": false,
            "24": false,
            "25-and-above": "keycloak-theme.jar"
        }
    })]
});

In this configuration when you run pnpm run build-keycloak-theme from the root of your monorepo a single keycloak-theme.jar will be generated in dist/apps/keycloak-theme:

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

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

You also want to provide an actual name to your theme as you want it to .

Two common thing you might want to do is and .

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

๐Ÿ”ฉ
appear in the Keycloak Admin UI
change the location of the directory where the JARs files are generated
only build the JAR for the Keycloak version you are using
--project option of the Keycloakify CLI