Update changelog v0.3.9

CHANGELOG.md

@@ -1,3 +1,31 @@
+### **0.3.9** (2021-03-25)  
+  
+- Update readme  
+- Document  --external-assets  
+- Update README.md  
+- Update README.md  
+- Update README.md    
+  
+### **0.3.8** (2021-03-22)  
+  
+- Make standalone mode the default    
+  
+### **0.3.7** (2021-03-22)  
+  
+- (test) external asset mode by default    
+  
+### **0.3.6** (2021-03-22)  
+  
+- Fix previous release    
+  
+### **0.3.5** (2021-03-22)  
+  
+- support homepage with urlPath    
+  
+### **0.3.4** (2021-03-22)  
+  
+- Bugfix: Import assets from CSS    
+  
 ### **0.3.3** (2021-03-22)  
   
 - Fix submit not receving correct text    

README.md

@@ -20,8 +20,10 @@
 
 The problem: 
 
-![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
+<p align="center">
-
+    <i>Without keycloakify:</i><br>
+    <img src="https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif">
+</p>
 When we redirected to Keycloak the user suffers from a harsh context switch.
 Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
 to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.  
@@ -29,39 +31,35 @@ to reproduce the look and feel of a specific app. Not mentioning the maintenance
 Wouldn't it be great if we could just design the login and register pages as if they where part of our app?  
 Here is `yarn add keycloakify` for you 🍸
 
-TODO: Insert video after.
+<p align="center">
+    <i>With keycloakify:</i><br>
+    <img src="https://github.com/InseeFrLab/keycloakify/releases/download/v0.3.8/keycloakify_after.gif">
+</p>
 
-Tested with the following Keycloak versions: 
+**TL;DR**: [Here](https://github.com/garronej/keycloakify-demo-app) is a Hello World React project with Keycloakify set up.  
-- [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
-- [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
-
-**Disclaimer**: This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get 
-(before you customize it) will always be the ones of the Keycloak v11.
 
 - [Motivations](#motivations)
 - [How to use](#how-to-use)
   - [Setting up the build tool](#setting-up-the-build-tool)
+    - [Specify from where the resources should be downloaded.](#specify-from-where-the-resources-should-be-downloaded)
   - [Developing your login and register pages in your React app](#developing-your-login-and-register-pages-in-your-react-app)
     - [Just changing the look](#just-changing-the-look)
     - [Changing the look **and** feel](#changing-the-look-and-feel)
     - [Hot reload](#hot-reload)
 - [GitHub Actions](#github-actions)
-- [REQUIREMENTS](#requirements)
+- [Requirements](#requirements)
+- [Limitations](#limitations)
 - [API Reference](#api-reference)
   - [The build tool](#the-build-tool)
-- [Implement context persistance (optional)](#implement-context-persistance-optional)
+- [Implement context persistence (optional)](#implement-context-persistence-optional)
 
 # How to use
 ## Setting up the build tool
 
-Add `keycloakify` to the dev dependencies of your project `npm install --save-dev keycloakify` or `yarn add --dev keycloakify`
+[`package.json`](https://github.com/garronej/keycloakify-demo-app/blob/main/package.json)
-then configure your `package.json` build's script to build the keycloak's theme by adding `&& build-keycloak-theme`.
-
-Typically you will get: 
-
-`package.json`
 ```json
-"devDependencies": {
+"homepage": "https://URL.OF/YOUR-APP"
+"dependencies": {
     "keycloakify": "^0.0.10"
 },
 "scripts": {
@@ -69,14 +67,48 @@ Typically you will get:
 },
 ```
 
-Then run `yarn keycloak` or `npm run keycloak`, you will be provided with instructions
+It is mandatory that you specify the url where your app will be available
-about how to load the theme into Keycloak.
+using the `homepage` field.
+
+Once you've edited your `package.json` you can install your new
+dependency with `yarn install` and build the keycloak theme with
+`yarn keycloak`. 
+
+Once the build is complete instructions about how to load
+the theme into Keycloak are printed in the console.
+
+### Specify from where the resources should be downloaded.
+
+When you run `npx build-keycloak-theme` without arguments, Keycloakify will build
+a standalone version of the Keycloak theme. That is to say even if your app, the
+one hosted at the url specified as `homepage` in your package.json, is down the
+Keycloak theme will still work. 
+In this mode (the default) every asset are served by the keycloak server. It is 
+convergent for debugging but it production you probably want the assets to be
+fetched from your app.
+Indeed in the default mode your users have to download again the whole app just
+to access the login page. You probably have [long-term asset caching](https://create-react-app.dev/docs/production-build/#static-file-caching)
+enabled in the server that host your app ([example](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/nginx.conf#L14)) 
+so it's better if only the html is served by the Keycloak server and everything
+else, your JS bundles, your CSS ect point to your app.  
+
+To enable this behavior you car run:
+```bash
+npx build-keycloak-theme --external-assets
+```
+(instead of `npx build-keycloak-theme`)
+
+This is something you probably want to do in your CI pipeline. [Example](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/.github/workflows/ci.yaml#L112)
+
+Also note that there is [a same-origin policy exception for fonts](https://en.wikipedia.org/wiki/Same-origin_policy#cite_note-3) so you must enabled
+CORS for fonts on the server hosting your app. Concretely this mean that your server should add a `Access-Control-Allow-Origin: *` response header to 
+GET request on *.woff2?. [Example with Nginx](https://github.com/garronej/keycloakify-demo-app/blob/224c43383548635a463fa68e8909c147ac189f0e/nginx.conf#L18-L20)
 
 ## Developing your login and register pages in your React app
 
 ### Just changing the look
 
-The fist approach is to only arr/replace the default class names by your
+The first approach is to only arr/replace the default class names by your
 own.
 
 ```tsx
@@ -159,30 +191,44 @@ Checkout [this concrete example](https://github.com/garronej/keycloakify-demo-ap
 [Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
 the building and publishing of the theme (the .jar file).
 
-# REQUIREMENTS
+# Requirements 
+
+Tested with the following Keycloak versions: 
+- [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
+- [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
+
+This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get 
+(before you customize it) will always be the ones of the Keycloak v11.
 
 This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
 It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `static/` directory generated by webpack.
+and a `build/static/` directory generated by webpack.
 
 **All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3=)
 
 - For building the theme: `mvn` (Maven) must be installed
-- For development, (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available
+- For development (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available
   and `docker` up and running.
 
 NOTE: This build tool has only be tested on MacOS.
 
+# Limitations
+
+In the standalone mode (when you run `npx build-keycloak-theme` without `--external-assets`) the fonts won't work if you are self
+hosting them. This, for example, won’t work: [`src: url("/assets/worksans-bold-webfont.woff2") format("woff2")`](https://github.com/InseeFrLab/onyxia-ui/blob/b24df3a9b34b505ce00619bb8ec0174223ecfaca/src/app/theme/fonts.scss#L5-L6)
+you will have to [host them externally](https://github.com/InseeFrLab/onyxia-ui/blob/43bf4a508419072a4ae202698e59d20b69feb9c0/src/app/theme/fonts.scss#L8-L9) 
+on a server that has CORS enabled.  
+Again this apply ony if you are not building your theme with `--external-assets` which is advised against in production.
 # API Reference 
 
 ## The build tool 
 
 Part of the lib that runs with node, at build time.
 
-- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
+- `npx build-keycloak-theme [--external-assets]`: Builds the theme, the CWD is assumed to be the root of your react project.
 - `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
 
-# Implement context persistance (optional)
+# Implement context persistence (optional)
 
 If, before logging in, a user has selected a specific language 
 you don't want it to be reset to default when the user gets redirected to

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.3.3",
+    "version": "0.3.9",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -11,9 +11,9 @@ import { objectKeys } from "evt/tools/typeSafety/objectKeys";
 
 export const pageIds = ["login.ftl", "register.ftl", "info.ftl", "error.ftl", "login-reset-password.ftl", "login-verify-email.ftl"] as const;
 
-export type PageId =  typeof pageIds[number];
+export type PageId = typeof pageIds[number];
 
-function loadAdjacentFile(fileBasename: string){
+function loadAdjacentFile(fileBasename: string) {
     return fs.readFileSync(pathJoin(__dirname, fileBasename))
         .toString("utf8");
 };
@@ -29,15 +29,25 @@ function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
     }
 }
 
+export type Mode = {
+    type: "standalone";
+    urlPathname: string;
+} | {
+    type: "external assets";
+    urlPathname: string;
+    urlOrigin: string;
+}
+
 export function generateFtlFilesCodeFactory(
     params: {
         ftlValuesGlobalName: string;
         cssGlobalsToDefine: Record<string, string>;
         indexHtmlCode: string;
+        mode: Mode;
     }
 ) {
 
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
+    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, mode } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -45,7 +55,8 @@ export function generateFtlFilesCodeFactory(
 
         const { fixedJsCode } = replaceImportFromStaticInJsCode({
             ftlValuesGlobalName,
-            "jsCode": $(element).html()!
+            "jsCode": $(element).html()!,
+            mode
         });
 
         $(element).text(fixedJsCode);
@@ -60,11 +71,28 @@ export function generateFtlFilesCodeFactory(
 
             const href = $(element).attr(attrName);
 
-            if (!href?.startsWith("/")) {
+            if (href === undefined) {
                 return;
             }
 
-            $(element).attr(attrName, "${url.resourcesPath}/build" + href);
+            switch (mode.type) {
+                case "external assets":
+                    $(element).attr(
+                        attrName,
+                        href.replace(/^\//, `${mode.urlOrigin}/`)
+                    );
+                    break;
+                case "standalone":
+                    $(element).attr(
+                        attrName,
+                        href.replace(
+                            new RegExp(`^${mode.urlPathname.replace(/\//g, "\\/")}`),
+                            "${url.resourcesPath}/build/"
+                        )
+                    );
+                    break;
+            }
+
 
         })
     );
@@ -89,9 +117,10 @@ export function generateFtlFilesCodeFactory(
             ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
                 '',
                 '<style>',
-                generateCssCodeToDefineGlobals(
+                generateCssCodeToDefineGlobals({
-                    { cssGlobalsToDefine }
+                    cssGlobalsToDefine,
-                ).cssCodeToPrependInHead,
+                    "urlPathname": mode.urlPathname
+                }).cssCodeToPrependInHead,
                 '</style>',
                 ''
             ]),

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -6,23 +6,25 @@ import {
     replaceImportFromStaticInCssCode,
     replaceImportFromStaticInJsCode
 } from "./replaceImportFromStatic";
-import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
+import { generateFtlFilesCodeFactory, pageIds, Mode } from "./generateFtl";
-import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
+import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
-import { downloadAndUnzip } from "../tools/downloadAndUnzip";
+import { downloadAndUnzip } from "../tools/downloadAndUnzip";
 import * as child_process from "child_process";
-import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
+import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
-import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/kcContextMocks/urlResourcesPath";
+import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/kcContextMocks/urlResourcesPath";
-import { isInside } from "../tools/isInside";
+import { isInside } from "../tools/isInside";
+
 
 export function generateKeycloakThemeResources(
     params: {
         themeName: string;
         reactAppBuildDirPath: string;
         keycloakThemeBuildingDirPath: string;
+        mode: Mode;
     }
 ) {
 
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, mode } = params;
 
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
 
@@ -43,30 +45,34 @@ export function generateKeycloakThemeResources(
                 return undefined;
             }
 
+            if (mode.type === "standalone") {
 
-            if (/\.css?$/i.test(filePath)) {
+                if (/\.css?$/i.test(filePath)) {
 
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
+                    const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
-                    { "cssCode": sourceCode.toString("utf8") }
+                        { "cssCode": sourceCode.toString("utf8") }
-                );
+                    );
 
-                allCssGlobalsToDefine = {
+                    allCssGlobalsToDefine = {
-                    ...allCssGlobalsToDefine,
+                        ...allCssGlobalsToDefine,
-                    ...cssGlobalsToDefine
+                        ...cssGlobalsToDefine
-                };
+                    };
 
-                return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
+                    return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
 
-            }
+                }
 
-            if (/\.js?$/i.test(filePath)) {
+                if (/\.js?$/i.test(filePath)) {
 
-                const { fixedJsCode } = replaceImportFromStaticInJsCode({
+                    const { fixedJsCode } = replaceImportFromStaticInJsCode({
-                    "jsCode": sourceCode.toString("utf8"),
+                        "jsCode": sourceCode.toString("utf8"),
-                    ftlValuesGlobalName
+                        ftlValuesGlobalName,
-                });
+                        mode
+                    });
 
-                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+                    return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+
+                }
 
             }
 
@@ -80,7 +86,8 @@ export function generateKeycloakThemeResources(
         ftlValuesGlobalName,
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
-        ).toString("utf8")
+        ).toString("utf8"),
+        mode
     });
 
     pageIds.forEach(pageId => {

src/bin/build-keycloak-theme/index.ts

@@ -6,10 +6,13 @@ import type { ParsedPackageJson } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import * as child_process from "child_process";
 import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
+import { URL } from "url";
 
 
 const reactProjectDirPath = process.cwd();
 
+const doUseExternalAssets = process.argv[2]?.toLowerCase() === "--external-assets";
+
 const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
@@ -22,7 +25,51 @@ if (require.main === module) {
     generateKeycloakThemeResources({
         keycloakThemeBuildingDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name
+        "themeName": parsedPackageJson.name,
+        "mode": (() => {
+
+
+            const url = (() => {
+
+                const { homepage } = parsedPackageJson;
+
+                return homepage === undefined ?
+                    undefined :
+                    new URL(homepage);
+
+            })();
+
+            const urlPathname =
+                url === undefined ?
+                    "/" :
+                    url.pathname.replace(/([^/])$/, "$1/");
+
+
+
+            return !doUseExternalAssets ?
+                {
+                    "type": "standalone",
+                    urlPathname
+                } as const
+                :
+                {
+                    "type": "external assets",
+                    urlPathname,
+                    "urlOrigin": (() => {
+
+                        if (url === undefined) {
+                            console.error("ERROR: You must specify 'homepage' in your package.json");
+                            process.exit(-1);
+                        }
+
+                        return url.origin;
+
+                    })()
+
+                } as const;
+
+        })()
+
     });
 
     const { jarFilePath } = generateJavaStackFiles({

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -1,19 +1,39 @@
 
 import * as crypto from "crypto";
 
+type Mode = {
+    type: "standalone";
+} | {
+    type: "external assets";
+    urlOrigin: string;
+    urlPathname: string;
+}
+
 export function replaceImportFromStaticInJsCode(
     params: {
         ftlValuesGlobalName: string;
         jsCode: string;
+        mode: Mode;
     }
 ): { fixedJsCode: string; } {
 
-    const { jsCode, ftlValuesGlobalName } = params;
+    const { jsCode, ftlValuesGlobalName, mode } = params;
+
+    const fixedJsCode = (() => {
+        switch (mode.type) {
+            case "standalone":
+                return jsCode!.replace(
+                    /[a-z]+\.[a-z]+\+"static\//g,
+                    `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
+                );
+            case "external assets":
+                return jsCode!.replace(
+                    /[a-z]+\.[a-z]+\+"static\//g,
+                    `"${mode.urlOrigin}${mode.urlPathname}static/`
+                );
+        }
+    })();
 
-    const fixedJsCode = jsCode!.replace(
-        /"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/build/static/`
-    );
 
     return { fixedJsCode };
 
@@ -32,7 +52,7 @@ export function replaceImportFromStaticInCssCode(
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/(url\(\/[^)]+\))/g) ?? [])
+    new Set(cssCode.match(/url\(\/[^)]+\)[^;}]*/g) ?? [])
         .forEach(match =>
             cssGlobalsToDefine[
             "url" + crypto
@@ -60,12 +80,13 @@ export function replaceImportFromStaticInCssCode(
 export function generateCssCodeToDefineGlobals(
     params: {
         cssGlobalsToDefine: Record<string, string>;
+        urlPathname: string;
     }
 ): {
     cssCodeToPrependInHead: string;
 } {
 
-    const { cssGlobalsToDefine } = params;
+    const { cssGlobalsToDefine, urlPathname } = params;
 
     return {
         "cssCodeToPrependInHead": [
@@ -73,12 +94,8 @@ export function generateCssCodeToDefineGlobals(
             ...Object.keys(cssGlobalsToDefine)
                 .map(cssVariableName => [
                     `--${cssVariableName}:`,
-                    [
+                    cssGlobalsToDefine[cssVariableName]
-                        "url(",
+                        .replace(new RegExp(`url\\(${urlPathname.replace(/\//g, "\\/")}`, "g"), "url(${url.resourcesPath}/build/")
-                        "${url.resourcesPath}/build" +
-                        cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
-                        ")"
-                    ].join("")
                 ].join(" "))
                 .map(line => `    ${line};`),
             "}"

src/test/generateKeycloakThemeResources.ts

@@ -1,7 +1,7 @@
 
 import { join as pathJoin } from "path";
 import { generateKeycloakThemeResources } from "../bin/build-keycloak-theme/generateKeycloakThemeResources";
-import { 
+import {
     setupSampleReactProject,
     sampleReactProjectDirPath
 } from "./setupSampleReactProject";
@@ -9,8 +9,12 @@ import {
 setupSampleReactProject();
 
 generateKeycloakThemeResources({
-    "themeName": "onyxia-ui",
+    "themeName": "keycloakify-demo-app",
     "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
-    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme")
+    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
+    "mode": {
+        "type": "standalone",
+        "urlPathname": "/keycloakify-demo-app/"
+    }
 });
 

src/test/replaceImportFromStatic.ts

@@ -19,7 +19,8 @@ const { fixedJsCode } = replaceImportFromStaticInJsCode({
                 3: "0664cdc0"
             }[e] + ".chunk.js"
         }
-    `
+    `,
+    "mode": { "type": "standalone" }
 });
 
 console.log({ fixedJsCode });
@@ -45,6 +46,6 @@ const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
 console.log({ fixedCssCode, cssGlobalsToDefine });
 
 
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine });
+const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine, "urlPathname": "/" });
 
 console.log({ cssCodeToPrependInHead });