Keycloakify
GitHubHome
v5
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v5
  • ๐ŸRequirements
  • ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘จ๐Ÿ’ป Quick start
  • ๐ŸงชDevelopment
  • ๐Ÿ“งEmail customization
  • โœ’๏ธTerms and conditions
  • โœ…Realtime input validation
  • โš ๏ธLimitations
  • ๐ŸŒ‰Context persistence
  • ๐ŸŒAdding i18n messages keys
  • โšกPerformance optimization
  • ๐Ÿ’‚Email domain acceptlist
  • ๐Ÿ›‘Keycloak error in log
  • ๐Ÿ’ŸContributing
Powered by GitBook
On this page
  • Adding support for a new page
  • Testing your changes in the demo app (or in your project)

Was this helpful?

Edit on GitHub
Export as PDF

Contributing

Looking for submitting a PR? Thank you!

PreviousKeycloak error in log

Last updated 2 years ago

Was this helpful?

Adding support for a new page

that adds support for a page.

If you need to edit the i18n resources it should be done (and not in the src/lib/i18n/generated_kcMessages dir).

The keycloakify components are a plain React translation of the default theme that comes with Keycloak v11.0.3.

You can download the FTL/CSS source files the components are based on with the following command:

npx -p keycloakify download-builtin-keycloak-theme

then select version 11.0.3 ().

Testing your changes in the demo app (or in your project)

Let's assume you have made some change to the keycloakify codebase and you want to test those changes before submitting a PR.

Assuming you have cloned keycloakify in ~/github/keycloakify this is how you would proceed.

cd ~/github # Navigate to the dir where you have the keycloakify project
git clone https://github.com/garronej/keycloakify-demo-app
cd keycloakify
yarn 
yarn build
yarn link_in_test_app
npx tsc -w #This will start the compilation of Keycloakify in watch mode
           #You will be able to perform changes on the keycloakify code
           #and see them apply live in the keycloakify-demo-app

Open a new terminal window

cd ~/github
cd keycloakify-demo-app
yarn start

Now you are able to test your local version of Keycloakify in the test app and make sure everything works as expected.

If you want to link your local version of keycloakify in your own app instead of the keycloakify-demo-app just run yarn link_in_test_app <your_app>

Heads over the development instruction if you are not already familiar with the process of testing your Keycloakify themes:

๐Ÿ’Ÿ
Here is an example of a good PR
here
Video demo
๐ŸงชDevelopment