refactor angular config for better dev mode

.github/workflows/cloud-deploy.yaml

@@ -36,8 +36,6 @@ jobs:
 
       - name: Copy files to the test website with the AWS CLI
         run: |
-          rm -rf dist/index.html
-          mv dist/index-cloud.html dist/index.html
           aws s3 sync dist s3://app-sandbox.fastenhealth.com --acl public-read
 
       - uses: chrnorm/deployment-action@v2

CONTRIBUTING.md

@@ -86,8 +86,7 @@ Next we'll start the processes described above:
 ```bash
 
 # In terminal #1, run the following
-make build-frontend-[sandbox|prod]
+make serve-frontend
-# eg. make build-frontend-sandbox
 
 # In terminal #2, run the following
 make serve-backend
@@ -95,14 +94,11 @@ make serve-backend
 ```
 
 _Note_: Fasten can run in 2 modes: sandbox or production (prod). In sandbox mode, it can only communicate with test servers (full of synthetic health data).
+By default, the dev environment will run in sandbox mode.
 
-Now you can open a browser to `http://localhost:9090` to see the Fasten UI. 
+Now you can open a browser to `http://localhost:4200` to see the Fasten UI.
 
-## Important URL's 
+_Note_: By default in `dev` mode, you view the frontend server and that will proxy API requests to the backend. It is also possible to build the frontend and serve it from the backend server, but this is much slower to make changes to the frontend.
-
-The following URL's and credentials may be helpful as you're developing
-
-- http://localhost:9090/web/dashboard - WebUI
 
 ### Credentials
 

Makefile

@@ -17,7 +17,7 @@ serve-storybook: dep-frontend
 
 .PHONY: serve-frontend
 serve-frontend: dep-frontend
-	cd frontend && yarn dist -- -c sandbox
+	cd frontend && ng serve --hmr --live-reload -c dev
 
 .PHONY: serve-frontend-prod
 serve-frontend-prod: dep-frontend

frontend/angular.json

@@ -76,10 +76,27 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/@panva/oauth4webapi/build/index.js"
+              {
+                "input": "node_modules/@panva/oauth4webapi/build/index.js",
+                "bundleName": "oauth4webapi"
+              }
             ]
           },
           "configurations": {
+            "dev": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.dev.ts"
+                }
+              ],
+              "optimization": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "extractLicenses": true,
+              "vendorChunk": true,
+              "buildOptimizer": false
+            },
             "prod": {
               "fileReplacements": [
                 {
@@ -135,7 +152,10 @@
               ]
             },
             "cloud_sandbox": {
-              "index": "src/index-cloud.html",
+              "index": {
+                "input": "src/index-cloud.html",
+                "output": "src/index.html"
+              },
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -163,6 +183,10 @@
               ]
             },
             "desktop_sandbox": {
+              "index": {
+                "input": "src/index-desktop.html",
+                "output": "src/index.html"
+              },
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -190,6 +214,10 @@
               ]
             },
             "desktop_prod": {
+              "index": {
+                "input": "src/index-desktop.html",
+                "output": "src/index.html"
+              },
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -248,9 +276,15 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "fastenhealth:build"
+            "hmr": true,
+            "liveReload": true,
+            "browserTarget": "fastenhealth:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
+            "dev": {
+              "browserTarget": "fastenhealth:build:dev"
+            },
             "prod": {
               "browserTarget": "fastenhealth:build:prod"
             },

frontend/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:9090",
+    "secure": false
+  }
+}

frontend/src/assets/favicon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/assets/favicon/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/assets/favicon/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }

frontend/src/environments/environment.cloud_sandbox.ts

@@ -7,9 +7,6 @@ export const environment = {
 
   lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox',
 
-  //used to specify the couchdb server that we're going to use (can be relative or absolute). Must not have trailing slash
-  couchdb_endpoint_base: 'https://couchdb.sandbox.fastenhealth.com',
-
   //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
   fasten_api_endpoint_base: 'https://api.sandbox.fastenhealth.com/v1',
 };

frontend/src/environments/environment.desktop_prod.ts

@@ -7,7 +7,6 @@ export const environment = {
 
   lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/v1',
 
-
   //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
   fasten_api_endpoint_base: '/api',
 };

frontend/src/environments/environment.dev.ts

@@ -0,0 +1,12 @@
+export const environment = {
+  production: false,
+  environment_cloud: false,
+  environment_desktop: false,
+  environment_name: "dev",
+  popup_source_auth: false,
+
+  lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox',
+
+  //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
+  fasten_api_endpoint_base: '/api',
+};

frontend/src/environments/environment.prod.ts

