Migrate to Keycloakify v10
This commit is contained in:
Joseph Garrone
45
README.md
45
README.md
@ -12,12 +12,12 @@
|
||||
|
||||
This repo constitutes an easily reusable setup for a Keycloak theme project OR for a Vite SPA React App that generates a
|
||||
Keycloak theme that goes along with it.
|
||||
If you are only looking to create a Keycloak theme (and not a Keycloak theme and an App that share the same codebase) there are a lot of things that you can remove from this starter: [Please read this section of the README](#i-only-want-a-keycloak-theme).
|
||||
If you are only looking to create a Keycloak theme (and not a Keycloak theme and an App that share the same codebase) there are a lot of things that you can remove from this starter: [Please read this section of the README](#i-only-want-a-keycloak-theme).
|
||||
|
||||
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-cra).
|
||||
|
||||
> 📣 Looking for a library for redirecting your user to Keycloak when they click on the 'Login' button?
|
||||
> Check out [oidc-spa](https://oidc-spa.dev) It's made by us and it's used in the [src/App](https://github.com/keycloakify/keycloakify-starter/tree/main/src/App) of this starter.
|
||||
> Check out [oidc-spa](https://oidc-spa.dev) It's made by us and it's used in the [src/App](https://github.com/keycloakify/keycloakify-starter/tree/main/src/App) of this starter.
|
||||
|
||||
# Quick start
|
||||
|
||||
@ -30,14 +30,14 @@ yarn # install dependencies (it's like npm install)
|
||||
|
||||
yarn storybook # Start Storybook
|
||||
# This is by far the best way to develop your theme
|
||||
# This enable to quickly see your pages in isolation and in different states.
|
||||
# This enable to quickly see your pages in isolation and in different states.
|
||||
# You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
|
||||
# See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories
|
||||
|
||||
yarn dev # See the Hello World app
|
||||
# Uncomment line 97 of src/keycloak-theme/login/kcContext where it reads: `mockPageId: "login.ftl"`, reload https://localhost:3000
|
||||
# You can now see the login.ftl page with the mock data. (Don't forget to comment it back when you're done)
|
||||
|
||||
|
||||
# Install mvn (Maven) if not already done. On mac it's 'brew install maven', on Ubuntu/Debian it's 'sudo apt-get install maven'
|
||||
|
||||
yarn build-keycloak-theme # Actually build the theme (generates the .jar to be imported in Keycloak)
|
||||
@ -45,11 +45,11 @@ yarn build-keycloak-theme # Actually build the theme (generates the .jar to be i
|
||||
# your theme on a real Keycloak instance.
|
||||
|
||||
npx eject-keycloak-page # Prompt that let you select the pages you want to customize
|
||||
# This CLI tools is not guaranty to work, you can always copy pase pages
|
||||
# This CLI tools is not guaranty to work, you can always copy pase pages
|
||||
# from the Keycloakify repo.
|
||||
# After you ejected a page you need to edit the src/keycloak-theme/login(or admin)/KcApp.tsx file
|
||||
# You need to add a case in the switch for the page you just imported in your project.
|
||||
# Look how it's done for the Login page and replicate for your new page.
|
||||
# You need to add a case in the switch for the page you just imported in your project.
|
||||
# Look how it's done for the Login page and replicate for your new page.
|
||||
|
||||
npx initialize-email-theme # For initializing your email theme
|
||||
# Note that Keycloakify does not feature React integration for email yet.
|
||||
@ -61,17 +61,17 @@ npx download-builtin-keycloak-theme # For downloading the default theme (as a re
|
||||
## Using a development container
|
||||
|
||||
This starter supports [development containers](https://containers.dev/). You can customize the configuration file [`.devcontainer.json`](./.devcontainer/devcontainer.json) to your liking.
|
||||
Checkout [this video](https://www.youtube.com/watch?v=cB86HE_HIDc) to understand dev containers and how to set up your environment.
|
||||
Checkout [this video](https://www.youtube.com/watch?v=cB86HE_HIDc) to understand dev containers and how to set up your environment.
|
||||
|
||||
# Theme variant
|
||||
# Theme variant
|
||||
|
||||
Keycloakify enables you to create different variant for a single theme.
|
||||
This enable you to have a single jar that embed two or more theme variant.
|
||||
This enable you to have a single jar that embed two or more theme variant.
|
||||
|
||||
|
||||
|
||||
|
||||
You can enable this feature by providing multiple theme name in the Keycloakify build option.
|
||||
[See documentation](https://docs.keycloakify.dev/build-options#themename)
|
||||
[See documentation](https://docs.keycloakify.dev/build-options#themename)
|
||||
|
||||
# The CI workflow
|
||||
|
||||
@ -89,23 +89,22 @@ You can enable this feature by providing multiple theme name in the Keycloakify
|
||||
and when **releasing a new version**: `<org>/<repo>:latest` and `<org>/<repo>:X.Y.Z`
|
||||
[See on DockerHub](https://hub.docker.com/r/codegouvfr/keycloakify-starter)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# The storybook
|
||||
|
||||
# The storybook
|
||||
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
yarn
|
||||
yarn storybook
|
||||
```
|
||||
|
||||
# Docker
|
||||
# Docker
|
||||
|
||||
Instructions for building and running the react app (`src/App`) that is collocated with our Keycloak theme.
|
||||
Instructions for building and running the react app (`src/App`) that is collocated with our Keycloak theme.
|
||||
|
||||
```bash
|
||||
docker build -f Dockerfile -t keycloakify/keycloakify-starter:main .
|
||||
@ -115,8 +114,8 @@ docker run -it -dp 8083:80 keycloakify/keycloakify-starter:main
|
||||
|
||||
# I only want a Keycloak theme
|
||||
|
||||
If you are only looking to create a Keycloak theme and not a Theme + a React app, you can run theses few commands to refactor the template
|
||||
and remove unnecessary files.
|
||||
If you are only looking to create a Keycloak theme and not a Theme + a React app, you can run theses few commands to refactor the template
|
||||
and remove unnecessary files.
|
||||
|
||||
```bash
|
||||
cd path/to/keycloakify-starter
|
||||
@ -193,7 +192,7 @@ jobs:
|
||||
steps:
|
||||
- uses: garronej/ts-ci@v2.1.0
|
||||
id: step1
|
||||
with:
|
||||
with:
|
||||
action_name: is_package_json_version_upgraded
|
||||
branch: \${{ github.head_ref || github.ref }}
|
||||
|
||||
@ -226,4 +225,4 @@ jobs:
|
||||
EOF
|
||||
```
|
||||
|
||||
You can also remove `oidc-spa`, `powerhooks`, `zod` and `tsafe` from your dependencies.
|
||||
You can also remove `oidc-spa`, `powerhooks`, `zod` and `tsafe` from your dependencies.
|
||||
|
||||
Reference in New Issue
Block a user