website: Flesh out docs split.

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.
2025-06-17 21:02:38 +02:00
parent b10c795a26
commit 582812b3ec
704 changed files with 5179 additions and 4670 deletions
--- a/docs/topics/developer-docs/setup/frontend-dev-environment.md
+++ b/docs/topics/developer-docs/setup/frontend-dev-environment.md
@ -0,0 +1,83 @@
+---
+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.mdx).
+
+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/`.