# In your Webpack Project If you have a Webpack/React/TypeScript project you can integrate Keycloakify directly inside it. In this guide we're going to work with a vanilla [Create React App](https://create-react-app.dev/) project.

Creating a CRA project. You don't need to do that, just use your existing codebase.

Our codebase before involving Keycloakify

{% hint style="info" %} Before anything make sure to commit all your pending changes so you can easily revert changes if need be. {% endhint %} Let's start by installing Keycloakify (and optionally Storybook) to our project: {% tabs %} {% tab title="yarn" %} ```bash yarn add keycloakify yarn add --dev rimraf storybook @storybook/react @storybook/react-vite ``` {% endtab %} {% tab title="pnpm" %} ```bash pnpm add keycloakify pnpm add --dev rimraf storybook @storybook/react @storybook/react-vite ``` {% endtab %} {% tab title="bun" %} ```bash bun add keycloakify bun add --dev rimraf storybook @storybook/react @storybook/react-vite ``` {% endtab %} {% tab title="npm" %} ```bash npm install --save keycloakify npm install --save-dev rimraf storybook @storybook/react @storybook/react-vite ``` {% endtab %} {% endtabs %} Next we want to repatriate the relevant files from [the starter template](https://github.com/keycloakify/keycloakify-starter) into our project: ```bash cd my-app git clone https://github.com/keycloakify/keycloakify-starter-webpack tmp mv tmp/src src/keycloak-theme mv tmp/.storybook . rm -rf tmp rm src/keycloak-theme/react-app-env.d.ts mv src/keycloak-theme/index.tsx src/index.tsx ```

Sate of your codebase after bringing in Keycloakify's starter boilerplate code

Now you want to modify your entry point so that: * If the kcContext global is defined, render your Keycloakify theme * Else, render your App as usual.

/* eslint-disable react-refresh/only-export-components */
import { createRoot } from "react-dom/client";
import { 
    StrictMode,
    lazy,
    Suspense
} from "react";
import { KcPage, type KcContext } from "./keycloak-theme/kc.gen";
const App = lazy(()=> import("./App"));

// 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 "./keycloak-theme/login/KcPageStory";

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

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        {window.kcContext ? (
            <KcPage kcContext={window.kcContext} />
        ) : (
            <Suspense>
                <App />
            </Suspense>
        )}
    </StrictMode>
);

declare global {
    interface Window {
        kcContext?: KcContext;
    }
}

{% hint style="info" %} **Question:** Why do my main application and Keycloak theme share the same entry point? **Answer:** To simplify the build process. If you don't want it to negatively impact the performance of your application, it's essential to understand the following points: * **Different Contexts:** The application (`App`) and Keycloak page (`KcPage`) are mounted in very different contexts. Avoid sharing providers between the two at the `main.tsx` file level. The true entry point of your application is the `App` component, while the entry point for your Keycloak theme is the `KcPage` component. Be careful about what code is shared between them. * **Responsibility of main.tsx:** The `main.tsx` file should only determine the context (either the application or Keycloak) and mount the appropriate component (`App` or `KcPage`). It should not contain any substantial logic or dependencies. * **Performance Considerations:** Keep `main.tsx` as lightweight as possible to avoid increasing the initial load time of both your main application and login pages. For example, do not load any state management libraries like `redux-toolkit` at this level. {% endhint %} Finally you want to add some script for Keycloakify in you package.json and also let Keycloakify know about how your Webpack project is configured.

{
    "name": "my-app",
    "scripts": {
        "prestart": "keycloakify update-kc-gen && keycloakify copy-keycloak-resources-to-public",
        "start": "react-scripts start",
        "prestorybook": "npm run prestart",
        "storybook": "storybook dev -p 6006",
        "prebuild": "keycloakify update-kc-gen",
        "build": "react-scripts build",
        "postbuild": "rimraf build/keycloakify-dev-resources",
        "build-keycloak-theme": "npm run build && keycloakify build",
        "format": "prettier . --write"
        // ...
    },
    "keycloakify": {
        "accountThemeImplementation": "none",
        "projectBuildDirPath": "build",
        "staticDirPathInProjectBuildDirPath": "static",
        "publicDirPath": "public"
    },
    // ...

{% hint style="info" %} Leave accountThemeImplementation set to "none" for now.\ To initialize the account theme refer to [this guide](/keycloakify/v10/account-theme.md). {% endhint %} Keycloakify has many build options that you can use, however `projectBuildDirPath`, `staticDirPathInProjectBuildDirPath` and `publicDirPath` are parameters specific to the use of Keycloakify in a Webpack context. Theses **are not preferences!** If you're not using Create React App your Webpack configuration is probably different and you want to update those values to reflect how webpack build your site in your project.

Here you can see that in a CRA project, when we run `npm run build` the app distribution is generated in a **build/** directory, this is why we use `"projectBuildDirPath": "build"`. We can also see that all the assets of the app are gathered under a `static/` directory this is why we use `"staticDirPathInProjectBuildDirPath": "static"`. And finally we can see that everything we put in the **public/** directory is copied over to the **build/** directory when building so we use `"publicDirPath": "public"`.

That's it, your project is ready to go! You can run `npm run build-keycloak-theme`, the JAR distribution of your Keycloak theme will be generated in `build_keycloak` ([you can change this](/keycloakify/v10/configuration-options/keycloakifybuilddirpath.md)). You're now able to use all the Keycloakify commands (`npx keycloakify --help`) from the root of your project. {% hint style="success" %} If you're currently using [keycloak-js](https://www.npmjs.com/package/keycloak-js) or [react-oidc-context](https://github.com/authts/react-oidc-context) to manage user authentication in your app you might want to checkout [oidc-spa](https://www.oidc-spa.dev/), the alternative from the Keycloakify team. If you have any issues [reach out on Discord](https://discord.gg/mJdYJSdcm4)! We're here to help! {% endhint %} {% content-ref url="/pages/6zsjToyFtGwfJpF6IgrG" %} [Testing your Theme](/keycloakify/v10/testing-your-theme.md) {% endcontent-ref %} {% content-ref url="/pages/YK0LL0dGU1QbQCeJQo1X" %} [Customization Strategies](/keycloakify/v10/customization-strategies.md) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.keycloakify.dev/keycloakify/v10/keycloakify-in-my-codebase/in-your-react-project/in-your-webpack-project.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.