Add custom-app template for custom applications

.github/workflows/npm-build.yml

@@ -107,3 +107,7 @@ jobs:
       working-directory: ./imxweb
       run: npm run build qer-app-pwdportal
 
+    - name: Build custom-app
+      working-directory: ./imxweb
+      run: npm run build custom-app
+

README.md

@@ -4,6 +4,10 @@
 
 ## Change log
 
+### October 15, 2022
+
+- There is a new application in the workspace called `custom-app`. This application is a template that provides the basic building blocks (such as Material integration, session handling, login, and the API client configuration) can be used as a starting point for building new applications. See [`readme.md`](./imxweb/projects/custom-app/readme.md) for more information.
+
 ### September 27, 2022
 
 - The repository has been updated with the source code for the Identity Manager 9.1 release in the `v91` branch.
@@ -70,7 +74,7 @@ For more information about each project, see the `readme.md` files in each proje
 |`qer-app-portal`|Portal|Angular app|`qbm`, `qer`|
 |`qer-app-operationssupport`|Operations Support Portal|Angular app|`qbm`, `qer`|
 |`qer-app-pwdportal`|Password Reset Portal|Angular app|`qbm`, `qer`|
-|`arc-app-certaccess`|Starling CertAccess|Angular app|various|
+|`custom-app`|Template for custom applications|Angular app|`qbm`|
 
 ## Installing node.js
 
@@ -91,8 +95,6 @@ When changing the code of a _library_, you will need to build and deploy customi
 
 When changing the code of a _plugin library_, you will need to build and deploy customized versions of the plugin library itself, and all plugin libraries depending on it. For example, changing `tsb` will require that you also compile `aad` and `o3t` because these plugins include `tsb`.
 
-_Note_: Starling CertAccess currently does not support hosting custom HTML5 apps.
-
 ### Debugging
 
 Running and debugging web applications is possible using the default tools of the Angular CLI toolchain. For example, you can use `ng serve qer-app-portal` to debug the Portal app.

imxweb/angular.json

@@ -1634,6 +1634,162 @@
           }
         }
       }
+    },
+    "custom-app": {
+      "projectType": "application",
+      "root": "projects/custom-app",
+      "sourceRoot": "projects/custom-app/src",
+      "prefix": "imx",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/custom-app",
+            "index": "projects/custom-app/src/index.html",
+            "main": "projects/custom-app/src/main.ts",
+            "polyfills": "projects/custom-app/src/polyfills.ts",
+            "tsConfig": "projects/custom-app/tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "projects/custom-app/src/appconfig.json",
+              "projects/custom-app/src/assets",
+              {
+                "glob": "**/*",
+                "input": "./html",
+                "output": "./html"
+              },
+              {
+                "glob": "**/*",
+                "input": "./shared/assets/",
+                "output": "./assets"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@elemental-ui/core/assets",
+                "output": "./assets"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/systemjs-plugin-babel/",
+                "output": "./systemjs-plugin-babel"
+              }
+            ],
+            "styles": [
+              "projects/custom-app/src/styles.scss",
+              "projects/qbm/src/lib/styles/imx-page-title.scss",
+              "shared/assets/styles.scss",
+              "shared/assets/variables.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "./shared/assets",
+                "./node_modules",
+                "./node_modules/@elemental-ui/cadence-icon",
+                "./node_modules/@elemental-ui/core"
+              ]
+            },
+            "scripts": [
+              "node_modules/systemjs/dist/system.src.js",
+              "node_modules/systemjs-plugin-babel/plugin-babel.js",
+              "node_modules/systemjs-plugin-babel/systemjs-babel-browser.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/custom-app/src/environments/environment.ts",
+                  "with": "projects/custom-app/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "20mb",
+                  "maximumError": "40mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "es5": {
+              "tsConfig": "./projects/custom-app/tsconfig-es5.app.json"
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "custom-app:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "custom-app:build:production"
+            },
+            "development": {
+              "browserTarget": "custom-app:build:development"
+            },
+            "es5": {
+              "browserTarget": "custom-app:build:es5"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "custom-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/custom-app/src/test.ts",
+            "polyfills": "projects/custom-app/src/polyfills.ts",
+            "tsConfig": "projects/custom-app/tsconfig.spec.json",
+            "karmaConfig": "projects/custom-app/karma.conf.js",
+            "assets": ["projects/custom-app/src/appconfig.json", "projects/custom-app/src/assets"],
+            "styles": ["projects/custom-app/src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "./shared/assets",
+                "./node_modules",
+                "./node_modules/@elemental-ui/cadence-icon",
+                "./node_modules/@elemental-ui/core"
+              ]
+            },
+            "scripts": ["node_modules/systemjs/dist/system.src.js"]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["projects/custom-app/tsconfig.app.json", "projects/custom-app/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
     }
   },
   "defaultProject": "qer-app-portal",

