Angular Workspace

This tutorial requires some experience with Angular. The steps are straight forward but they might require some configuration depending on your 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