website/docs: Clarify frontend development. Document local overrides. (#13586)
* website/docs: Clarify setup flow. Document local overrides. * Update website/docs/developer-docs/setup/frontend-dev-environment.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Co-authored-by: Dominic R <dominic@sdko.org> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/full-dev-environment.mdx Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/install-config/install/docker-compose.mdx Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/frontend-dev-environment.md Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> * Update website/docs/developer-docs/setup/full-dev-environment.mdx Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> * Update authentik/lib/default.yml Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> * fix linting to please the ci check --------- Signed-off-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Co-authored-by: Dominic R <dominic@sdko.org> Co-authored-by: Marcelo Elizeche Landó <marcelo@goauthentik.io>
This commit is contained in:
Teffen Ellis
@ -1,51 +1,82 @@
|
||||
---
|
||||
title: Frontend-only development environment
|
||||
title: Frontend development environment
|
||||
sidebar_label: Frontend development
|
||||
tags:
|
||||
- development
|
||||
- contributor
|
||||
- frontend
|
||||
- docker
|
||||
---
|
||||
|
||||
If you want to only make changes on the UI, you don't need a backend running from source. You can user the docker-compose install with a few customizations.
|
||||
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 (any recent version should work; we use 22.x to build)
|
||||
- Make (again, any recent version should work)
|
||||
- Docker and Docker Compose
|
||||
- [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 from https://github.com/goauthentik/authentik.
|
||||
2. In the cloned repository, follow the docker-compose installation instructions [here](../../install-config/install/docker-compose).
|
||||
3. Add the following entry to your `.env` file:
|
||||
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
|
||||
```
|
||||
|
||||
This will cause authentik to use the beta images.
|
||||
:::
|
||||
|
||||
4. Add this volume mapping to your compose file.
|
||||
2. From the cloned repository, follow the Docker Compose [installation instructions](../../install-config/install/docker-compose).
|
||||
|
||||
```yaml
|
||||
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
|
||||
```
|
||||
|
||||
This makes the local web files and the config file available to the authentik server.
|
||||
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. Run `docker compose up -d` to apply those changes to your containers.
|
||||
6. `cd web`
|
||||
7. Run `npm i` and then `npm run watch` to start the build process.
|
||||
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).
|
||||
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
---
|
||||
title: Full development environment
|
||||
sidebar_label: Full development
|
||||
tags:
|
||||
- development
|
||||
- contributor
|
||||
- backend
|
||||
- frontend
|
||||
- docker
|
||||
---
|
||||
|
||||
import Tabs from "@theme/Tabs";
|
||||
@ -8,13 +15,14 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
|
||||
|
||||
## Requirements
|
||||
|
||||
- [Python](https://www.python.org/) 3.12
|
||||
- [uv](https://docs.astral.sh/uv/getting-started/installation/), which is used to manage dependencies
|
||||
- [Go](https://go.dev/) 1.23 or newer
|
||||
- [Node.js](https://nodejs.org/en) 22 or newer
|
||||
- [PostgreSQL](https://www.postgresql.org/) 16 or newer
|
||||
- [Redis](https://redis.io/) (any recent version will do)
|
||||
- [Docker](https://www.docker.com/) (Community Edition will do)
|
||||
- [Python](https://www.python.org/) (3.12 or later)
|
||||
- [uv](https://docs.astral.sh/uv/getting-started/installation/), (Latest stable release)
|
||||
- [Go](https://go.dev/) (1.23 or later)
|
||||
- [Node.js](https://nodejs.org/en) (22 or later)
|
||||
- [PostgreSQL](https://www.postgresql.org/) (16 or later)
|
||||
- [Redis](https://redis.io/) (7 or later)
|
||||
- [Docker](https://www.docker.com/) (Latest Community Edition or Docker Desktop)
|
||||
- [Docker Compose](https://docs.docker.com/compose/) (Compose v2)
|
||||
|
||||
## Services Setup
|
||||
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
---
|
||||
title: Website development environment
|
||||
title: Docs development environment
|
||||
sidebar_label: Docs development
|
||||
tags:
|
||||
- development
|
||||
- contributor
|
||||
- docs
|
||||
- docusaurus
|
||||
---
|
||||
|
||||
If you want to only make changes to the website, you only need node.
|
||||
|
||||
Reference in New Issue
Block a user