imxweb/projects/custom-app/.browserslistrc

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

imxweb/projects/custom-app/Build.proj

@@ -0,0 +1,15 @@
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003" DefaultTargets="BuildAngularProject" ToolsVersion="15.0">
+	<PropertyGroup>
+		<ComponentDir>imxweb\projects\custom-app</ComponentDir>
+	    <VI_NET_DE>no</VI_NET_DE>
+		<PackageName>custom-app</PackageName>
+	</PropertyGroup>
+
+	<Import Project="$(VI_PROJECTDIR)\Build\Includes\Build_Html_Package.targets"/>
+
+    <ItemGroup>
+		<!-- only run if any of these files have changed -->
+		<InputFiles Include="$(Workspace)\imx-modules\imx-api-qbm.tgz" />
+	</ItemGroup>
+
+</Project>

imxweb/projects/custom-app/karma.conf.js

@@ -0,0 +1,47 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-ie-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-junit-reporter')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'results'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      thresholds: {
+        statements: 0,
+        branches: 0,
+        functions: 0,
+        lines: 0,
+      },
+      fixWebpackSourcePaths: true
+    },
+    junitReporter: {
+      outputDir: require('path').join(__dirname, 'results'),
+    },
+    reporters: ['progress', 'coverage-istanbul', 'junit'],
+    port: 9876,
+    captureTimeout: 210000,
+    browserDisconnectTolerance: 3,
+    browserDisconnectTimeout : 210000,
+    browserNoActivityTimeout : 210000,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

imxweb/projects/custom-app/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "custom-app",
+  "version": "9.0.0",
+  "private": true
+}

imxweb/projects/custom-app/readme.md

@@ -0,0 +1,52 @@
+# custom-app
+
+This package contains the base functionality that you can use as a starting point to build a custom application.
+
+This package has a dependency on the `qbm` package, so make sure that package is compiled using the `ng build qbm` command.
+
+## App service
+
+The [`app.service.ts`](./src/app/app.service.ts) service is responsible for initialization of the app:
+
+- It configures the API client with the correct URL for the API Server.
+- It configures the translation service with the browser's preferred language setting.
+- It shows a splash screen while the application is being loaded.
+
+## Routing
+
+The [`appconfig.json`](./src/appconfig.json) file sets two default routes:
+
+``` json
+  "routeConfig": {
+    "login": "",
+    "start": "start"
+  }
+```
+
+The `login` route is the route called when there is no authenticated session.
+The `start` route is the route called when there is an authenticated session.
+
+These routes are defined in the [`app-routing.module.ts`](./src/app/app-routing.module.ts) file. Add any routes for your application here.
+
+## Login component
+
+The app re-uses the default [login component](../qbm/src/lib/login/login.component.ts) defined in the `qbm` library.
+
+This app uses a session on the `portal` API project; you can change this setting in the [`environment.ts`](./src/environments/environment.ts) file.
+
+## Page layout
+
+The [`app.component.html`](./src/app/app.component.html) file defines the basic layout of the page. This template makes use of the following base components:
+
+- `<imx-mast-head>` shows the mast head including:
+  - the product logo,
+  - the name of the authenticated user,
+  - an option to log out,
+  - and the "about" dialog.
+- `<imx-usermessage>` is the container where error messages are shown.
+
+The app component also shows a splash screen while the application is being initialized.
+
+## Debugging
+
+Run `ng serve custom-app` to serve the custom app.