.devcontainer | ||
.github/workflows | ||
.storybook | ||
public | ||
src | ||
.eslintrc.cjs | ||
.gitignore | ||
.prettierignore | ||
.prettierrc.json | ||
index.html | ||
LICENSE | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.node.json | ||
vite.config.ts | ||
yarn.lock |
🚀 Keycloakify v10 starter 🚀
This starter is based on Vite. There is also a Webpack based starter.
Quick start
git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
yarn install
yarn build-keycloak-theme # Build the keycloak theme, generate the .jar file to be imported in Keycloak
Storybook
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.
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:
npx keycloakify eject-page
GitHub Actions
The starter comes with a GitHub Actions workflow that builds the theme and publishes the jars as GitHub releases artifacts.
Removing the account theme
If you don't need to customize the account theme pages.
You can remove the src/account
directory and make the necessary changes in src/main.tsx
and src/vite-env.d.ts
.
This will significantly reduce the the size of the jar and the build time.
Email theme
Keycloakify lets you bundle an email theme however customization can't be made with React yet.
It's just a regular Keycloak theme.
npx keycloakify initialize-email-theme