582812b3ec
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.
84 lines
2.7 KiB
Markdown
84 lines
2.7 KiB
Markdown
---
|
|
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/`.
|