# With Vite or Webpack in dev mode {% tabs %} {% tab title="Vite" %} {% hint style="info" %} TLDR: * Uncomment the `getKcContextMock()` in **src/main.tsx** * **npm run dev** * Don't forget to comment again when you're done testing. {% endhint %} {% endtab %} {% tab title="Webpack" %} {% hint style="info" %} TLDR: * Uncomment the `getKcContextMock()` in **src/index.tsx** * **npm run start** * Don't forget to comment again when you're done testing. {% endhint %} {% endtab %} {% endtabs %} If you don't have Storybook in your project you can also test your theme with the dev server. To do that, just uncomment some line in your entrypoint: {% tabs %} {% tab title="Vite" %}

import { createRoot } from "react-dom/client";
import { StrictMode, lazy, Suspense } from "react";

import { getKcContextMock } from "./login/KcPageStory";

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

const KcLoginThemePage = lazy(() => import("./login/KcPage"));
const KcAccountThemePage = lazy(() => import("./account/KcPage"));

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <Suspense>
            {(() => {
                switch (window.kcContext?.themeType) {
                    case "login":
                        return <KcLoginThemePage kcContext={window.kcContext} />;
                    case "account":
                        return <KcAccountThemePage kcContext={window.kcContext} />;
                }
                return <h1>No Keycloak Context</h1>;
            })()}
        </Suspense>
    </StrictMode>
);

{% endtab %} {% tab title="Webpack" %}

import { createRoot } from "react-dom/client";
import { StrictMode, lazy, Suspense } from "react";

import { getKcContextMock } from "./login/KcPageStory";

if (process.env.NODE_ENV === "development") {
    window.kcContext = getKcContextMock({
        pageId: "register.ftl",
        overrides: {}
    });
}

const KcLoginThemePage = lazy(() => import("./login/KcPage"));
const KcAccountThemePage = lazy(() => import("./account/KcPage"));

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <Suspense>
            {(() => {
                switch (window.kcContext?.themeType) {
                    case "login":
                        return <KcLoginThemePage kcContext={window.kcContext} />;
                    case "account":
                        return <KcAccountThemePage kcContext={window.kcContext} />;
                }
                return <h1>No Keycloak Context</h1>;
            })()}
        </Suspense>
    </StrictMode>
);

{% endtab %} {% endtabs %} The pageId parameter of the getKcContextMock let you decide what page you want to test.\ The overrides parameter let you modify the the default kcContext mock for the page.\ \ For example you can set: ```tsx window.kcContext = getKcContextMock({ pageId: "login.ftl", overrides: { locale: { currentLanguageTag: "zh-CN", }, }, }); ``` For rendering the Login page in Chinese. You can then run the development server with: {% tabs %} {% tab title="Vite" %} ```bash npm run dev ``` {% endtab %} {% tab title="Webpack (Create React App)" %} ```bash npm run start ``` {% endtab %} {% endtabs %}

{% hint style="warning" %} 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. {% endhint %}