website: Copy files during build. website: Allow for mixed env builds. website: Reduce build size. website: Expose build. website: Add build memory debugging. WIP: Disable broken links check to compare memory usage. website: Update deps. website: Clean up API paths. website: Flesh out 3.8 fixes. Format. website: Update ignore paths. Website: Clean up integrations build. website: Fix paths. website: Optimize remark. website: Update deps. website: Format. website: Remove linking. website: Fix paths. wip: Attempt API only build. Prep. Migrate render to runtime. Tidy sidebar. Clean up templates. docs: Move directory. WIP docs: Flesh out split. website: Fix issue where routes have collisions.
2.7 KiB
title, sidebar_label, tags
| title | sidebar_label | tags | ||||
|---|---|---|---|---|---|---|
| Frontend development environment | Frontend development |
|
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 (24 or later)
- Docker (Latest Community Edition or Docker Desktop)
- Docker Compose (Compose v2)
- 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
-
Clone the Git repo to your development machine and navigate to the authentik directory.
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
.envfile in the root of the repository with the following variables: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:::
-
From the cloned repository, follow the Docker Compose installation instructions.
-
Create a Docker Compose override to mount the local configuration file (
local.env.yml) and ESBuild's output directory (web).services: server: volumes: - ./web:/web - ./local.env.yml:/local.env.ymlBy creating this file in the root of the repository, Docker will automatically mount the web files generated by the build process. The
local.env.ymlmount is optional, but allows you to override the default configuration. -
From the cloned repository root, install the front-end dependencies using NPM.
cd web npm ci -
From the cloned repository root, run the front-end build script.
make web-watch -
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/.