Files
authentik/website/docs/developer-docs/setup/frontend-dev-environment.mdx
Teffen Ellis 3537ea544d website/docs: document npm install-script blocking (#22461)
* website/docs: document npm install-script blocking

The repo's `.npmrc` sets `ignore-scripts=true` to neutralize the
dominant npm supply-chain attack pattern (preinstall/postinstall
payloads, as used by the recent "Shai-Hulud" and "Mini Shai-Hulud"
incidents). The trade-off is that a handful of packages that ship
native binaries — esbuild, chromedriver, tree-sitter — need to be
rebuilt explicitly when their install step is required.

Today this is implicit; a new contributor whose build fails because
esbuild's binary didn't unpack has no obvious next step except to
disable the protection. Documenting it in both setup guides points
them at `npm rebuild --foreground-scripts <pkg>` and makes the
"don't flip `ignore-scripts` off" guidance explicit.

No code or config changes — docs only.

Co-authored-by: Agent <279763771+playpen-agent@users.noreply.github.com>

* Use separate file.

* Apply suggestions from code review

Co-authored-by: Dewi Roberts <dewi@goauthentik.io>
Signed-off-by: Dewi Roberts <dewi@goauthentik.io>

---------

Signed-off-by: Dewi Roberts <dewi@goauthentik.io>
Co-authored-by: Agent <279763771+playpen-agent@users.noreply.github.com>
Co-authored-by: Dewi Roberts <dewi@goauthentik.io>
2026-05-21 12:47:49 +00:00

69 lines
2.9 KiB
Plaintext

---
title: Frontend development environment
sidebar_label: Frontend development
tags:
- development
- contributor
- frontend
- docker
---
import NPMInstallScriptsAdmonition from "./\_npm-install-scripts-admonition.mdx";
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)
### 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
```
2. Run the following to create a `.env` file in the `lifecycle/container` directory of the repository to configure the Docker Compose environment.
```shell
echo "PG_PASS=$(openssl rand -base64 36 | tr -d '\n')" >> ./lifecycle/container/.env
echo "AUTHENTIK_SECRET_KEY=$(openssl rand -base64 60 | tr -d '\n')" >> ./lifecycle/container/.env
echo "AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server" >> ./lifecycle/container/.env
echo "AUTHENTIK_TAG=gh-next" >> ./lifecycle/container/.env
echo "AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-next" >> ./lifecycle/container/.env
echo "AUTHENTIK_LOG_LEVEL=debug" >> ./lifecycle/container/.env
echo 'GIT_BUILD_HASH="dev"' >> ./lifecycle/container/.env
```
3. Create a Docker Compose override file (`compose.override.yml`) in the root of the repository. This will override the volume configurations for the local configuration file (`local.env.yml`) and mount the directory for the frontend code (`web`) into the docker containers. 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.
```yaml title="compose.override.yml"
services:
server:
volumes:
- ${PWD}/web:/web
- ${PWD}/local.env.yml:/local.env.yml
```
4. From the repository root, run the frontend build script. This will install the npm packages needed to run the frontend project and start the project in watch mode.
```shell
make node-install
make web-watch
```
<NPMInstallScriptsAdmonition />
5. In a new terminal, navigate to the cloned repository root and start the backend containers with Docker Compose.
```shell
docker compose -f lifecycle/container/compose.yml -f compose.override.yml up -d
```
You can now access authentik on http://localhost:9000 (or https://localhost:9443).