@@ -7,9 +7,6 @@ export const environment = {
 
   lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/v1',
 
-  //used to specify the couchdb server that we're going to use (can be relative or absolute). Must not have trailing slash
-  couchdb_endpoint_base: '/database',
-
   //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
   fasten_api_endpoint_base: '/api',
 };

frontend/src/environments/environment.sandbox.ts

@@ -11,9 +11,6 @@ export const environment = {
 
   lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox',
 
-  //used to specify the couchdb server that we're going to use (can be relative or absolute). Must not have trailing slash
-  couchdb_endpoint_base: '/database',
-
   //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
   fasten_api_endpoint_base: '/api',
 };

frontend/src/environments/environment.ts

@@ -20,11 +20,6 @@ export const environment = {
   //specify the lighthouse server that we're going to use to authenticate against all our source/providers. Must not have trailing slash
   lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox',
 
-  //used to specify the couchdb server that we're going to use (can be relative or absolute). Must not have trailing slash
-  // couchdb_endpoint_base: 'https://couchdb.sandbox.fastenhealth.com',
-  // if relative, must start with /
-  couchdb_endpoint_base: '/database',
-
   //used to specify the api server that we're going to use (can be relative or absolute). Must not have trailing slash
   // fasten_api_endpoint_base: 'https://api.sandbox.fastenhealth.com/v1',
   // if relative, must start with /

frontend/src/index-cloud.html

@@ -6,9 +6,15 @@
     name="viewport"
     content="width=device-width, initial-scale=1, shrink-to-fit=no"
   />
-  <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon.png"/>
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="./assets/img/favicon.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
-  <title>fastenhealth</title>
+  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
+  <link rel="manifest" href="./assets/favicon/site.webmanifest">
+  <link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#603cba">
+  <meta name="theme-color" content="#ffffff">
+
+  <title>Fasten Health Cloud</title>
   <!--     Fonts and icons     -->
   <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
   <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
@@ -32,6 +38,6 @@
     document.write(`<base href="${baseHref}"/>`);  </script>
 </head>
 <body>
-<app-root></app-root>
+  <app-root></app-root>
 </body>
 </html>

frontend/src/index-desktop.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, shrink-to-fit=no"
+  />
+  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
+  <link rel="manifest" href="./assets/favicon/site.webmanifest">
+  <link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#603cba">
+  <meta name="theme-color" content="#ffffff">
+
+  <title>Fasten Health</title>
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
+  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
+<!-- TODO: figure out why we cant use the built-in styles <link href="./assets/lforms/styles.css" rel="stylesheet">-->
+  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
+  <script src="./assets/js/asmcrypto-2.3.2.all.es5.min.js"></script>
+  <script>
+    var baseHref = "/"
+
+    // if the pathname includes /web, everthing before `/web` (and including web) should be set as the base path.
+    if(window.location.pathname.includes('/web')){
+      baseHref = "/web/"
+      // probably running locally, and *may* include a subpath
+      var subPath = window.location.pathname.split('/web').slice(0, 1)[0]
+      if(subPath != "/"){
+        //subpath, so we need to update the absolutePath with the subpath before adding the relative path to the end
+        baseHref = subPath + '/web/'
+      }
+    }
+
+    document.write(`<base href="${baseHref}"/>`);  </script>
+
+  <!-- required for lhncbc/lforms -->
+  <script src="./assets/js/webcomponents/webcomponents-loader.js"></script>
+
+  <!-- wails -- this file is required in Desktop -->
+  <script type="module" src="/wails/runtime.js"></script>
+
+  <script>
+    if (!window.customElements) {
+      document.write('<!--');
+    }
+  </script>
+  <!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->
+</head>
+<body>
+  <app-root></app-root>
+  <script src="./assets/js/lforms/assets/lib/zone.min.js"></script>
+  <script src="./assets/js/lforms/lhc-forms.js"></script>
+  <script src="./assets/js/lforms/fhir/lformsFHIRAll.min.js"></script>
+</body>
+</html>

frontend/src/index.html

@@ -14,7 +14,7 @@
   <meta name="msapplication-TileColor" content="#603cba">
   <meta name="theme-color" content="#ffffff">
 
-  <title>fastenhealth</title>
+  <title>Fasten Health</title>
   <!--     Fonts and icons     -->
   <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
   <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
@@ -40,9 +40,6 @@
   <!-- required for lhncbc/lforms -->
   <script src="./assets/js/webcomponents/webcomponents-loader.js"></script>
 
-  <!-- wails -- this file is expected to be missing in docker/web mode. It's only required in Desktop -->
-  <script type="module" src="/wails/runtime.js"></script>
-
   <script>
     if (!window.customElements) {
       document.write('<!--');