Outside of Keycloak - Without Storybook

This option for testing your theme is a fallback option if you prefer avoiding introducing Storybook into your project.

To do that, just uncomment the following lines in your entrypoint:

src/[main|index].tsx?

import { createRoot } from "react-dom/client";
import { StrictMode } from "react";
import { KcPage } from "./kc.gen";

// The following block can be uncommented to test a specific page with `yarn dev`
// Don't forget to comment back or your bundle size will increase
// */
import { getKcContextMock } from "./login/KcPageStory";

if (import.meta.env.DEV) {
    window.kcContext = getKcContextMock({
        pageId: "register.ftl",
        overrides: {}
    });
}
// */

...

The pageId parameter of the getKcContextMock lets you decide what page you want to test. The overrides parameter lets you modify the default kcContext mock for the page. For example you can overwrite the kcContext.locale.currentLanguageTag to preview your page in a different language.

window.kcContext = getKcContextMock({
  pageId: "login.ftl",
  overrides: {
    locale: {
      currentLanguageTag: "zh-CN",
    },
  },
});

Then start the dev server of your, project:

npm run dev
# Or 'npm run start' (CRA) or 'npm run serve' (Angular Webpack)

When you're done testing, don't forget to comment back the import of the mock. Forgetting to do so will negatively impact the bundle size of your pages.