Angular Workspace

Before You Start:

This documentation section is intended for cases where you already have an existing project and want to add a Keycloak theme as part of its deliverables.

One of Keycloakify’s strengths is its ability to let you reuse components and styles from your main application in your Keycloak theme. However, if you don’t have an existing codebase, it’s easier to fork one of the starter projects and develop your Keycloak theme as a standalone project.

Integrating Keycloakify into an Angular Workspace

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

Next up you want to repatriate the Keycloakify Starter template sources. Only copy over the src and .storybook directory.

cd my-workspace
git clone https://github.com/keycloakify/keycloakify-starter-angular tmp
mv tmp/src projects/keycloak-theme
mv tmp/extra-webpack.config.js tmp/index-html-transform.js
rm -rf tmp

Adjust the extra-webpack.config.js File

Edit the highlighted path in extra-webpack.config.js file to match the following configuration:

extra-webpack.config.js

import path from 'node:path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default {
  entry: './projects/keycloakify-theme/src/main.ts',
  output: {
    path: path.resolve(import.meta.dirname, '../../dist/keycloakify-theme/static/js/'),
    publicPath: 'auto',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '../css/[name].[contenthash].css',
    }),
  ],
};

after this, your project structure should look like the following:

my-workspace/

│
├── projects/
│   └── keycloakify-theme/
│       ├── src/
│       ├── index-html-transform
│       ├── extra-webpack.js
│       ├── tsconfig.app.json
│       └── tsconfig.spec.json
│
├── angular.json
└── package.json

Update package.json with Keycloakify Configuration

Ensure the following lines are present in your workspace's package.json:

package.json

{
  "name": "my-workspace",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    ...
    "build-keycloak-theme": "ng build keycloakify-theme && npx keycloakify build --project projects/keycloakify-theme",
    ...
  },
  "keycloakify": {
    "accountThemeImplementation": "none",
    "projectBuildDirPath": "dist/keycloakify-theme",
    "staticDirPathInProjectBuildDirPath": "static",
    "publicDirPath": "public"
  },
  "dependencies": {
    ...
    "keycloakify": "^11.3.18",
    "@keycloakify/angular": "0.1.4"
    ...
  },
  "devDependencies": {
    ...
    "@angular-builders/custom-webpack": "^18.0.0",
    ...
  }
}

Add the Keycloakify Project to angular.json

To integrate the Keycloakify project into your workspace, update the angular.json file by adding an entry to the projects section. Below is an example configuration. Important lines that may require customization based on your project’s requirements are highlighted:

angular.json

"keycloakify-theme": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "changeDetection": "OnPush",
      "style": "css",
      "standalone": true
    }
  },
  "root": "projects/keycloakify-theme",
  "sourceRoot": "projects/keycloakify-theme/src",
  
  "prefix": "kc",
  "architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "inlineStyleLanguage": "scss",
            "outputPath": "dist/keycloakify-theme",
            "index": "projects/keycloakify-theme/src/index.html",
            "main": "projects/keycloakify-theme/src/main.ts",
            "tsConfig": "projects/keycloakify-theme/tsconfig.app.json"
        },

        "configurations": {
          "production": {
              "optimization": true,
              "indexTransform": "projects/keycloakify-theme/index-html-transform.js",
              "sourceMap": false,
              "customWebpackConfig": {
                  "path": "projects/keycloakify-theme/extra-webpack.config.js",
                  "mergeRules": {
                      "output": "replace",
                      "entry": "replace",
                      "plugins": "append"
                  }
              }
          },
          "development": {
            "assets": [
              {
                "glob": "**/*",
                "input": "./public"
              }
            ],
              "buildOptimizer": false,
              "optimization": false,
              "sourceMap": true,
              "namedChunks": true
          }
      },
      "defaultConfiguration": "production"
  },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "buildTarget": "keycloakify-theme:build"
      },
      "configurations": {
        "production": {
          "buildTarget": "keycloakify-theme:build:production"
        },
        "development": {
          "buildTarget": "keycloakify-theme:build:development"
        }
      },
      "defaultConfiguration": "development"
    }
  }
},

Use Keycloakify

The application should now be good to go. Make sure that whenever you run a npx keycloakify command in your workspace root you add the path to your keycloakify project like this: npx keycloakify build --project projects/keycloakify-theme