Keycloak Docker

disable-theme-cache.cli

embed-server --std-out=echo --server-config=standalone-ha.xml
/subsystem=keycloak-server/theme=defaults/:write-attribute(name=cacheThemes,value=false)
/subsystem=keycloak-server/theme=defaults/:write-attribute(name=cacheTemplates,value=false)
/subsystem=keycloak-server/theme=defaults/:write-attribute(name=staticMaxAge,value=-1)
stop-embedded-server

docker-compose.yml

version: 3
services:
  keycloak:
    image: jboss/keycloak:15.0.2
    environment:
      KEYCLOAK_WELCOME_THEME: mytheme
      KEYCLOAK_DEFAULT_THEME: mytheme
      KEYCLOAK_PASSWORD: admin
      KEYCLOAK_USER: admin
      DB_VENDOR: mysql
      DB_ADDR: keycloakdb
      DB_USER: dev
      DB_DATABASE: dev
      DB_PASSWORD: dev
      DB_PORT: 3306
      PROXY_ADDRESS_FORWARDING: "true"
    volumes:
      - ./theme/:/opt/jboss/keycloak/themes/mytheme
      - ./disable-theme-cache.cli:/opt/jboss/startup-scripts/disable-theme-cache.cli
  keycloakdb:
    image: mysql:8
    ports:
      - 13307:3306
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --default-authentication-plugin=mysql_native_password
    volumes:
      - keycloakdb:/var/lib/mysql
      - ./backup:/backup
    environment:
      MYSQL_ROOT_PASSWORD: dev
      MYSQL_USER: dev
      MYSQL_PASSWORD: dev
      MYSQL_DATABASE: dev
  keycloakwebpack:
    image: node:alpine
    volumes:
      - ./keycloak/theme/:/usr/src/app
    working_dir: /usr/src/app
    command: >
      sh -c '
      if test -d node_modules;
      then
          echo node_modules_exists ;
      else
          yarn;
      fi &&
          yarn start
      '
volumes:
  keycloakdb:

Dockerfile

FROM jboss/keycloak:15.0.2

ENV KEYCLOAK_WELCOME_THEME=mytheme
ENV KEYCLOAK_DEFAULT_THEME=mytheme

COPY theme /opt/jboss/keycloak/themes/mytheme

package.json

{
  "name": "mytheme-keycloak",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "cross-env NODE_ENV=production webpack --colors --watch",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.2",
    "cssnano": "^4.1.10",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "^7.0.27",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.0.4",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "sanitize.css": "^11.0.0"
  }
}

postcss.config.js

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-preset-env': {},
        cssnano: {},
    },
};

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    context: path.resolve(__dirname),
    mode: process.env.NODE_ENV,
    devtool: 'cheap-source-map',
    entry: {
        login: './login/src/entry.js',
        account: './account/src/entry.js',
        welcome: './welcome/src/entry.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: false,
                            importLoaders: 1,
                            sourceMap: true,
                        },
                    },
                    { loader: 'postcss-loader', options: { sourceMap: true } },
                ],
            },
        ],
    },
    output: {
        path: path.resolve(__dirname),
        filename: '[name]/resources/js/main.js',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]/resources/css/mytheme.css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname),
            '~': path.resolve(__dirname),
        },
    },
};