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

Nx Integrated Monorepo

PreviousTurborepoNextPackage Manager Workspaces

Last updated 2 months ago

Was this helpful?

Let's see how to integrate a Keycloakify theme into a Nx project with integrated monorepo.

In this example we'll start with the Nx Vite starter

npx create-nx-workspace@latest --preset=react-monorepo --bundler=vite

Next up we want to repatriate the Keycloakify Starter template sources. We only copy over the src and .storybook directory.

cd nx-monorepo
rm -rf apps/keycloak-theme/src
git clone https://github.com/keycloakify/keycloakify-starter tmp
mv tmp/src apps/keycloak-theme
mv tmp/.storybook apps/keycloak-theme
rm -rf tmp
package.json
{
  "name": "@nx-monorepo/source",
  "version": "0.0.0",
  "scripts": {
    "build-keycloak-theme": "nx build keycloak-theme && keycloakify build -p apps/keycloak-theme",
    "keycloak-theme-storybook": "npx storybook dev -p 6006 -c apps/keycloak-theme/.storybook",
    "start-keycloak": "keycloakify start-keycloak -p apps/keycloak-theme"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "tslib": "^2.3.0",
    "keycloakify": "^10.0.0"
  },
  "devDependencies": {
      "storybook": "^8.1.10",
      "@storybook/react": "^8.1.10",
      "@storybook/react-vite": "^8.1.10"
  // ...
npm install # or `pnpm install` or `yarn`...
apps/keycloak-theme/vite.config.ts
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { keycloakify } from "keycloakify/vite-plugin";

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/keycloak-theme',

  server: {
    port: 4200,
    host: 'localhost',
  },

  preview: {
    port: 4300,
    host: 'localhost',
  },

  plugins: [react(), nxViteTsPaths(), 
      keycloakify({
          themeName: "my-project",
          themeVersion: "1.0.0",
          keycloakifyBuildDirPath: '../../dist/apps/keycloak-theme'
       })
   ],

  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },

  build: {
    outDir: 'dist',
    emptyOutDir: true,
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
});

Now if you run npm run build-keycloak-theme it will generate the JAR in dist/apps/keycloak-theme.

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

OR

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

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 you can do either:

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

๐Ÿ”ฉ
--project option of the Keycloakify CLI
add-story
build options
๐ŸŽฏTargetting Specific Keycloak Versions
After moving src and .storybook to apps/keycloak-theme