In Storybook
TLDR:
Storybook is a tool that enables to test UI component in isolation. For reference, the component showcase Keycloakify website is a website generated with Storybook.
The starter template does not initially contain any story files, instead there's a keycloakify CLI command that let's you import specifically the stories for the pages you want to test into your project.
So, just run this command in the root of your Keycloakify project and select the pages you want.
It will enables you to select the pages you want to add stories for.
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FLG7qd8iWnXmw9f2S2NOE%252Fimage.png%3Falt%3Dmedia%26token%3Dbf9ab6b9-dcc9-40d9-a5a5-c55f84b60504&width=768&dpr=4&quality=100&sign=19185721&sv=1)
Selecting login -> register.ftl will result in this file to be created in your project:
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FccpS33zE8fk2os7bPP79%252Fimage.png%3Falt%3Dmedia%26token%3D44bb9ea4-56e6-4e39-89d4-55e90479b2ec&width=768&dpr=4&quality=100&sign=30bcc910&sv=1)
You can run the above command multiple times to add stories for the different pages you want to develop.
Once your added a few stories you can start Storybook locally with:
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FPQBVQ9FLALl6DwtdDsA0%252Fimage.png%3Falt%3Dmedia%26token%3D00d3d0be-ba3b-4923-845c-f4ffcc9948f0&width=768&dpr=4&quality=100&sign=78225b9e&sv=1)
You can see the changes you make in you code in realtime in your Storybook.
The idea of Storybook is to easily let you see the pages in different configuration without having to reproduce the full login/register process in a real Keycloak. Keycloakify provide a default mock context for every pages, the stories let you partially override some specific part of this default mock to reflect pages in different configurations. For example, if you want to create a story that show the register page in chinese you would add this:
![](https://docs.keycloakify.dev/~gitbook/image?url=https%3A%2F%2F723341942-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1pGOu8uVH5l8KqPEPmKi%252Fuploads%252FLlOgCh9juEBckJ0uV8hG%252Fimage.png%3Falt%3Dmedia%26token%3D123e27a0-172a-46ed-b44f-dd0acec2eded&width=768&dpr=4&quality=100&sign=8738ce88&sv=1)
That's really nice, however this approach has it's limits. At some point you'll want to test in a real Keycloak to make sure everything works. Also you don't necessary know the kcContext values to provides in order to replicate a desired configuration.
Don't worry! Keycloakify got you covered by letting you test in a local Keycloak Docker container.
In a Keycloak Docker ContainerLast updated