diff --git a/README.md b/README.md index 2a01b828..0109ce69 100644 --- a/README.md +++ b/README.md @@ -45,12 +45,11 @@ Tested with the following Keycloak versions: - [Just changing the look](#just-changing-the-look) - [Changing the look **and** feel](#changing-the-look-and-feel) - [Hot reload](#hot-reload) -- [Implement context persistance (optional)](#implement-context-persistance-optional) - [GitHub Actions](#github-actions) - [REQUIREMENTS](#requirements) - [API Reference](#api-reference) - [The build tool](#the-build-tool) - - [The fronted lib ( imported into your react app )](#the-fronted-lib--imported-into-your-react-app-) +- [Implement context persistance (optional)](#implement-context-persistance-optional) # How to use ## Setting up the build tool @@ -152,6 +151,37 @@ Checkout [this concrete example](https://github.com/garronej/keycloakify-demo-ap *NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded* [![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8) + +# GitHub Actions + +![image](https://user-images.githubusercontent.com/6702424/110708305-c44b2c00-81fa-11eb-8152-eeaaac0883d6.png) + +[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 + +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. + +**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 + and `docker` up and running. + +NOTE: This build tool has only be tested on MacOS. + +# 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 download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes) + # Implement context persistance (optional) If, before logging in, a user has selected a specific language @@ -210,40 +240,3 @@ keycloakInstance.init({ If you really want to go the extra miles and avoid having the white flash of the blank html before the js bundle have been evaluated [here is a snippet](https://github.com/InseeFrLab/onyxia-ui/blob/a77eb502870cfe6878edd0d956c646d28746d053/public/index.html#L5-L54) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`. - -# GitHub Actions - -![image](https://user-images.githubusercontent.com/6702424/110708305-c44b2c00-81fa-11eb-8152-eeaaac0883d6.png) - -[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 - -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. - -**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 - and `docker` up and running. - -NOTE: This build tool has only be tested on MacOS. - -# 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 download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes) - -## The fronted lib ( imported into your react app ) - -Part of the lib that you import in your react project and runs on the browser. - -**TODO** -