Testing building with version number in OpenShift

.gitignore

@@ -38,5 +38,7 @@ testem.log
 .DS_Store
 Thumbs.db
 
+# Application files
 mock-api/**/node_modules
 mock-api/**/api.json
+**VERSION.md

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.html

@@ -2,4 +2,7 @@
   <div class="footer__logo-wrapper">
     <digi-logo af-color="secondary"></digi-logo>
   </div>
+  <div class="footer__version" *ngIf="showVersion">
+    <markdown src="assets/VERSION.md"></markdown>
+  </div>
 </footer>

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.scss

@@ -1,12 +1,20 @@
 @import 'variables/gutters';
 
 .footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   background-color: var(--digi--ui--color--background--profile);
   padding: $digi--layout--gutter--l $digi--layout--gutter;
+  color: var(--digi--typography--color--text--light);
 
   &__logo-wrapper {
     ::ng-deep .digi-logo {
       --digi-logo--padding: 0;
     }
   }
+
+  &__version {
+    font-size: 0.75rem;
+  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { environment } from '@msfa-environment';
 
 @Component({
   selector: 'msfa-footer',
@@ -6,4 +7,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./footer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FooterComponent {}
+export class FooterComponent {
+  showVersion = !environment.production;
+}

apps/mina-sidor-fa/src/app/shared/components/layout/components/footer/footer.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
 import { FooterComponent } from './footer.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [FooterComponent],
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, MarkdownModule.forChild()],
   exports: [FooterComponent],
 })
 export class FooterModule {}

openshift/dev/Jenkinsfile

@@ -95,7 +95,7 @@ pipeline {
         echo '### Building application... ###'
 
          sh '''
-          npm run build:api
+          npm run build-os -- --config api --version ${BUILD_TAG}
           cp -r nginx/* ${NGINX_PATH}
         '''
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mina-sidor-fa-web",
-  "version": "1.3.0",
+  "version": "1.2.0",
   "license": "MIT",
   "repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/mina-sidor-fa-web",
   "engines": {
@@ -12,8 +12,12 @@
     "nx": "nx",
     "start": "ng serve mina-sidor-fa",
     "start:api": "ng serve mina-sidor-fa --configuration api",
+    "start-os": "bash ./tools/serve-os.sh",
+    "start-os:api": "bash ./tools/serve-os.sh api",
     "build": "ng build mina-sidor-fa",
     "build:api": "ng build mina-sidor-fa --configuration api",
+    "build-os": "bash ./tools/build-os.sh",
+    "build-os:api": "bash ./tools/build-os.sh api",
     "test": "ng test mina-sidor-fa",
     "release": "bash ./tools/release.sh",
     "release:dry": "bash ./tools/release.sh dry",

tools/build-os.sh

@@ -0,0 +1,58 @@
+#!/bin/bash
+
+#
+# Script to build the application and creating a version number depending on build
+
+
+# ----------------------------------
+# COLORS
+# ----------------------------------
+NOCOLOR='\033[0m'
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+ORANGE='\033[0;33m'
+CYAN='\033[0;36m'
+YELLOW='\033[1;33m'
+
+
+
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+version=${version:-$BRANCH}
+config=${config:-prod}
+
+while [ $# -gt 0 ]; do
+
+   if [[ $1 == *"--"* ]]; then
+        param="${1/--/}"
+        declare $param="$2"
+        # echo $1 $2 // Optional to see the parameter:value result
+   fi
+
+  shift
+done
+
+# ----------------------------------
+# UPDATING VERSION
+# ----------------------------------
+echo -e "${CYAN}Setting VERSION to ${version} inside assets directory${NOCOLOR}"
+rm -f apps/mina-sidor-fa/src/assets/VERSION.md
+touch apps/mina-sidor-fa/src/assets/VERSION.md
+echo $version > apps/mina-sidor-fa/src/assets/VERSION.md
+echo -e "${GREEN}VERSION set to ${version}${NOCOLOR}"
+
+# ----------------------------------
+# BUILD APPLICATION
+# ----------------------------------
+
+
+if [ $config = "prod" ]; then
+  echo -e "${CYAN}Running npm run build -- --prod${NOCOLOR}"
+  npm run build -- --prod
+  echo -e "${GREEN}Application built ${VERSION}${NOCOLOR}"
+  exit
+else
+  echo -e "${CYAN}Running npm run build:${CONFIG}${NOCOLOR}"
+  npm run build:$config
+  echo -e "${GREEN}Application built ${VERSION}${NOCOLOR}"
+  exit
+fi

tools/serve-os.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+
+#
+# Script to serve the application and creating a version number depending on build
+
+
+# ----------------------------------
+# COLORS
+# ----------------------------------
+NOCOLOR='\033[0m'
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+ORANGE='\033[0;33m'
+CYAN='\033[0;36m'
+YELLOW='\033[1;33m'
+
+
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+version=${version:-$BRANCH}
+config=${config:-prod}
+
+while [ $# -gt 0 ]; do
+
+   if [[ $1 == *"--"* ]]; then
+        param="${1/--/}"
+        declare $param="$2"
+        # echo $1 $2 // Optional to see the parameter:value result
+   fi
+
+  shift
+done
+
+# ----------------------------------
+# UPDATING VERSION
+# ----------------------------------
+echo -e "${CYAN}Setting VERSION to ${version} inside assets directory${NOCOLOR}"
+rm -f apps/mina-sidor-fa/src/assets/VERSION.md
+touch apps/mina-sidor-fa/src/assets/VERSION.md
+echo $version > apps/mina-sidor-fa/src/assets/VERSION.md
+echo -e "${GREEN}VERSION set to ${version}${NOCOLOR}"
+
+# ----------------------------------
+# BUILD APPLICATION
+# ----------------------------------
+
+
+if [ $config = "prod" ]; then
+  echo -e "${CYAN}Running npm run start -- --prod${NOCOLOR}"
+  npm run start -- --prod
+  echo -e "${GREEN}Application started${NOCOLOR}"
+  exit
+elif [ $config = 'local' ]; then
+  echo -e "${CYAN}Running npm run start${NOCOLOR}"
+  npm run start
+  echo -e "${GREEN}Application started${NOCOLOR}"
+  exit
+else
+  echo -e "${CYAN}Running npm run start:${CONFIG}${NOCOLOR}"
+  npm run start:$config
+  echo -e "${GREEN}Application started${NOCOLOR}"
+  exit
+fi