Angular Workspace

If you're unsure what this section is about, this approach is NOT for you. Instead, follow the Quick Start Guide and fork the starter 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.

cd my-workspace
yarn ng generate application keycloak-theme
rm -rf projects/keycloak-theme/public
rm -rf projects/keycloak-theme/src
git clone https://github.com/keycloakify/keycloakify-starter-angular-vite tmp
mv tmp/src projects/keycloak-theme
mv tmp/public projects/keycloak-theme
mv tmp/vite.config.ts projects/keycloak-theme
mv tmp/index.html projects/keycloak-theme
rm -rf tmp

Adjust the vite.config.ts File

Edit the highlighted path in vite.config.ts file to match the following configuration:

vite.config.ts

/// 

import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';
import { keycloakify } from 'keycloakify/vite-plugin';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2022'],
  },
  root: 'projects/keycloak-theme',
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    angular(),
    keycloakify({
      accountThemeImplementation: 'none',
      themeName: 'keycloak-theme',
      keycloakifyBuildDirPath: '../../dist/keycloak-theme'
    }),
  ],
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

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

my-workspace/

│
├── projects/
│   └── keycloak-theme/
│       ├── src/
│       ├── public/
│       ├── index.html
│       ├── tsconfig.app.json
│       ├── tsconfig.spec.json
│       └── vite.config.ts
│
├── 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 --project keycloak-theme && npx keycloakify build --project projects/keycloak-theme",
    ...
  },
  "dependencies": {
    ...
    "@keycloakify/angular": "^0.2.14",
    "keycloakify": "^11.8.1",
    "marked": "^5.0.2",
    "marked-gfm-heading-id": "^3.0.4",
    "marked-highlight": "^2.0.1",
    "marked-mangle": "^1.1.7",
    "prismjs": "^1.29.0",
    ...
  },
  "devDependencies": {
    ...
    "@analogjs/platform": "^1.11.0",
    "@analogjs/vite-plugin-angular": "^1.9.0",
    "@analogjs/vitest-angular": "^1.9.0",
    "@angular-devkit/architect": "^0.1900.6",
    "@nx/angular": "^20.3.0",
    "@nx/devkit": "^20.3.0",
    "@nx/vite": "^20.3.0",
    "vite": "^5.0.0",
    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^2.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

  ...
    "keycloak-theme": {
      "projectType": "application",
      "schematics": {},
      "root": "projects/keycloak-theme",
      "sourceRoot": "projects/keycloak-theme/src",
      "prefix": "kc",
      "architect": {
        "build": {
          "builder": "@analogjs/platform:vite",
          "options": {
            "configFile": "projects/keycloak-theme/vite.config.ts",
            "outputPath": "projects/keycloak-theme/dist",
            "main": "projects/keycloak-theme/src/main.ts",
            "index": "projects/keycloak-theme/index.html",
            "tsConfig": "projects/keycloak-theme/tsconfig.app.json"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@analogjs/platform:vite-dev-server",
          "configurations": {
            "production": {
              "buildTarget": "keycloak-theme:build:production",
              "port": 5173
            },
            "development": {
              "buildTarget": "keycloak-theme:build:development",
              "hmr": true
            }
          },
          "defaultConfiguration": "development"
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }

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/keycloak-theme