🔩Keycloakify in my App
Setting up Keycloakify in your Web App
If you are starting a new project, the best approach is to fork the starter repo, read its readme and start from here.
If you are familiar with how Keycloakify work and you want to set it up in an existing Vite project here is what you need to do:
Add it to your dependencies
yarn add keycloakify # Or npm install --save keycloakify
Enable the Keycloakify's Vite plugin
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { keycloakify } from "keycloakify/vite-plugin";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
keycloakify()
]
})
Register the command to build your theme
...
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"storybook": "storybook dev -p 6006",
"build-keycloak-theme": "yarn build && keycloakify"
},
...
Storybook: List the public/ directory as static dir
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
// ...
staticDirs: ["../public"]
};
export default config;
Sources directory structure
The acceptable directory hierarchy is the following:
src/
keycloak-theme/
login/
account/
email/
===OR===
src/
foo/
bar/
keycloak-theme/
login/
account/
email/
===OR===
src/
login/
account/
email/
You can have only login
for example if you don't implement and account or email theme.
You need, however, to have a src
directory. This is not customizable.
Last updated
Was this helpful?