From 2bbad64dc31158627c31e077800acf50bfe62cb0 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 21 Jun 2021 21:25:56 +0200
Subject: [PATCH] website/docs: add developer docs for frontend-only

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../frontend-only-dev-environment.md          | 39 +++++++++++++++++++
 ...environment.md => full-dev-environment.md} |  3 +-
 website/developer-docs/index.md               |  7 ++++
 website/sidebarsDev.js                        | 10 ++++-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 website/developer-docs/frontend-only-dev-environment.md
 rename website/developer-docs/{local-dev-environment.md => full-dev-environment.md} (98%)
 create mode 100644 website/developer-docs/index.md

diff --git a/website/developer-docs/frontend-only-dev-environment.md b/website/developer-docs/frontend-only-dev-environment.md
new file mode 100644
index 000000000..5a5c42f6a
--- /dev/null
+++ b/website/developer-docs/frontend-only-dev-environment.md
@@ -0,0 +1,39 @@
+---
+title: Frontend-only development environment
+---
+
+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.
+
+1. Clone the git repo from https://github.com/goauthentik/authentik
+2. In the cloned repository, follow the docker-compose installation instructions [here](../../docs/installation/docker-compose)
+3. Add the following entry to your `.env` file:
+
+    ```
+    AUTHENTIK_WEB__LOAD_LOCAL_FILES=true
+    ```
+
+    This will cause authentik to load static files from a folder and ignore the bundeled files.
+
+4. Add this volume mapping to your compose file
+
+    ```yaml
+    version: '3.2'
+
+    services:
+        # [...]
+        server:
+            # [...]
+            volumes:
+            - ./web:/web
+    ```
+
+    This makes the local web files available to the authentik server.
+
+5. Run `docker-compose up -d` to apply those changes to your containers.
+6. Run `make gen-web` in the project root directory to generate the API Client used by the web interfaces
+7. `cd web`
+8. Run `npm i` and then `npm run watch` to start the build process.
+
+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/`.
diff --git a/website/developer-docs/local-dev-environment.md b/website/developer-docs/full-dev-environment.md
similarity index 98%
rename from website/developer-docs/local-dev-environment.md
rename to website/developer-docs/full-dev-environment.md
index 7bb909c01..cfb14bdd1 100644
--- a/website/developer-docs/local-dev-environment.md
+++ b/website/developer-docs/full-dev-environment.md
@@ -1,6 +1,5 @@
 ---
-title: Getting started
-slug: /
+title: Full development environment
 ---
 
 ## Backend
diff --git a/website/developer-docs/index.md b/website/developer-docs/index.md
new file mode 100644
index 000000000..6b04ac78f
--- /dev/null
+++ b/website/developer-docs/index.md
@@ -0,0 +1,7 @@
+---
+title: Developer documentation
+slug: /
+---
+
+Welcome to the authentik developer documentation. authentik is fully open source and can be found here: https://github.com/goauthentik/authentik
+
diff --git a/website/sidebarsDev.js b/website/sidebarsDev.js
index 178804960..dd46082f4 100644
--- a/website/sidebarsDev.js
+++ b/website/sidebarsDev.js
@@ -2,7 +2,15 @@ module.exports = {
     docs: [
         {
             type: "doc",
-            id: "local-dev-environment",
+            id: "index",
+        },
+        {
+            type: "doc",
+            id: "full-dev-environment",
+        },
+        {
+            type: "doc",
+            id: "frontend-only-dev-environment",
         },
         {
             type: "doc",