---
title: Frontend development environment
sidebar_label: Frontend development
tags:
    - development
    - contributor
    - frontend
    - docker
---

If you're focusing solely on frontend development, you can create a minimal development environment using Docker and Node.js. This setup allows you to make and preview changes to the frontend in real-time, without needing to interact with the backend.

### Prerequisites

- [Node.js](https://nodejs.org/en) (24 or later)
- [Docker](https://www.docker.com/) (Latest Community Edition or Docker Desktop)
- [Docker Compose](https://docs.docker.com/compose/) (Compose v2)
- [Make](https://www.gnu.org/software/make/) (3 or later)

:::info

Depending on platform, some native dependencies might be required. On macOS, run `brew install node@24`, and for Docker `brew install --cask docker`

:::

### Instructions

1. Clone the Git repo to your development machine and navigate to the authentik directory.

    ```shell
    git clone https://github.com/goauthentik/authentik
    cd authentik
    ```

    :::info Beta images
    By default, authentik will use the latest stable Docker images.
    You can opt into using beta images during development by creating a `.env` file in the root of the repository with the following variables:

    ```shell
    AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
    AUTHENTIK_TAG=gh-next
    AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-next
    AUTHENTIK_LOG_LEVEL=debug
    ```

    :::

2. From the cloned repository, follow the Docker Compose [installation instructions](../../install-config/install/docker-compose).

3. Create a Docker Compose override to mount the local configuration file (`local.env.yml`) and ESBuild's output directory (`web`).

    ```yaml title="docker-compose.override.yml"
    services:
        server:
            volumes:
                - ./web:/web
                - ./local.env.yml:/local.env.yml
    ```

    By creating this file in the root of the repository, Docker will automatically mount the web files generated by the build process. The `local.env.yml` mount is optional, but allows you to override the default configuration.

4. From the cloned repository root, install the front-end dependencies using NPM.

    ```shell
    cd web
    npm ci
    ```

5. From the cloned repository root, run the front-end build script.

    ```shell
    make web-watch
    ```

6. In a new terminal, navigate to the cloned repository root and start the backend containers with Docker Compose.

    ```shell
    docker compose up
    ```

You can now access authentik on http://localhost:9000 (or https://localhost:9443).

You might also want to complete the initial setup under `/if/flow/initial-setup/`.