using npm run commands for building angular application (supports pre steps).

Automatically embed the application version in the UI.

.github/workflows/release-frontend.yaml

@@ -21,7 +21,7 @@ jobs:
           npm install -g @angular/cli@9.1.4
           npm install
           mkdir -p dist
-          ng build --output-path=dist --deploy-url="/web/" --base-href="/web/" --prod
+          npm run build:prod -- --output-path=dist
           tar -czf scrutiny-web-frontend.tar.gz dist
       - name: Upload Frontend Asset
         id: upload-release-asset3

CONTRIBUTING.md

@@ -54,7 +54,7 @@ The frontend is written in Angular. If you're working on the frontend and can us
     ```bash
     cd webapp/frontend
     npm install
-    ng serve --deploy-url="/web/" --base-href="/web/" --port 4200
+    npm run start -- --deploy-url="/web/" --base-href="/web/" --port 4200
     ```
 3. open your browser and visit [http://localhost:4200/web](http://localhost:4200/web)
 
@@ -95,7 +95,7 @@ you'll need to follow the steps below:
     ```bash
     cd webapp/frontend
     npm install
-    ng build --watch --output-path=../../dist --prod
+    npm run build:prod -- --watch --output-path=../../dist
     # Note: if you do not add `--prod` flag, app will display mocked data for api calls.
     ```
 6. start the scrutiny web server

docker/Dockerfile

@@ -22,7 +22,7 @@ COPY webapp/frontend /opt/scrutiny/src
 RUN npm install -g @angular/cli@9.1.4 && \
     mkdir -p /scrutiny/dist && \
     npm install && \
-    ng build --output-path=/opt/scrutiny/dist --prod
+    npm run build:prod -- --output-path=/opt/scrutiny/dist
 
 
 ########

docker/Dockerfile.web

@@ -20,7 +20,7 @@ COPY webapp/frontend /opt/scrutiny/src
 RUN npm install -g @angular/cli@9.1.4 && \
     mkdir -p /opt/scrutiny/dist && \
     npm install && \
-    ng build --output-path=/opt/scrutiny/dist --prod
+    npm run build:prod -- --output-path=/opt/scrutiny/dist
 
 
 ########

webapp/frontend/git.version.ts

@@ -0,0 +1,25 @@
+import { writeFileSync } from 'fs';
+import { dedent } from 'tslint/lib/utils';
+import { promisify } from 'util';
+import * as child from 'child_process';
+const exec = promisify(child.exec);
+
+async function createVersionsFile(filename: string) {
+    const tag = (await exec('git describe --tags')).stdout.toString().trim();
+    const revision = (await exec('git rev-parse --short HEAD')).stdout.toString().trim();
+    const branch = (await exec('git rev-parse --abbrev-ref HEAD')).stdout.toString().trim();
+
+    console.log(`version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'`);
+
+    const content = dedent`
+      // this file is automatically generated by git.version.ts script
+      export const versions = {
+        version: '${tag}',
+        revision: '${revision}',
+        branch: '${branch}'
+      };`;
+
+    writeFileSync(filename, content, {encoding: 'utf8'});
+}
+
+createVersionsFile('src/environments/versions.ts');

webapp/frontend/package.json

@@ -4,8 +4,10 @@
     "license": "https://themeforest.net/licenses/standard",
     "scripts": {
         "ng": "ng",
+        "prestart": "ts-node -O '{\"module\": \"commonjs\"}' git.version.ts",
         "start": "ng serve --open",
         "start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open",
+        "prebuild:prod": "ts-node -O '{\"module\": \"commonjs\"}' git.version.ts",
         "build": "ng build",
         "build:prod": "ng build --prod",
         "build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",

webapp/frontend/src/app/layout/layouts/horizontal/material/material.component.html

@@ -39,7 +39,7 @@
 
                 <!-- Spacer -->
                 <div class="spacer"></div>
-
+                <code>{{appVersion}}</code>
 
                 <!-- Shortcuts -->
 <!--                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>-->
@@ -48,6 +48,7 @@
 <!--                <notifications [notifications]="data.notifications"></notifications>-->
 
 
+
             </div>
 
 

webapp/frontend/src/app/layout/layouts/horizontal/material/material.component.ts

@@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TreoMediaWatcherService } from '@treo/services/media-watcher';
 import { TreoNavigationService } from '@treo/components/navigation';
+import {versions} from 'environments/versions';
 
 @Component({
     selector     : 'material-layout',
@@ -13,6 +14,7 @@ import { TreoNavigationService } from '@treo/components/navigation';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
+    appVersion: string;
     data: any;
     isScreenSmall: boolean;
 
@@ -46,6 +48,8 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
         // Set the defaults
         this.fixedHeader = false;
         this.fixedFooter = false;
+
+        this.appVersion = `${versions.version}${versions.branch === 'master' ? '' : '#' + versions.branch}`
     }
 
     // -----------------------------------------------------------------------------------------------------

webapp/frontend/src/environments/versions.ts

@@ -0,0 +1,7 @@
+
+// this file is automatically generated by git.version.ts script
+export const versions = {
+  version: 'v0.0.0',
+  revision: 'abcdef123',
+  branch: 'master'
+};