a4f92f5e30
web: Update config. Flesh out build. Fix issue surrounding build. Fix paths. Update workspaces. Fix build steps. Apply linter. Temporarily remove problem rules. Add ignorefile. Prep for formatting. Lint website. Lint web, repo packages. Refine Prettier usage. Fix imports. Tidy build. Move node ignore files. Remove unused. Update job. Fix lint step. Build before compiling. Use root for paths. Fix issues surrounding import references, types, package names. Fix build paths. Tidy. Enforce prefix. Apply prefixes to imports. Enable linter, compiler, etc. Fix references. Update names. Mark optional. Revise mounts. Fix build order. Update package.json. Ignore all docusaurus. Fix paths, types. Clean up build steps, names. Fix paths. website: Fix nested paragraphs build warning. web: Enforce module resolution. Use consistent LTS version. Track Node version. Use default resolution. Test main entrypoint. Fix Node v20 compatibility. Add task names. WIP: Fix styles.
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) (22 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@22`, 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
|
|
# From the root of the repository
|
|
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/`.
|