Merge pull request #26 from trenz-gmbh/feature/capsule-config

.dockerignore

@@ -1,4 +1,7 @@
+**/.git
+.github/
 node_modules/
 .env.local
+*.local.json
 Dockerfile*
 README.md

.env.example

@@ -1,5 +0,0 @@
-VUE_APP_API_BASE=https://localhost:7262/api/
-VUE_APP_PRIMARY_COLOR='#8af'
-VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
-VUE_APP_NAME='My Wiki'
-VUE_APP_USE_AUTH=false

.github/scripts/docker-image-test.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# exit on error
+set -e
+
+# copy webapp settings
+cp public/webapp-settings.example.json webapp-settings.local.json
+
+# start server
+docker-compose up -d
+
+# test if the server is running and serves files
+requested_settings=$(curl http://localhost:5000/webapp-settings.json)
+
+# compare served file with actual file (a 404 or 50x error - or a timeout - would fail here)
+actual_settings=$(cat webapp-settings.local.json)
+if [ "$actual_settings" != "$requested_settings" ]; then
+  echo "Could not verify server functionality. Received settings:"
+  echo "$requested_settings"
+  exit 1
+fi
+
+echo "Received settings:"
+echo "$requested_settings"
+
+# test if homepage gets served without errors
+requested_homepage=$(curl http://localhost:5000/)
+echo "Received homepage:"
+echo "$requested_homepage"
+
+echo "Server seems to respond correctly."
+
+# shutdown server
+docker-compose down
+
+# cleanup
+rm webapp-settings.local.json
+
+exit 0

.github/workflows/docker-image.yml

@@ -0,0 +1,41 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    name: Build Docker Image
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        if: github.event_name != 'pull_request'
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Test docker-compose.yml
+        run: chmod +x ./.github/scripts/docker-image-test.sh && ./.github/scripts/docker-image-test.sh
+        shell: bash
+      - name: Build and push image
+        uses: docker/build-push-action@v3
+        if: github.event_name != 'pull_request'
+        with:
+          context: .
+          platforms: linux/amd64
+          push: true
+          tags: |
+            ghcr.io/${{ github.repository }}:latest
+            ghcr.io/${{ github.repository }}:${{ github.sha }}

.gitignore

@@ -7,6 +7,7 @@ node_modules
 .env.local
 .env.*.local
 appsettings.local.json
+public/webapp-settings.json
 
 # Log files
 npm-debug.log*

Dockerfile

@@ -2,15 +2,12 @@ FROM node:lts-alpine as build
 
 WORKDIR /app
 
-ARG VUE_APP_API_BASE
-ENV VUE_APP_API_BASE $VUE_APP_API_BASE
-
 # add node binaries to path
 ENV PATH /app/node_modules/.bin:$PATH
 
 # install dependencies and build tools
 COPY package*.json ./
-RUN npm install --silent
+RUN npm ci
 
 # build app
 COPY . .

README.md

@@ -3,36 +3,73 @@
 [![Node.js CI](https://github.com/trenz-gmbh/trenz-docs/actions/workflows/node.js.yml/badge.svg)](https://github.com/trenz-gmbh/trenz-docs/actions/workflows/node.js.yml)
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
-
 ## Deployment
 
 To deploy a trenz-docs wiki, follow these steps:
 
-1. clone this repository to the target server:
-   ```bash
-   git clone https://github.com/trenz-gmbh/trenz-docs my-wiki
-   cd my-wiki
+1. create a `docker-compose.yml` or copy the one from this repository and replace the ports:
+   ```docker-compose.yml
+   version: '3.4'
+ 
+   services:
+     frontend:
+       image: ghcr.io/trenz-gmbh/trenz-docs:latest
+       ports:
+         - "<FRONTEND PORT>:80"
+       restart: unless-stopped
+       depends_on:
+         - api
+       volumes:
+         - ./webapp-settings.local.json:/usr/share/nginx/html/webapp-settings.json
+     api:
+       image: ghcr.io/trenz-gmbh/trenz-docs-api:latest
+       environment:
+         - ASPNETCORE_ENVIRONMENT=${ASPNETCORE_ENVIRONMENT:-Production}
+         - Meilisearch__Url=http://meilisearch:7700
+         - Meilisearch__ApiKey=${MEILISEARCH_API_KEY:-masterKey}
+       ports:
+         - "<API PORT>:80"
+       restart: unless-stopped
+       depends_on:
+         - meilisearch
+       volumes:
+         - ./appsettings.local.json:/app/appsettings.local.json
+     meilisearch:
+       image: getmeili/meilisearch:latest
+       ports:
+         - "7700:7700"
+       environment:
+         - MEILI_MASTER_KEY=${MEILISEARCH_API_KEY:-masterKey}
+         - MEILI_NO_ANALYTICS=true
+       restart: unless-stopped
+       volumes:
+         - meili_data:/data
+ 
+   volumes:
+     meili_data:
    ```
 
 2. add a `appsettings.local.json` file to specify which repositories to use as sources:
@@ -50,16 +87,27 @@ To deploy a trenz-docs wiki, follow these steps:
    }
    ```
 
-3. optionally: add a `.env` (or `.env.local`) file:
-   ```env
-   VUE_APP_API_BASE=https://localhost:7262/api/
-   VUE_APP_PRIMARY_COLOR='#8af'
-   VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
+3. add a `webapp-settings.local.json` and add your customer-facing api endpoint:
+   ```json 
+   {
+     "name": "<YOUR DOCS NAME>",
+     "theme": {
+       "primary": "80,120,200",
+       "primary-foreground": "255,255,255"
+     },
+     "api": {
+       "baseUrl": "https://<YOUR API DOMAIN>/api/"
+     },
+     "useAuth": false
+   }
    ```
 
 4. run:
    ```bash
    docker-compose up -d
    ```
 
-5. access your new wiki at [localhost:5050](http://localhost:5050/)
+5. access your new wiki hosted at:
+   ```bash
+   http://localhost:<FRONTEND PORT>
+   ```

docker-compose.yml

@@ -5,13 +5,13 @@ services:
     build:
       context: .
       target: final
-      args:
-        - VUE_APP_API_BASE=http://localhost:5001/api/
     ports:
       - "5000:80"
     restart: unless-stopped
     depends_on:
       - api
+    volumes:
+      - ./webapp-settings.local.json:/usr/share/nginx/html/webapp-settings.json
   api:
     image: ghcr.io/trenz-gmbh/trenz-docs-api:latest
     environment:

public/webapp-settings.example.json

@@ -0,0 +1,11 @@
+{
+  "name": "My Docs",
+  "theme": {
+    "primary": "80,120,200",
+    "primary-foreground": "255,255,255"
+  },
+  "api": {
+    "baseUrl": "https://localhost:7262/api/"
+  },
+  "useAuth": false
+}

src/App.vue

@@ -128,13 +128,14 @@ import {defineComponent} from 'vue'
 import NavTreeNode from "@/components/NavTreeNode.vue";
 import {VTextField} from "vuetify/components";
 import TrenzDocsLogo from "@/components/TrenzDocsLogo.vue";
-import ApiClient from "@/api/ApiClient";
 import {mapGetters} from "vuex";
 import * as api from "@/api";
 
 export default defineComponent({
   name: 'App',
 
+  inject: ['$settings'],
+
   components: {
     TrenzDocsLogo,
     NavTreeNode,
@@ -151,6 +152,14 @@ export default defineComponent({
     });
   },
 
+  mounted() {
+    let allThemed = document.querySelectorAll<HTMLElement>('.v-theme--light, .v-theme--dark');
+    allThemed.forEach(el => {
+      el.style.setProperty('--v-theme-primary', this.$settings.theme.primary);
+      el.style.setProperty('--v-theme-on-primary', this.$settings.theme["primary-foreground"]);
+    })
+  },
+
   unmounted() {
     window.removeEventListener('keydown', this.handleKeyDown)
   },
@@ -255,11 +264,11 @@ export default defineComponent({
     },
 
     loginUrl() {
-      return ApiClient.getBaseUrl() + "auth/transfer?returnUrl=" + encodeURI(window.location.origin + this.$route.fullPath);
+      return this.$settings.api.baseUrl + "auth/transfer?returnUrl=" + encodeURI(window.location.origin + this.$route.fullPath);
     },
 
     logoutUrl() {
-      return ApiClient.getBaseUrl() + "auth/signout?returnUrl=" + encodeURI(window.location.origin + this.$route.fullPath);
+      return this.$settings.api.baseUrl + "auth/signout?returnUrl=" + encodeURI(window.location.origin + this.$route.fullPath);
     },
   },
 })

src/WebappSettings.ts

@@ -0,0 +1,11 @@
+export interface WebappSettings {
+    name: string;
+    theme: {
+        primary: string;
+        'primary-foreground': string;
+    }
+    api: {
+        baseUrl: string;
+    }
+    useAuth: boolean;
+}

src/main.ts

@@ -3,25 +3,15 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import vuetify from './plugins/vuetify'
-import {loadFonts} from './plugins/webfontloader'
-import ApiClient from "@/api/ApiClient";
-
-if (process.env.VUE_APP_API_BASE) {
-    ApiClient.setBaseUrl(process.env.VUE_APP_API_BASE);
-} else {
-    alert('Please set the VUE_APP_API_BASE environment variable (e.g. VUE_APP_API_BASE=https://localhost:7262/api)');
-
-    throw new Error('VUE_APP_API_BASE is not set');
-}
-
-if (process.env.VUE_APP_USE_AUTH && process.env.VUE_APP_USE_AUTH === 'true') {
-    ApiClient.useAuth = true;
-}
+import { loadFonts } from './plugins/webfontloader'
 
 loadFonts()
 
-createApp(App)
-    .use(router)
-    .use(store)
-    .use(vuetify)
-    .mount('#app')
+store.dispatch('loadWebAppSettings').then(settings => {
+    createApp(App)
+        .provide('$settings', settings)
+        .use(router)
+        .use(store)
+        .use(vuetify)
+        .mount('#app')
+})

src/plugins/vuetify.ts

@@ -17,17 +17,19 @@ export default createVuetify({
     theme: {
         defaultTheme: 'light',
         themes: {
+            // The primary and on-primary values get overridden by the values in public/webapp-settings.json at runtime.
+            // They may be visible until the settings got loaded and applied.
             light: {
                 colors: {
-                    primary: process.env.VUE_APP_PRIMARY_COLOR ?? '#ddd',
-                    'on-primary': process.env.VUE_APP_PRIMARY_FOREGROUND_COLOR ?? '#000',
+                    primary: '#ddd',
+                    'on-primary': '#000',
                 }
             } as ThemeDefinition,
             dark: {
                 dark: true,
                 colors: {
-                    primary: process.env.VUE_APP_PRIMARY_COLOR ?? '#222',
-                    'on-primary': process.env.VUE_APP_PRIMARY_FOREGROUND_COLOR ?? '#fff',
+                    primary: '#222',
+                    'on-primary': '#fff',
                 }
             } as ThemeDefinition,
         },