Show Version in Frontend (#167)

* build(frontend): Define APP_VERSION during build

* feat(frontend): Show version and link to changelog

* ci: Inject git describe version into build

* build: Add .nx/ to .dockerignore

* ci: Use version with "v" prefix

* dev: Add swc dependencies

* revert: dev: Add swc dependencies

This reverts commit a429012.

.dockerignore

@@ -2,5 +2,6 @@
 .angular/
 .idea/
 .vscode/
+.nx/
 dist/
 node_modules/

.github/workflows/deploy.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+case "$GITHUB_REF" in
+  refs/tags/v*) TAG="${GITHUB_REF##*/}" ;;
+  *) TAG=latest ;;
+esac
+echo "Docker Tag: $TAG"
+echo "tag=$TAG" >> $GITHUB_OUTPUT
+V_VERSION="$(git describe --tags)"
+echo "Git Describe Version: $V_VERSION"
+echo "v_version=$V_VERSION" >> $GITHUB_OUTPUT
+VERSION="${V_VERSION#v}"
+echo "version=$VERSION" >> $GITHUB_OUTPUT

.github/workflows/deploy.yml

@@ -20,6 +20,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Set Deployment Options
+        id: deployment
+        run: .github/workflows/deploy.sh
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
       # https://docs.docker.com/build/ci/github-actions/push-multi-registries/
@@ -44,8 +47,10 @@ jobs:
           # ${{ github.repository_owner }} does not work. See https://github.com/orgs/community/discussions/27086
           # If we ever move this to a different org, we need to update this line.
           tags: |
-            ${{ secrets.DOCKER_REGISTRY }}/apollusia/${{ matrix.app }}
-            ghcr.io/morphclue/apollusia-${{ matrix.app }}
+            ${{ secrets.DOCKER_REGISTRY }}/apollusia/${{ matrix.app }}:${{ steps.deployment.outputs.tag }}
+            ghcr.io/morphclue/apollusia-${{ matrix.app }}:${{ steps.deployment.outputs.tag }}
+          build-args: |
+            APP_VERSION=${{ steps.deployment.outputs.v_version }}
           cache-to: type=gha,mode=max
           cache-from: type=gha
       # https://github.com/sekassel-research/actions-rancher-update?tab=readme-ov-file#update-service
@@ -58,4 +63,4 @@ jobs:
           project_id: ${{ secrets.RANCHER_PROJECT }}
           namespace: apollusia
           deployment: ${{ matrix.app }}
-          docker_image: ${{ secrets.DOCKER_REGISTRY }}/apollusia/${{ matrix.app }}:latest
+          docker_image: ${{ secrets.DOCKER_REGISTRY }}/apollusia/${{ matrix.app }}:${{ steps.deployment.outputs.tag }}

apps/frontend/Dockerfile

@@ -3,7 +3,8 @@ WORKDIR /app
 COPY package.json pnpm-lock.yaml ./
 RUN corepack pnpm install --frozen-lockfile
 COPY . .
-RUN corepack pnpm run build:frontend
+ARG APP_VERSION
+RUN APP_VERSION=$APP_VERSION corepack pnpm run build:frontend
 
 FROM node:lts-slim
 WORKDIR /app

apps/frontend/plugins/define-version.cjs

@@ -0,0 +1,7 @@
+const plugin = {
+  name: 'define-version',
+  setup(build) {
+    build.initialOptions.define.APP_VERSION = JSON.stringify(process.env.APP_VERSION ?? 'v0.0.0');
+  },
+};
+module.exports = plugin;

apps/frontend/project.json

@@ -29,6 +29,9 @@
         "styles": ["apps/frontend/src/styles.scss"],
         "allowedCommonJsDependencies": ["validator"],
         "scripts": [],
+        "plugins": [
+          "apps/frontend/plugins/define-version.cjs"
+        ],
         "serviceWorker": "apps/frontend/ngsw-config.json",
         "browser": "apps/frontend/src/main.ts",
         "server": "apps/frontend/src/main.server.ts",

apps/frontend/src/app/core/navbar/navbar.component.html

@@ -90,6 +90,11 @@ <h6>
           Report a bug
         </a>
       </li>
+      <li class="nav-item">
+        <a class="nav-item nav-link bi-journal-text" [href]="'https://github.com/Morphclue/apollusia/' + changelogLink" target="_blank">
+          Changelog <span class="text-muted">{{ version }}</span>
+        </a>
+      </li>
       <div class="small text-muted text-center">
         Copyright © Apollusia, {{ currentYear }}
       </div>

apps/frontend/src/app/core/navbar/navbar.component.ts

@@ -12,6 +12,17 @@ import {StorageService} from '../services/storage.service';
 })
 export class NavbarComponent {
   readonly currentYear = new Date().getFullYear();
+  readonly version = APP_VERSION;
+  readonly changelogLink = (() => {
+    const [version, , commit] = APP_VERSION.split('-');
+    if (commit) {
+      // e.g. v1.0.0-1-g1234567, git describe included the commit, so we show the diff
+      return `compare/${version}...${commit}`;
+    } else {
+      // for tagged versions, just link to the changelog
+      return `releases/tag/${version}`;
+    }
+  })();
 
   themes = [
     {

apps/frontend/src/types.d.ts

@@ -0,0 +1 @@
+declare const APP_VERSION: string;