GitBook: [#8] No subject

README.md

@@ -7,15 +7,15 @@ description: What you'll need
 {% hint style="warning" %}
 This tool will only run natively on Linux and Mac OS.
 
-Windows users will haver to use it via  [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10). More info [here](https://github.com/InseeFrLab/keycloakify/issues/54#issuecomment-984834217).
+Windows users will haver to use it via [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10). More info [here](https://github.com/InseeFrLab/keycloakify/issues/54#issuecomment-984834217).
 {% endhint %}
 
 {% hint style="success" %}
 This tool will be maintained to stay compatible with every Keycloak version starting from [Keycloak Version 11](https://github.com/keycloak/keycloak/releases/tag/11.0.3).
 
 However, the default pages you will get (before you customize them) will always be the ones of Keycloak [v11.0.3](https://github.com/keycloak/keycloak/releases/tag/11.0.3).
 
-You can download the version of the builtin theme the Keycloakify's components are based on with the following command:  
+You can download the version of the builtin theme the Keycloakify's components are based on with the following command:
 
 ```bash
 npx -p keycloakify download-builtin-keycloak-theme
@@ -39,22 +39,15 @@ npx -p keycloakify download-builtin-keycloak-theme
 ### Supported React frameworks
 
 {% hint style="success" %}
-If you want to make your life easy use [create-react-app](https://create-react-app.dev) and start from one of the template repos: 
-
-* [keycloakify-demo-app with CSS only configuration](https://github.com/garronej/keycloakify-demo-app).
-* [keycloakify-demo-app with component level configuration](https://github.com/garronej/keycloakify-demo-app/tree/look\_and\_feel).
+If you want to make your life easy use [create-react-app](https://create-react-app.dev) and start from [the template repo](https://github.com/garronej/keycloakify-demo-app).
 {% endhint %}
 
-
-
-
-
 ### Utility that needs to be installed
 
 * `mvn` ([Maven](https://maven.apache.org)), `rm`, `mkdir`, `curl`, `unzip` are assumed to be available.
 * `docker` must be up and running when running `start_keycloak_testing_container.sh` (Instructions provided after running `yarn keycloak`).
 
-This tool assumes you are bundling your app with Webpack (tested with the versions that ships with CRA v4.44.2 and v5.0.0) . It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file and a `build/static/` directory generated by webpack. 
+This tool assumes you are bundling your app with Webpack (tested with the versions that ships with CRA v4.44.2 and v5.0.0) . It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file and a `build/static/` directory generated by webpack.
 
 For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432).
 

SUMMARY.md

@@ -2,4 +2,4 @@
 
 * [🏁 Requirements](README.md)
 * [👨💻 Quick start](how-to-use.md)
-* [Page 1](page-1.md)
+* [⚡ Performance optimization](page-1.md)

how-to-use.md

@@ -1,15 +1,10 @@
 # 👨💻 Quick start
 
 {% hint style="success" %}
-If you want to make your life easy use [create-react-app](https://create-react-app.dev) and start from one of the template repos:
-
-* [keycloakify-demo-app with CSS only configuration](https://github.com/garronej/keycloakify-demo-app).
-* [keycloakify-demo-app with component level configuration](https://github.com/garronej/keycloakify-demo-app/tree/look\_and\_feel).
+It's a good idea to first read this quick start section to get the idea of how Keycloakify works however we recommend you start hacking from [**the demo setup**](https://github.com/garronej/keycloakify-demo-app) instead of setting up Keycloakify from scratch.
 {% endhint %}
 
-### Setting up the build tool
-
-```bash
+```
 yarn add keycloakify @emotion/react
 ```
 
@@ -122,45 +117,4 @@ Main takeaways are:
 {% endtab %}
 {% endtabs %}
 
-####
-
-#### Hot reload
-
-Rebuild the theme each time you make a change to see the result is not practical. If you want to test your login screens outside of Keycloak you can mock a given `kcContext`:
-
-```tsx
-import {
-    KcApp,
-    defaultKcProps,
-    getKcContext
-} from "keycloakify";
-
-const { kcContext } = getKcContext({
-    "mockPageId": "login.ftl"
-});
-
-reactDom.render(
-        <KcApp
-            kcContext={kcContextMocks.kcLoginContext}
-            {...defaultKcProps}
-        />
-    document.getElementById("root")
-);
-```
-
-Then `yarn start`, you will see your login page.
-
-Checkout [this concrete example](https://github.com/garronej/keycloakify-demo-app/blob/main/src/index.tsx)
-
-### Enable loading in a blink of an eye of login pages ⚡ (--external-assets)
-
-By default the theme generated is standalone. Meaning that when your users reach the login pages all scripts, images and stylesheet are downloaded from the Keycloak server.\
-If you are specifically building a theme to integrate with an app or a website that allows users to first browse unauthenticated before logging in, you will get a significant performance boost if you jump through those hoops:
-
-* Provide the url of your app in the `homepage` field of package.json. [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/package.json#L2) or in a `public/CNAME` file. [ex](https://github.com/garronej/keycloakify-demo-app/blob/main/public/CNAME).
-* Build the theme using `npx build-keycloak-theme --external-assets` [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/.github/workflows/ci.yaml#L21)
-* Enable [long-term assets caching](https://create-react-app.dev/docs/production-build/#static-file-caching) on the server hosting your app.
-* Make sure not to build your app and the keycloak theme separately and remember to update the Keycloak theme every time you update your app.
-* Be mindful that if your app is down your login pages are down as well.
-
-Checkout a complete setup [here](https://github.com/garronej/keycloakify-demo-app#about-keycloakify)
+###

page-1.md

@@ -1,2 +1,22 @@
-# Page 1
+---
+description: Enable loading in a blink of an eye of login pages with --external-assets
+---
 
+# ⚡ Performance optimization
+
+{% hint style="warning" %}
+This only apply if your theme is integrated to to a React app.  
+
+If your theme Keycloak theme is a standalone react project you can ignore this section. 
+{% endhint %}
+
+By default the theme generated is standalone. Meaning that when your users reach the login pages all scripts, images and stylesheet are downloaded from the Keycloak server.\
+If you are specifically building a theme to integrate with an app or a website that allows users to first browse unauthenticated before logging in, you will get a significant performance boost if you jump through those hoops:
+
+* Provide the url of your app in the `homepage` field of package.json. [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/package.json#L2) or in a `public/CNAME` file. [ex](https://github.com/garronej/keycloakify-demo-app/blob/main/public/CNAME).
+* Build the theme using `npx build-keycloak-theme --external-assets` [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/.github/workflows/ci.yaml#L21)
+* Enable [long-term assets caching](https://create-react-app.dev/docs/production-build/#static-file-caching) on the server hosting your app.
+* Make sure not to build your app and the keycloak theme separately and remember to update the Keycloak theme every time you update your app.
+* Be mindful that if your app is down your login pages are down as well.
+
+Checkout a complete setup [here](https://github.com/garronej/keycloakify-demo-app#about-keycloakify)