diff --git a/README.md b/README.md index 0bc02f2..f1af188 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@

-This starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-cra). +This starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-webpack). # Quick start @@ -12,36 +12,25 @@ This starter is based on Vite. There is also [a Webpack based starter](https://g git clone https://github.com/keycloakify/keycloakify-starter cd keycloakify-starter yarn install -# Generate the dist_keycloak/.jar file that you can import in Keycloak -yarn build-keycloak-theme ``` +> NOTE: This setup uses yarn as the default but you can use any package manager you like. -# Storybook +# Testing the theme locally -Spin up a test environment for your Keycloak pages. +[Documentation](https://docs.keycloakify.dev/v/v10/testing-your-theme) + +# How to customize the theme + +[Documentation](https://docs.keycloakify.dev/v/v10/customization-strategies) + +# Building the theme ```bash -npx keycloakify add-story # Select the pages you want to add stories for -yarn storybook # Start Storybook +npm run build-keycloak-theme ``` -# Test in a real Keycloak environment - -Test your theme in a local Keycloak docker container. -You need to have Docker running. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/) if you don't have it. - -```bash -npx keycloakify start-keycloak -``` - -# Advanced customization - -The starter only enables you to implement CSS level customization. To take full ownership -of some pages use the command: - -```bash -npx keycloakify eject-page -``` +Note that by default Keycloakify generates multiple .jar files for different versions of Keycloak. +You can customize this behavior, see documentation [here](https://docs.keycloakify.dev/v/v10/targetting-specific-keycloak-versions). # GitHub Actions @@ -52,47 +41,3 @@ To release a new version **just update the `package.json` version and push**. To enable the workflow go to your fork of this repository on GitHub then navigate to: `Settings` > `Actions` > `Workflow permissions`, select `Read and write permissions`. -# Email theme - -Keycloakify lets you bundle an email theme however customization can't be made with React yet. -To initialize the email theme run: - -```bash -npx keycloakify initialize-email-theme -``` - -# Removing the account theme - -If you don't need to customize [the account theme pages](https://storybook.keycloakify.dev/?path=/story/account-account--default). -You can remove the `src/account` directory. -This will significantly reduce the the size of the jar and the build time. - -You'll need to apply theses changes to the `src/main.tsx` file: - -```diff - createRoot(document.getElementById("root")!).render( - - - {(() => { - switch (window.kcContext?.themeType) { - case "login": - return ; -- case "account": -- return ; - } - return

No Keycloak Context

; - })()} -
-
- ); - - declare global { - interface Window { - kcContext?: - | import("./login/KcContext").KcContext -- | import("./account/KcContext").KcContext; - } - } -``` - -Don't forget to update `src/main.tsx` and `src/vite-env.d.ts`.