feat: move all frontend projects under the same Angular workspace (#1141)

* feat: move all frontend projects under the same Angular workspace

* Refactor/angular workspace (#1154)

* update frontend build steps

Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.idea
 /*.img
 /*.img.gz
 /ubuntu.img.xz

Makefile

@@ -1,12 +1,10 @@
 EMBASSY_BINS := backend/target/aarch64-unknown-linux-gnu/release/embassyd backend/target/aarch64-unknown-linux-gnu/release/embassy-init backend/target/aarch64-unknown-linux-gnu/release/embassy-cli backend/target/aarch64-unknown-linux-gnu/release/embassy-sdk
-EMBASSY_UIS := ui/www setup-wizard/www diagnostic-ui/www
+EMBASSY_UIS := frontend/dist/ui frontend/dist/setup-wizard frontend/dist/diagnostic-ui
 EMBASSY_SRC := ubuntu.img product_key.txt $(EMBASSY_BINS) backend/embassyd.service backend/embassy-init.service $(EMBASSY_UIS) $(shell find build)
 COMPAT_SRC := $(shell find system-images/compat/src)
 UTILS_SRC := $(shell find system-images/utils/Dockerfile)
 APPMGR_SRC := $(shell find backend/src) $(shell find patch-db/*/src) $(shell find rpc-toolkit/*/src) backend/Cargo.toml backend/Cargo.lock
-UI_SRC := $(shell find ui/src)
-SETUP_WIZARD_SRC := $(shell find setup-wizard/src)
-DIAGNOSTIC_UI_SRC := $(shell find diagnostic-ui/src)
+FRONTEND_SRC := $(shell find frontend/)
 PATCH_DB_CLIENT_SRC = $(shell find patch-db/client -not -path patch-db/client/dist)
 GIT_REFS := $(shell find .git/refs/heads)
 TMP_FILE := $(shell mktemp)
@@ -24,12 +22,8 @@ clean:
 	rm -f product_key.txt
 	rm -f system-images/**/*.tar
 	sudo rm -f $(EMBASSY_BINS)
-	rm -rf ui/node_modules
-	rm -rf ui/www
-	rm -rf setup-wizard/node_modules
-	rm -rf setup-wizard/www
-	rm -rf diagnostic-ui/node_modules
-	rm -rf diagnostic-ui/www
+	rm -rf frontend/node_modules
+	rm -rf frontend/dist
 	rm -rf patch-db/client/node_modules
 	rm -rf patch-db/client/dist
 
@@ -57,33 +51,15 @@ product_key.txt:
 $(EMBASSY_BINS): $(APPMGR_SRC)
 	cd backend && ./build-prod.sh
 
-ui/node_modules: ui/package.json
-	npm --prefix ui install
+frontend/node_modules: frontend/package.json
+	npm --prefix frontend ci
 
-ui/www: $(UI_SRC) ui/node_modules patch-db/client patch-db/client/dist ui/config.json
-	npm --prefix ui run build-prod
+$(EMBASSY_UIS): $(FRONTEND_SRC) frontend/node_modules patch-db/client patch-db/client/dist frontend/config.json
+	npm --prefix frontend run build:all
 
-ui/config.json: .git/HEAD $(GIT_REFS)
-	jq '.mocks.enabled = false' ui/config-sample.json > ui/config.json
-	jq '.gitHash = "$(shell git rev-parse HEAD)"' ui/config.json > $(TMP_FILE) && mv $(TMP_FILE) ui/config.json
-
-setup-wizard/node_modules: setup-wizard/package.json
-	npm --prefix setup-wizard install
-
-setup-wizard/www: $(SETUP_WIZARD_SRC) setup-wizard/node_modules setup-wizard/config.json
-	npm --prefix setup-wizard run build-prod
-
-setup-wizard/config.json:
-	jq '.useMocks = false' setup-wizard/config-sample.json > setup-wizard/config.json
-
-diagnostic-ui/node_modules: diagnostic-ui/package.json
-	npm --prefix diagnostic-ui install
-
-diagnostic-ui/www: $(DIAGNOSTIC_UI_SRC) diagnostic-ui/node_modules diagnostic-ui/config.json
-	npm --prefix diagnostic-ui run build-prod
-
-diagnostic-ui/config.json:
-	jq '.useMocks = false' diagnostic-ui/config-sample.json > diagnostic-ui/config.json
+frontend/config.json: .git/HEAD $(GIT_REFS)
+	jq '.useMocks = false' frontend/config-sample.json > frontend/config.json
+	jq '.gitHash = "$(shell git rev-parse HEAD)"' frontend/config.json > $(TMP_FILE) && mv $(TMP_FILE) frontend/config.json
 
 patch-db/client/node_modules: patch-db/client/package.json
 	npm --prefix patch-db/client install
@@ -92,5 +68,5 @@ patch-db/client/dist: $(PATCH_DB_CLIENT_SRC) patch-db/client/node_modules
 	! test -d patch-db/client/dist || rm -rf patch-db/client/dist
 	npm --prefix patch-db/client run build
 
-ui: $(EMBASSY_UIS)
-
+# this is a convenience step to build all frontends - it is not referenced elsewhere in this file
+frontend: frontend/node_modules $(EMBASSY_UIS) 

build/write-image.sh

@@ -65,9 +65,9 @@ sudo cp system-images/**/*.tar /tmp/eos-mnt/var/lib/embassy/system-images
 
 # after performing npm run build
 sudo mkdir -p /tmp/eos-mnt/var/www/html
-sudo cp -R ui/www /tmp/eos-mnt/var/www/html/main
-sudo cp -R setup-wizard/www /tmp/eos-mnt/var/www/html/setup
-sudo cp -R diagnostic-ui/www /tmp/eos-mnt/var/www/html/diagnostic
+sudo cp -R frontend/dist/diagnostic-ui /tmp/eos-mnt/var/www/html/diagnostic
+sudo cp -R frontend/dist/setup-wizard /tmp/eos-mnt/var/www/html/setup
+sudo cp -R frontend/dist/ui /tmp/eos-mnt/var/www/html/main
 
 # Make the .ssh directory
 sudo mkdir -p /tmp/eos-mnt/root/.ssh

diagnostic-ui/.eslintrc.json

@@ -1,47 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["projects/**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "parserOptions": {
-        "project": ["tsconfig.json"],
-        "createDefaultProgram": true
-      },
-      "extends": [
-        // "plugin:@angular-eslint/ng-cli-compat",
-        // "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        // "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/component-class-suffix": [
-          "error",
-          {
-            "suffixes": ["Page", "Component"]
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
-    }
-  ]
-}

diagnostic-ui/.gitignore

@@ -1,33 +0,0 @@
-# Specifies intentionally untracked files to ignore when using Git
-# http://git-scm.com/docs/gitignore
-
-*~
-*.sw[mnpcod]
-.tmp
-*.tmp
-*.tmp.*
-*.sublime-project
-*.sublime-workspace
-.DS_Store
-Thumbs.db
-UserInterfaceState.xcuserstate
-$RECYCLE.BIN/
-
-*.log
-log.txt
-npm-debug.log*
-
-/.idea
-/.ionic
-/.sass-cache
-/.sourcemaps
-/.versions
-/.vscode
-/coverage
-/dist
-/node_modules
-/platforms
-/plugins
-/www
-
-config.json

diagnostic-ui/README.md

@@ -1,52 +0,0 @@
-# Embassy Diagnostic UI
-
-## Development Environment Setup
-
-- Requirements
-  - [Install nodejs](https://nodejs.org/en/)
-  - [Install npm](https://www.npmjs.com/get-npm)
-  - [Install ionic cli](https://ionicframework.com/docs/intro/cli)
-  - Recommended: [Install nvm](https://github.com/nvm-sh/nvm)
-
-```
-node --version
-v16.11.0
-
-npm --version
-v8.0.0
-```
-## Styleguide
-
-This project utilizes [tslint](https://palantir.github.io/tslint/) for formatting.
-
-## Building Diagnostic UI
-
-`git clone https://github.com/Start9Labs/embassy-os.git`
-
-`cd embassy-os`
-
-`git submodule update --init --recursive` - installs submodule projects
-
-`cd diagnostic-ui/` -  installs node package dependencies
-
-`npm install -g @ionic/cli`
-
-`npm --prefix . install`
-
-Copy `config-sample.json` and contents to a new file `config.json`
-
-### Start the development server
-
-Serves the diagnostic-ui on `localhost:8100` for local development. 
-Edit `./diagnostic-ui/config.json` and set `useMocks: true` to use mocks during local development
-
-```
-ionic serve
-```
-
-### Production Build
-Before publishing a PR, please build for production and correct any errors. Run the following command, which compiles project customized for deployment to an Embassy, depositing build artifacts into `diagnostic-ui/www`.
-
-```
-npm --prefix ui run build-prod
-```

diagnostic-ui/angular.json

@@ -1,140 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "defaultProject": "app",
-  "newProjectRoot": "projects",
-  "projects": {
-    "app": {
-      "root": "",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "prefix": "app",
-      "schematics": {},
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "www",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.json",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "assets"
-              },
-              {
-                "glob": "**/*.svg",
-                "input": "node_modules/ionicons/dist/ionicons/svg",
-                "output": "./svg"
-              }
-            ],
-            "styles": ["src/theme/variables.scss", "src/global.scss"],
-            "scripts": [],
-            "aot": false,
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
-            },
-            "ci": {
-              "progress": false
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "app:build:production"
-            },
-            "ci": {
-              "progress": false
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "app:build"
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "app:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "app:ionic-cordova-build",
-            "devServerTarget": "app:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "app:ionic-cordova-build:production",
-              "devServerTarget": "app:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "defaultCollection": "@ionic/angular-toolkit"
-  },
-  "schematics": {
-    "@ionic/angular-toolkit:component": {
-      "styleext": "scss"
-    },
-    "@ionic/angular-toolkit:page": {
-      "styleext": "scss"
-    }
-  }
-}

diagnostic-ui/config-sample.json

@@ -1,3 +0,0 @@
-{
-  "useMocks": true
-}

diagnostic-ui/ionic.config.json

@@ -1,5 +0,0 @@
-{
-  "name": "diagnosticUI",
-  "integrations": {},
-  "type": "angular"
-}

diagnostic-ui/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "diagnostic-ui",
-  "version": "0.3.0",
-  "author": "Start9 Labs, Inc",
-  "description": "User interface for EmbassyOS diagnostic mode",
-  "homepage": "https://start9.com/",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "build-prod": "ng build --configuration production",
-    "lint": "ng lint"
-  },
-  "dependencies": {
-    "@angular/animations": "^12.2.5",
-    "@angular/common": "^12.2.5",
-    "@angular/core": "^12.2.5",
-    "@angular/forms": "^12.2.5",
-    "@angular/platform-browser": "^12.2.5",
-    "@angular/platform-browser-dynamic": "^12.2.5",
-    "@angular/router": "^12.2.5",
-    "@ionic/angular": "^5.6.13",
-    "ansi-to-html": "^0.7.2",
-    "rxjs": "^6.6.7",
-    "tslib": "^2.3.1",
-    "zone.js": "^0.11.4"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.5",
-    "@angular-eslint/builder": "^12.4.1",
-    "@angular-eslint/eslint-plugin": "^12.4.1",
-    "@angular-eslint/eslint-plugin-template": "^12.4.1",
-    "@angular-eslint/template-parser": "^12.4.1",
-    "@angular/cli": "^12.2.5",
-    "@angular/compiler": "^12.2.5",
-    "@angular/compiler-cli": "^12.2.5",
-    "@angular/language-service": "^12.2.5",
-    "@ionic/angular-toolkit": "^4.0.0",
-    "@types/node": "^16.9.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsdoc": "^36.1.0",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "ts-node": "^10.2.1",
-    "typescript": "4.3.5"
-  }
-}

diagnostic-ui/src/theme/variables.scss

@@ -1,108 +0,0 @@
-// Ionic Variables and Theming. For more info, please see:
-// http://ionicframework.com/docs/theming/
-
-/** Ionic CSS Variables **/
-:root {
-  --ion-font-family: 'Montserrat';
-
-  --ion-item-background: #2b2b2b;
-  --ion-toolbar-background: #2b2b2b;
-  --ion-card-background: #2b2b2b;
-
-  --ion-background-color: #282828;
-  --ion-background-color-rgb: 30,30,30;
-  --ion-text-color: var(--ion-color-dark);
-  --ion-text-color-rgb: var(--ion-color-dark-rgb);
-  // --ion-border-color: #222222;
-
-  // colors
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66,140,255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255,255,255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #50c8ff;
-  --ion-color-secondary-rgb: 80,200,255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255,255,255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106,100,255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255,255,255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47,223,117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0,0,0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #ffd534;
-  --ion-color-warning-rgb: 255,213,52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0,0,0;
-  --ion-color-warning-shade: #e0bb2e;
-  --ion-color-warning-tint: #ffd948;
-
-  --ion-color-danger: #ff4961;
-  --ion-color-danger-rgb: 255,73,97;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255,255,255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-dark: #e0e0e0;
-  --ion-color-dark-rgb: 224,224,224;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0,0,0;
-  --ion-color-dark-shade: #bfbfbf;
-  --ion-color-dark-tint: #d8d8d8;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152,154,162;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0,0,0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #222428;
-  --ion-color-light-rgb: 34,36,40;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255,255,255;
-  --ion-color-light-shade: #1e2023;
-  --ion-color-light-tint: #383a3e;
-
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  font-style: normal;
-  font-weight: normal;
-  src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf');
-}

diagnostic-ui/tsconfig.json

@@ -1,33 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./out-tsc/app",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": ["es2018", "dom"],
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

frontend/.browserslistrc

@@ -14,4 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

frontend/.gitignore

@@ -6,6 +6,8 @@
 .tmp
 *.tmp
 *.tmp.*
+*.sublime-project
+*.sublime-workspace
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
@@ -22,13 +24,18 @@ npm-debug.log*
 
 postprocess.js
 
+/.angular
 /.idea
 /.ionic
 /.sass-cache
 /.sourcemaps
+/.versions
 /.vscode
 /.gradle
 /dist
 /out-tsc
 /node_modules
-/www
+/platforms
+/plugins
+
+config.json

frontend/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/README.md

@@ -0,0 +1,52 @@
+# EmbassyOS Frontend
+
+EmbassyOS has three user interfaces and a shared library, all written in Ionic/Angular/Typescript using an Angular workspace environment:
+
+1. **ui**: the main user interface
+1. **setup-wizard**: used to facilitate initial setup
+1. **diagnostic-ui**: used to display certain diagnostic information in the event EmbassyOS fails to initialize
+1. **shared**: contains components, types, and functions shared amongst the three UIs.
+
+## Development Environment Setup
+
+- Requirements:
+  - [Install nodejs](https://nodejs.org/en/)
+  - [Install npm](https://www.npmjs.com/get-npm)
+
+Check your versions
+
+```
+node --version
+v16.10.0
+
+npm --version
+v8.0.0
+```
+
+## Running locally with mocks
+
+```
+git clone https://github.com/Start9Labs/embassy-os.git
+cd embassy-os
+git submodule update --init --recursive
+cd frontend
+npm ci
+npm run build:deps
+```
+
+Copy `config-sample.json` and its contents to a new file `config.json`.
+
+```
+cp config-sample.json config.json
+```
+
+By default, "useMocks" is set to `true`.
+Valid values for "maskAs" are `tor` and `lan`.
+
+**Start the development server(s)**
+
+```
+npm run start:ui
+npm run start:setup-wizard
+npm run start:diagnostic-ui
+```

frontend/angular.json

@@ -0,0 +1,410 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/ui",
+      "sourceRoot": "projects/ui/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "preserveSymlinks": true,
+            "outputPath": "dist/ui",
+            "index": "projects/ui/src/index.html",
+            "main": "projects/ui/src/main.ts",
+            "polyfills": "projects/ui/src/polyfills.ts",
+            "tsConfig": "projects/ui/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "styles/variables.scss",
+              "styles/global.scss",
+              "projects/ui/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/ui/src/environments/environment.ts",
+                  "with": "projects/ui/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            },
+            "development": {
+              "browserTarget": "ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ui:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ui/src/**/*.ts",
+              "projects/ui/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "ui:ionic-cordova-build",
+            "devServerTarget": "ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "ui:ionic-cordova-build:production",
+              "devServerTarget": "ui:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "setup-wizard": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/setup-wizard",
+      "sourceRoot": "projects/setup-wizard/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/setup-wizard",
+            "index": "projects/setup-wizard/src/index.html",
+            "main": "projects/setup-wizard/src/main.ts",
+            "polyfills": "projects/setup-wizard/src/polyfills.ts",
+            "tsConfig": "projects/setup-wizard/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "styles/variables.scss",
+              "styles/global.scss",
+              "projects/setup-wizard/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/setup-wizard/src/environments/environment.ts",
+                  "with": "projects/setup-wizard/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "setup-wizard:build:production"
+            },
+            "development": {
+              "browserTarget": "setup-wizard:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "setup-wizard:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/setup-wizard/src/**/*.ts",
+              "projects/setup-wizard/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "setup-wizard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "setup-wizard:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "setup-wizard:ionic-cordova-build",
+            "devServerTarget": "setup-wizard:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "setup-wizard:ionic-cordova-build:production",
+              "devServerTarget": "setup-wizard:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "diagnostic-ui": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/diagnostic-ui",
+      "sourceRoot": "projects/diagnostic-ui/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/diagnostic-ui",
+            "index": "projects/diagnostic-ui/src/index.html",
+            "main": "projects/diagnostic-ui/src/main.ts",
+            "polyfills": "projects/diagnostic-ui/src/polyfills.ts",
+            "tsConfig": "projects/diagnostic-ui/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "styles/variables.scss",
+              "styles/global.scss",
+              "projects/diagnostic-ui/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/diagnostic-ui/src/environments/environment.ts",
+                  "with": "projects/diagnostic-ui/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+            "ci": {
+              "progress": false
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "diagnostic-ui:build:production"
+            },
+            "development": {
+              "browserTarget": "diagnostic-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/diagnostic-ui/src/**/*.ts",
+              "projects/diagnostic-ui/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "diagnostic-ui:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build",
+            "devServerTarget": "diagnostic-ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build:production",
+              "devServerTarget": "diagnostic-ui:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "shared": {
+      "projectType": "library",
+      "root": "projects/shared",
+      "sourceRoot": "projects/shared/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/shared/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/shared/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/shared/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    }
+  },
+  "defaultProject": "ui",
+  "cli": {
+    "defaultCollection": "@ionic/angular-toolkit"
+  },
+  "schematics": {
+    "@ionic/angular-toolkit:component": {
+      "styleext": "scss"
+    },
+    "@ionic/angular-toolkit:page": {
+      "styleext": "scss"
+    }
+  }
+}

frontend/config-sample.json

@@ -0,0 +1,19 @@
+{
+  "useMocks": true,
+  "ui": {
+    "gitHash": "3fd3de293fac45b745b3691a1b1804cea6739950",
+    "patchDb": {
+      "poll": {
+        "cooldown": 10000
+      }
+    },
+    "api": {
+      "url": "rpc",
+      "version": "v1"
+    },
+    "mocks": {
+      "maskAs": "tor",
+      "skipStartupAlerts": true
+    }
+  }
+}

frontend/ionic.config.json

@@ -0,0 +1,23 @@
+{
+  "projects": {
+    "ui": {
+      "name": "ui",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/ui"
+    },
+    "setup-wizard": {
+      "name": "setup-wizard",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/setup-wizard"
+    },
+    "diagnostic-ui": {
+      "name": "diagnostic-ui",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/diagnostic-ui"
+    }
+  },
+  "defaultProject": "ui"
+}

frontend/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "embassy-os",
+  "version": "0.3.0",
+  "author": "Start9 Labs, Inc",
+  "homepage": "https://start9.com/",
+  "scripts": {
+    "ng": "ng",
+    "check": "npm run check:shared && npm run check:ui && npm run check:setup-wizard && npm run check:diagnostic-ui",
+    "check:shared": "tsc --project projects/shared/tsconfig.lib.json --noEmit --skipLibCheck",
+    "check:diagnostic-ui": "tsc --project projects/diagnostic-ui/tsconfig.app.json --noEmit --skipLibCheck",
+    "check:setup-wizard": "tsc --project projects/setup-wizard/tsconfig.app.json --noEmit --skipLibCheck",
+    "check:ui": "tsc --project projects/ui/tsconfig.app.json --noEmit --skipLibCheck",
+    "build:deps": "cd ../patch-db/client && npm install && npm run build",
+    "build:diagnostic-ui": "ng run diagnostic-ui:build",
+    "build:setup-wizard": "ng run setup-wizard:build",
+    "build:ui": "ng run ui:build && tsc projects/ui/postprocess.ts && node projects/ui/postprocess.js && git log | head -n1 > dist/ui/git-hash.txt",
+    "build:all": "npm run build:deps && npm run build:diagnostic-ui && npm run build:setup-wizard && npm run build:ui",
+    "start:diagnostic-ui": "ionic serve --project diagnostic-ui",
+    "start:setup-wizard": "ionic serve --project setup-wizard",
+    "start:ui": "ionic serve --project ui"
+  },
+  "dependencies": {
+    "@angular/animations": "^13.2.0",
+    "@angular/common": "^13.2.0",
+    "@angular/compiler": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@angular/forms": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/platform-browser-dynamic": "^13.2.0",
+    "@angular/router": "^13.2.0",
+    "@ionic/angular": "^6.0.3",
+    "@ionic/storage-angular": "^3.0.6",
+    "@start9labs/argon2": "^0.1.0",
+    "@start9labs/emver": "^0.1.5",
+    "@types/aes-js": "^3.1.1",
+    "@types/pbkdf2": "^3.1.0",
+    "aes-js": "^3.1.2",
+    "ajv": "^6.12.6",
+    "ansi-to-html": "^0.7.2",
+    "core-js": "^3.17.2",
+    "dompurify": "^2.3.3",
+    "fast-json-patch": "^3.1.0",
+    "fuse.js": "^6.4.6",
+    "marked": "^3.0.0",
+    "mustache": "^4.2.0",
+    "ng-qrcode": "^6.0.0",
+    "patch-db-client": "file: ../../../patch-db/client",
+    "pbkdf2": "^3.1.2",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.3.0",
+    "uuid": "^8.3.2",
+    "zone.js": "^0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^13.1.4",
+    "@angular/cli": "^13.1.4",
+    "@angular/compiler-cli": "^13.2.0",
+    "@angular/language-service": "^13.2.0",
+    "@ionic/angular-toolkit": "^4.0.0",
+    "@ionic/cli": "^6.18.1",
+    "@types/json-pointer": "^1.0.31",
+    "@types/marked": "^3.0.0",
+    "@types/mustache": "^4.1.2",
+    "@types/node": "^16.9.1",
+    "@types/uuid": "^8.3.1",
+    "husky": "^4.3.8",
+    "lint-staged": "^12.1.2",
+    "ng-packagr": "^13.0.0",
+    "node-html-parser": "^4.1.4",
+    "prettier": "^2.5.1",
+    "raw-loader": "^4.0.2",
+    "ts-node": "^10.4.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.5.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && npm run check"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,ts,html,md,less,json}": "prettier --write",
+    "*.ts": "tslint --fix"
+  }
+}

frontend/projects/diagnostic-ui/src/app/app.module.ts

@@ -10,8 +10,9 @@ import { MockApiService } from './services/api/mock-api.service'
 import { LiveApiService } from './services/api/live-api.service'
 import { HttpService } from './services/http.service'
 import { GlobalErrorHandler } from './services/global-error-handler.service'
+import { WorkspaceConfig } from '@shared'
 
-const useMocks = require('../../config.json').useMocks
+const { useMocks } = require('../../../../config.json') as WorkspaceConfig
 
 @NgModule({
   declarations: [AppComponent],
@@ -35,7 +36,7 @@ const useMocks = require('../../config.json').useMocks
           return new LiveApiService(http)
         }
       },
-      deps: [HttpService]
+      deps: [HttpService],
     },
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
   ],

frontend/projects/diagnostic-ui/src/styles.scss

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf');
+}
+
+/** Ionic CSS Variables overrides **/
+:root {
+  --ion-font-family: 'Montserrat';
+
+  --ion-color-primary: #0075e1;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152,154,162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0,0,0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34,36,40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255,255,255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+
+  --ion-item-background: #2b2b2b;
+  --ion-toolbar-background: #2b2b2b;
+  --ion-card-background: #2b2b2b;
+
+  --ion-background-color: #282828;
+  --ion-background-color-rgb: 30,30,30;
+  --ion-text-color: var(--ion-color-dark);
+  --ion-text-color-rgb: var(--ion-color-dark-rgb);
+}
+
+.loader {
+  --spinner-color: var(--ion-color-warning) !important;
+  z-index: 40000 !important;
+}

frontend/projects/diagnostic-ui/tsconfig.app.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}