🚀 Keycloakify v10 starter 🚀

This starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-cra). # Quick start ```bash 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 ``` # Storybook ```bash npx keycloakify add-story # Select the pages you want to add stories for yarn storybook # Start Storybook ``` # Test in a real Keycloak environment Test your theme in a local Keycloak docker container. ```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 ``` # GitHub Actions The starter comes with a generic GitHub Actions workflow that builds the theme and publishes the jars [as GitHub releases artifacts](https://github.com/keycloakify/keycloakify-starter/releases/tag/v7.1.0). 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 ; case undefined: 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`.