feat: #be #fe show build version

.gitlab-ci.yml

@@ -119,6 +119,7 @@ prd-build-fe-node-job:
   stage: build
   variables:
     NODE_ENV: production
+    APP_VERSION: ${CI_COMMIT_TAG}
   script:
     - npm run build -- --out-dir dist/prd
   artifacts:
@@ -133,6 +134,7 @@ stg-build-fe-node-job:
   stage: build
   variables:
     NODE_ENV: staging
+    APP_VERSION: ${CI_COMMIT_REF_NAME}
   script:
     - npm run build -- --out-dir dist/stg
   artifacts:
@@ -164,6 +166,7 @@ build-be-job:
       --tag=$IMAGE_NAME:${CI_COMMIT_SHA}
       --tag=$IMAGE_NAME:${CI_COMMIT_REF_NAME}
       --tag=$IMAGE_NAME:${CI_COMMIT_TAG:-latest}
+      --build-arg APP_VERSION=${CI_COMMIT_TAG:-$CI_COMMIT_SHORT_SHA}
       backend
     - docker image push --all-tags $IMAGE_NAME
   only:

backend/Dockerfile

@@ -9,6 +9,8 @@ RUN npm install
 COPY . .
 
 FROM base as production
+ARG APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
 ENV NODE_PATH=./build
 RUN npm run build
 #CMD ["npm", "run", "start"]

backend/docker-compose.dev.yml

@@ -16,6 +16,7 @@ services:
     environment:
       - PORT=8080
       - DATABASE_URL=postgres://db_user:db_pass@database/db_name
+      - APP_VERSION=development
     command: npm run serve
   cli:
     # docker-compose -f docker-compose.dev.yml run cli

backend/src/index.ts

@@ -81,6 +81,7 @@ server.get("/", async (request, reply) => {
     .orderBy("bucket");
 
   reply.view("/templates/dashboard.ejs", {
+    appVersion: process.env.APP_VERSION || "unknown",
     gamesCount,
     cluesCount,
     shotsCount,

backend/templates/dashboard.ejs

@@ -27,6 +27,9 @@
 
     <header class="navbar navbar-dark bg-dark p-1">
         <a class="navbar-brand px-2" href="#">Ötzi Game Dashboard</a>
+        <span class="text-light px-2">
+            <%= appVersion %>
+        </span>
     </header>
 
     <div class="container-fluid">

frontend/.env.development

 BACKEND_URL=http://localhost:8080
+APP_VERSION=development

frontend/src/js/welcome_scene.ts

@@ -8,6 +8,7 @@ export default class WelcomeScene extends Phaser.Scene {
   create() {
     this.drawTitle();
     this.drawCTA();
+    this.drawVersion();
     this.bindEvents();
   }
 
@@ -37,6 +38,19 @@ export default class WelcomeScene extends Phaser.Scene {
     );
   }
 
+  drawVersion() {
+    const text = process.env.APP_VERSION || "unknown";
+    const cta = this.add.text(0, 0, text.toUpperCase(), {
+      font: "bold 16px Courier",
+      color: "#888888",
+    });
+    cta.setOrigin(0.5, 1);
+    cta.setPosition(
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height - 8,
+    );
+  }
+
   bindEvents() {
     this.input.keyboard.once("keydown", this.startFight.bind(this));
     this.input.once("pointerdown", this.startFight.bind(this));