Chore: Add better referencing of runtime variables (#182)

.dockerignore

@@ -0,0 +1,45 @@
+/.github
+/.serverless
+
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.github/workflows/docker.yaml

@@ -13,36 +13,35 @@ jobs:
     permissions: write-all
     runs-on: ubuntu-latest
     steps:
-      - name: Extract Version Name
-        id: extract_version
-        uses: actions/github-script@v6
-        with:
-          result-encoding: string
-          script: |
-            if (context.payload.ref.startsWith('refs/tags/')) {
-              return context.payload.ref.replace(/refs\/tags\/v/, '');
-            }
-            return 'dev';
       - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Build docker
-        env:
-          VERSION: ${{ steps.extract_version.outputs.result }}
-        run: docker build -t ghcr.io/fediseer/fediseer-gui:$VERSION --label "org.opencontainers.image.source=https://github.com/Fediseer/FediseerGUI" --label "org.opencontainers.image.licenses=MIT" .
+        uses: actions/checkout@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
       - name: Login to GHCR
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Push to docker
-        env:
-          VERSION: ${{ steps.extract_version.outputs.result }}
-        run: docker push ghcr.io/fediseer/fediseer-gui:$VERSION
-      - name: Push latest to docker
-        if: steps.extract_version.outputs.result != 'dev'
-        env:
-          VERSION: ${{ steps.extract_version.outputs.result }}
-        run: |
-          docker tag ghcr.io/fediseer/fediseer-gui:$VERSION ghcr.io/fediseer/fediseer-gui:latest
-          docker push ghcr.io/fediseer/fediseer-gui:latest
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/fediseer/fediseer-gui
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=raw,value=dev
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

Dockerfile

@@ -1,16 +1,14 @@
-FROM nginx
-
-RUN apt-get update && \
-    apt-get -y install nodejs npm && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/* && \
-    npm install --global yarn
+FROM node:20 as build
 
 ENV NG_CLI_ANALYTICS="false"
 
 COPY . /app
 WORKDIR /app
+RUN yarn install
+RUN yarn build
+
+FROM nginx
+
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY docker-build.sh /docker-entrypoint.d/99-docker-build.sh
-
-RUN yarn install
+COPY --from=build /app/dist/FediseerGUI/browser /usr/share/nginx/html

docker-build.sh

@@ -1,5 +1,3 @@
-ORIGINAL_DIR=$(pwd)
-
 if [ -z ${FEDISEER_API_URL+x} ]; then
   FEDISEER_API_URL=https://fediseer.com/api
 fi
@@ -24,7 +22,7 @@ if [ -z ${FEDISEER_SOURCE_CODE_LINK+x} ]; then
   FEDISEER_SOURCE_CODE_LINK=https://github.com/Fediseer/FediseerGUI
 fi
 if [ -z ${FEDISEER_APP_VERSION+x} ]; then
-  FEDISEER_APP_VERSION=$(grep appVersion src/environments/environment.ts | cut -c16-50 | rev | cut -c3- | rev)
+  FEDISEER_APP_VERSION=$(grep appVersion src/environments/environment.ts | cut -c63-97 | rev | cut -c4- | rev)
 fi
 if [ -z ${FEDISEER_DONATE_LINK+x} ]; then
   FEDISEER_DONATE_LINK=https://liberapay.com/Fediseer/
@@ -39,16 +37,14 @@ done
 FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES_RESULT="$FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES_RESULT]"
 IFS=$OLD_IFS
 
-JSON="{apiUrl: '$FEDISEER_API_URL', apiVersion: '$FEDISEER_API_VERSION', appName: '$FEDISEER_APP_NAME', appVersion: '$FEDISEER_APP_VERSION', maintainer: '$FEDISEER_APP_MAINTAINER', sourceCodeLink: '$FEDISEER_SOURCE_CODE_LINK', defaultCensuresListInstanceFilter: $FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES_RESULT, donateLink: '$FEDISEER_DONATE_LINK', production: true}";
-
-echo "export const environment = $JSON;" > src/environments/environment.ts
-
-cd /app
-if [ -z ${FEDISEER_ENABLE_SSR+x} ]; then
-  yarn build && mv dist/FediseerGUI/browser/* /usr/share/nginx/html
-else
-  cp nginx-proxy.conf /etc/nginx/conf.d/default.conf
-  yarn build:ssr && node dist/FediseerGUI/server/main.js &
-fi
+{
+  echo "window['FEDISEER_API_URL'] = '$FEDISEER_API_URL';";
+  echo "window['FEDISEER_API_VERSION'] = '$FEDISEER_API_VERSION';"
+  echo "window['FEDISEER_APP_NAME'] = '$FEDISEER_APP_NAME';"
+  echo "window['FEDISEER_APP_VERSION'] = '$FEDISEER_APP_VERSION';"
+  echo "window['FEDISEER_APP_MAINTAINER'] = '$FEDISEER_APP_MAINTAINER';"
+  echo "window['FEDISEER_SOURCE_CODE_LINK'] = '$FEDISEER_SOURCE_CODE_LINK';"
+  echo "window['FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES_RESULT'] = $FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES_RESULT;"
+  echo "window['FEDISEER_DONATE_LINK'] = '$FEDISEER_DONATE_LINK';"
+} >> /usr/share/nginx/html/assets/runtime-environment.js
 
-cd "$ORIGINAL_DIR"

src/environments/environment.ts

@@ -1,13 +1,21 @@
 import {FilterSpecialValueAllInstances} from "../app/shared/constants";
 
+function getEnvironmentVariable<T>(variable: string, defaultValue: T): T {
+  if (typeof (<any>window)[variable] === 'undefined') {
+    return defaultValue;
+  }
+
+  return <T>(<any>window)[variable];
+}
+
 export const environment = {
-  apiUrl: 'https://fediseer.com/api',
-  apiVersion: 'v1',
-  appName: 'FediseerGUI',
-  appVersion: '0.18.1',
-  maintainer: '@[email protected]',
-  defaultCensuresListInstanceFilter: [FilterSpecialValueAllInstances],
-  sourceCodeLink: 'https://github.com/Fediseer/FediseerGUI',
-  donateLink: 'https://liberapay.com/Fediseer/',
+  apiUrl: getEnvironmentVariable('FEDISEER_API_URL', 'https://fediseer.com/api'),
+  apiVersion: getEnvironmentVariable('FEDISEER_API_VERSION', 'v1'),
+  appName: getEnvironmentVariable('FEDISEER_APP_NAME', 'FediseerGUI'),
+  appVersion: getEnvironmentVariable('FEDISEER_APP_VERSION', '0.18.1'),
+  maintainer: getEnvironmentVariable('FEDISEER_APP_MAINTAINER', '@[email protected]'),
+  defaultCensuresListInstanceFilter: getEnvironmentVariable('FEDISEER_DEFAULT_CENSURE_LIST_FILTER_INSTANCES', [FilterSpecialValueAllInstances]),
+  sourceCodeLink: getEnvironmentVariable('FEDISEER_SOURCE_CODE_LINK', 'https://github.com/Fediseer/FediseerGUI'),
+  donateLink: getEnvironmentVariable('FEDISEER_DONATE_LINK', 'https://liberapay.com/Fediseer/'),
   production: true,
 };

src/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
 <!--  <link rel="icon" type="image/x-icon" href="favicon.ico">-->
+  <script src="/assets/runtime-environment.js"></script>
 </head>
 <body>
   <app-root></app-root>