Update readme
This commit is contained in:
parent
88562b8d69
commit
2e7c089596
81
README.md
81
README.md
|
@ -4,7 +4,7 @@
|
||||||
<br/>
|
<br/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
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-webpack).
|
||||||
|
|
||||||
# Quick start
|
# Quick start
|
||||||
|
|
||||||
|
@ -12,36 +12,25 @@ This starter is based on Vite. There is also [a Webpack based starter](https://g
|
||||||
git clone https://github.com/keycloakify/keycloakify-starter
|
git clone https://github.com/keycloakify/keycloakify-starter
|
||||||
cd keycloakify-starter
|
cd keycloakify-starter
|
||||||
yarn install
|
yarn install
|
||||||
# Generate the dist_keycloak/.jar file that you can import in Keycloak
|
|
||||||
yarn build-keycloak-theme
|
|
||||||
```
|
```
|
||||||
|
> NOTE: This setup uses yarn as the default but you can use any package manager you like.
|
||||||
|
|
||||||
# Storybook
|
# Testing the theme locally
|
||||||
|
|
||||||
Spin up a test environment for your Keycloak pages.
|
[Documentation](https://docs.keycloakify.dev/v/v10/testing-your-theme)
|
||||||
|
|
||||||
|
# How to customize the theme
|
||||||
|
|
||||||
|
[Documentation](https://docs.keycloakify.dev/v/v10/customization-strategies)
|
||||||
|
|
||||||
|
# Building the theme
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx keycloakify add-story # Select the pages you want to add stories for
|
npm run build-keycloak-theme
|
||||||
yarn storybook # Start Storybook
|
|
||||||
```
|
```
|
||||||
|
|
||||||
# Test in a real Keycloak environment
|
Note that by default Keycloakify generates multiple .jar files for different versions of Keycloak.
|
||||||
|
You can customize this behavior, see documentation [here](https://docs.keycloakify.dev/v/v10/targetting-specific-keycloak-versions).
|
||||||
Test your theme in a local Keycloak docker container.
|
|
||||||
You need to have Docker running. Install [Docker Desktop](https://www.docker.com/products/docker-desktop/) if you don't have it.
|
|
||||||
|
|
||||||
```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
|
# GitHub Actions
|
||||||
|
|
||||||
|
@ -52,47 +41,3 @@ 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:
|
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`.
|
`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(
|
|
||||||
<StrictMode>
|
|
||||||
<Suspense>
|
|
||||||
{(() => {
|
|
||||||
switch (window.kcContext?.themeType) {
|
|
||||||
case "login":
|
|
||||||
return <KcLoginThemeApp kcContext={window.kcContext} />;
|
|
||||||
- case "account":
|
|
||||||
- return <KcAccountThemeApp kcContext={window.kcContext} />;
|
|
||||||
}
|
|
||||||
return <h1>No Keycloak Context</h1>;
|
|
||||||
})()}
|
|
||||||
</Suspense>
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
Loading…
Reference in a new issue