ui: show app version

.github/workflows/deploy.yml

@@ -20,7 +20,7 @@ jobs:
     - uses: actions/checkout@v3
 
     - name: Build the Docker image
-      run: docker build ./Foodie --tag $IMAGE_NAME:$TAG
+      run: docker build ./Foodie --build-arg APP_VERSION=$TAG --tag $IMAGE_NAME:$TAG
 
     - name: Publish image
       run: |

Foodie/.dockerignore

@@ -1,4 +1,5 @@
 bin/
 obj/
 .git
+ClientApp/.angular/
 ClientApp/node_modules/

Foodie/ClientApp/src/app/nav-menu/nav-menu.component.css

@@ -20,4 +20,10 @@ html {
 
 nav {
     background: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
-}
+}
+
+.version {
+    margin: 0;
+    font-size: x-small;
+    color: #fff;
+}

Foodie/ClientApp/src/app/nav-menu/nav-menu.component.html

@@ -1,7 +1,12 @@
 <header>
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
         <div class="container">
-            <a class="navbar-brand" [routerLink]="['/']">Foodie</a>
+            <div>
+                <a class="navbar-brand" [routerLink]="['/']">
+                    Foodie
+                    <span class="version" *ngIf="version">&nbsp;|&nbsp;{{version}}</span>
+                </a>
+            </div>
             <app-login-menu></app-login-menu>
         </div>
     </nav>

Foodie/ClientApp/src/app/nav-menu/nav-menu.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { environment } from 'src/environments/environment'; 
 
 @Component({
   selector: 'app-nav-menu',
@@ -7,6 +8,7 @@ import { Component } from '@angular/core';
 })
 export class NavMenuComponent {
   isExpanded = false;
+  version = environment.version;
 
   collapse() {
     this.isExpanded = false;

Foodie/ClientApp/src/environments/environment.prod.ts

@@ -1,3 +1,6 @@
+import { version } from './version'
+
 export const environment = {
-  production: true
+  production: true,
+  version: version,
 };

Foodie/ClientApp/src/environments/environment.ts

@@ -2,8 +2,11 @@
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+import { version } from './version'
+
 export const environment = {
-  production: false
+  production: false,
+  version: version,
 };
 
 /*

Foodie/ClientApp/src/environments/version.ts

@@ -0,0 +1 @@
+export const version = '';

Foodie/Dockerfile

@@ -3,14 +3,18 @@ RUN apt-get update -yq \
     && apt-get install curl gnupg -yq \
     && curl -sL https://deb.nodesource.com/setup_18.x | bash \
     && apt-get install nodejs -yq
+
+ARG APP_VERSION
+
 WORKDIR /app
-	
+
 # Copy csproj and restore as distinct layers
 COPY *.csproj ./
 RUN dotnet restore
 
 # Copy everything else and build
 COPY . ./
+RUN echo "export const version = '${APP_VERSION}';" > ClientApp/src/environments/version.ts
 RUN dotnet publish -c Release -o out
 
 # Build runtime image

docker-compose.yml

@@ -5,6 +5,8 @@ services:
     container_name: foodie
     build:
       context: ./Foodie
+      args:
+        APP_VERSION: "dev"
     depends_on:
       - db