build(frontend): Build Frontend Version into Image (#474)

* feat(frontend): Inject build version

* build(frontend): Use corepack pnpm

* chore(frontend): Update corepack

* ci(backend): Deploy only when necessary

* fix(frontend): Allow build/serve without --define

Author: Clashsoft

.github/workflows/deploy-backend.yml

@@ -6,9 +6,10 @@ on:
       - master
     tags:
       - v*
-    # TODO the backend needs to be deployed every time because it contains the version number
-    # paths:
-    #   - 'backend/**'
+    paths:
+      - 'backend/**'
+      - '.github/workflows/deploy.sh'
+      - '.github/workflows/deploy-backend.yml'
 
 concurrency:
   group: deploy-backend

.github/workflows/deploy-frontend.yml

@@ -42,7 +42,7 @@ jobs:
           push: true
           tags: ${{ secrets.DOCKER_REGISTRY }}/fulib/fulib.org-frontend:${{ steps.deployment.outputs.tag }}
           build-args: |
-            VERSION=${{ steps.deployment.outputs.version }}
+            BUILD_VERSION=${{ steps.deployment.outputs.version }}
           cache-to: type=gha,mode=max
           cache-from: type=gha
       - name: Deploy to Rancher

frontend/Dockerfile

@@ -1,11 +1,11 @@
-FROM node:lts-slim as builder
+FROM node:lts-slim AS builder
 WORKDIR /frontend
-RUN npm install -g pnpm
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install
+RUN corepack pnpm install
 COPY . .
 ARG CONFIGURATION=production
-RUN pnpm run build --configuration $CONFIGURATION
+ARG BUILD_VERSION=0.0.0
+RUN corepack pnpm run build --configuration $CONFIGURATION --define BUILD_VERSION=\"$BUILD_VERSION\"
 
 FROM nginx
 COPY nginx.conf /etc/nginx/conf.d/default.conf

frontend/angular.json

@@ -40,6 +40,9 @@
               "file-saver",
               "validator"
             ],
+            "define": {
+              "BUILD_VERSION": "\"0.0.0\""
+            },
             "serviceWorker": "ngsw-config.json",
             "scripts": []
           },

frontend/package.json

@@ -10,6 +10,7 @@
     "lint": "ng lint"
   },
   "private": true,
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "dependencies": {
     "@angular/animations": "^19.1.2",
     "@angular/cdk": "^19.1.0",
@@ -83,6 +84,5 @@
     "webpack-dev-middleware": "^6.1.2",
     "cookie@<0.7.0": ">=0.7.0",
     "@sentry/browser@<7.119.1": "^7.119.1"
-  },
-  "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
+  }
 }

frontend/src/app/services/changelog.service.ts

@@ -1,7 +1,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import {Observable} from 'rxjs';
-import {map, mapTo, tap} from 'rxjs/operators';
+import {Observable, of} from 'rxjs';
+import {catchError, map, mapTo, tap} from 'rxjs/operators';
 import {environment} from '../../environments/environment';
 import {MarkdownService} from './markdown.service';
 
@@ -52,7 +52,21 @@ export class ChangelogService {
   }
 
   getCurrentVersions(): Observable<Versions> {
-    return this.http.get<Versions>(environment.apiURL + '/versions');
+    return this.http.get<Versions>(environment.apiURL + '/versions').pipe(
+      tap(versions => {
+        versions['fulib.org'] = environment.version;
+      }),
+      catchError(() => of<Versions>({
+        'fulib.org': environment.version,
+        fulib: 'unknown',
+        fulibGradle: 'unknown',
+        fulibScenarios: 'unknown',
+        fulibTables: 'unknown',
+        fulibTools: 'unknown',
+        fulibWorkflows: 'unknown',
+        fulibYaml: 'unknown',
+      })),
+    );
   }
 
   stripBuildSuffix(versions: Versions): Versions {

frontend/src/environments/environment.prod.ts

@@ -1,5 +1,8 @@
+declare const BUILD_VERSION: string;
+
 export const environment = {
   production: true,
+  version: BUILD_VERSION,
   sentryDsn: 'https://613fdea31ffd44aa9f21da06ce6346e1@o416265.ingest.sentry.io/4505273320734720',
   environment: 'production',
   apiURL: '/api',

frontend/src/environments/environment.standalone.ts

@@ -1,5 +1,8 @@
+declare const BUILD_VERSION: string;
+
 export const environment = {
   production: true,
+  version: BUILD_VERSION,
   sentryDsn: '',
   environment: 'development',
   apiURL: 'http://localhost:4567/api',

frontend/src/environments/environment.ts

@@ -1,5 +1,8 @@
+declare const BUILD_VERSION: string;
+
 export const environment = {
   production: false,
+  version: BUILD_VERSION,
   sentryDsn: '',
   environment: 'development',
   apiURL: 'http://localhost:4567/api',