Skip to main content

Frontend development environment

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

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.

    git clone https://github.com/goauthentik/authentik
    cd authentik
  2. From the cloned repository, follow the Docker Compose installation instructions.

  3. Create a .env file in the root of the repository to configure the Docker Compose environment.

    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
    GIT_BUILD_HASH="dev"
  4. Create a Docker Compose override to mount the local configuration file (local.env.yml) and ESBuild's output directory (web).

    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.

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

    cd web
    npm ci
  6. From the cloned repository root, run the front-end build script.

    make web-watch
  7. In a new terminal, navigate to the cloned repository root and start the backend containers with Docker Compose.

    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/.