> For the complete documentation index, see [llms.txt](https://docs.keycloakify.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.keycloakify.dev/keycloakify/v9/keycloakify-in-my-app.md).

# Keycloakify in my App

{% tabs %}
{% tab title="Vite" %}
If you are starting a new project, the best approach is to fork the starter repo, read its readme and start from here.

{% embed url="<https://github.com/keycloakify/keycloakify-starter>" %}

If you are familiar with how Keycloakify work and you want to set it up in an existing Vite project here is what you need to do:

#### Add it to your dependencies

```bash
yarn add keycloakify # Or npm install --save keycloakify
```

#### Enable the Keycloakify's Vite plugin

<pre class="language-tsx" data-title="vite.config.ts"><code class="lang-tsx">import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
<strong>import { keycloakify } from "keycloakify/vite-plugin";
</strong>
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
<strong>    keycloakify()
</strong>  ]
})
</code></pre>

#### Register the command to build your theme

<pre class="language-json" data-title="package.json"><code class="lang-json">...
  "scripts": {
    "dev": "vite",
    "build": "tsc &#x26;&#x26; vite build",
    "storybook": "storybook dev -p 6006",
<strong>    "build-keycloak-theme": "yarn build &#x26;&#x26; keycloakify"
</strong>  },
...
</code></pre>

{% hint style="info" %}
Monorepos: You can run Keycloakify from the root of your project with:

`npx keycloakify --project <path>`

`<path>` would be typically something like `packages/keycloak-theme`
{% endhint %}

#### Storybook: List the public/ directory as static dir

<pre class="language-typescript" data-title=".storybook/main.ts"><code class="lang-typescript">import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ...
<strong>  staticDirs: ["../public"]
</strong>};
export default config;
</code></pre>

#### Sources directory structure

The acceptable directory hierarchy is the following:

```
src/
  keycloak-theme/
    login/
    account/
    email/
    
===OR===

src/
  foo/
    bar/
      keycloak-theme/
        login/
        account/
        email/

===OR===

src/
  login/
  account/
  email/
```

You can have only `login` for example if you don't implement and account or email theme.

You need, however, to have a `src` directory. This is not customizable.
{% endtab %}

{% tab title="Create React App (Webpack)" %}
{% embed url="<https://github.com/keycloakify/keycloakify-starter-cra>" %}
Create React App version of the starter
{% endembed %}

If you are familiar with how Keycloakify work and you want to set it up in an existing Create React App project here is what you need to do:

{% hint style="info" %}
If your project is using Webpack but not Create React App you might want to checkout [this thread](https://github.com/keycloakify/keycloakify/issues/384).
{% endhint %}

#### Add it to your dependencies

```bash
yarn add keycloakify rimraf # Or npm install --save keycloakify rimraf
```

#### Register the commands to build your theme

{% code title="package.json" %}

```json
...
  "scripts": {
    "start": "copy-keycloak-resources-to-public && react-scripts start",
    "storybook": "copy-keycloak-resources-to-public && start-storybook -p 6006",
    "build": "react-scripts build && rimraf build/keycloak-resources",
    "build-keycloak-theme": "yarn build && keycloakify"
  },
...
```

{% endcode %}

{% hint style="info" %}
Monorepos: You can run Keycloakify from the root of your project with:

`npx keycloakify --project <path>`

`<path>` would be typically something like `packages/keycloak-theme`
{% endhint %}

#### Storybook: List the public/ directory as static dir

<pre class="language-typescript" data-title=".storybook/main.ts"><code class="lang-typescript">import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  // ...
<strong>  staticDirs: ["../public"]
</strong>};
export default config;
</code></pre>

#### Sources directory structure

The acceptable directory hierarchy is the following:

```
src/
  keycloak-theme/
    login/
    account/
    email/
    
===OR===

src/
  foo/
    bar/
      keycloak-theme/
        login/
        account/
        email/

===OR===

src/
  login/
  account/
  email/
```

You can have only `login` for example if you don't implement and account or email theme.

You need, however, to have a `src` directory. This is not customizable.
{% endtab %}
{% endtabs %}

{% embed url="<https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-doc-keycloakify-in-my-app>" %}
Feeling overwhelmed? Check out our exclusive sponsor's Cloud-IAM consulting services to simplify your experience.
{% endembed %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.keycloakify.dev/keycloakify/v9/keycloakify-in-my-app.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.