refactor angular config for better dev mode

fastenhealth · Aug 28, 2024 · fa0decc · fa0decc
1 parent 7d07157
commit fa0decc
Show file tree

Hide file tree

Showing 15 changed files with 138 additions and 45 deletions.
diff --git a/.github/workflows/cloud-deploy.yaml b/.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

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,5 +1,5 @@
 > This doc is a WIP and will be expanded shortly.
-> 
+>
 > In the meantime, please consider looking at the extensive docs in the [Fasten Docs Repository](https://github.com/fastenhealth/docs/tree/main/technical)
 
 # Tech Stack
@@ -86,23 +86,19 @@ Next we'll start the processes described above:
 ```bash
 
 # In terminal #1, run the following
-make build-frontend-[sandbox|prod]
-# eg. make build-frontend-sandbox
+make serve-frontend
 
 # In terminal #2, run the following
 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 
-
-The following URL's and credentials may be helpful as you're developing
-
-- http://localhost:9090/web/dashboard - WebUI
+_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.
 
 ### Credentials
 
@@ -137,7 +133,7 @@ The Fasten source code is organized into a handful of important folders, which w
 │   │   │   │   ├── resource-list                 # Thin shim which populates template depending on FHIR resource type
 │   │   │   │   ├── toast                         # Toast/notification component
 │   │   │   │   └── utilities-sidebar
-│   │   │   ├── models                            # contains classes for communicating with API's and transfering data between pages. 
+│   │   │   ├── models                            # contains classes for communicating with API's and transfering data between pages.
 │   │   │   ├── pages
 │   │   │   │   ├── auth-signin                   # Login/Signin page
 │   │   │   │   ├── auth-#                   # # page
@@ -171,7 +167,7 @@ backend
 │   ├── config
 │   ├── constants.go
 │   ├── database                                                        # contains SQLite Database Client
-│   │   ├── migrations                                            # contains database migrations                        
+│   │   ├── migrations                                            # contains database migrations
 │   ├── event_bus                                                       # contains event bus for pub/sub in UI
 │   ├── models                                                          # contains models for application
 │   │   ├── database                                                # contains database models, generated using Jennifer and supports search parameter extraction using FHIRPath.js to SQLite columns
@@ -185,7 +181,7 @@ backend
 │   │   │   ├── searchParameterExtractor_test.go
 │   │   │   └── utils.go
 │   ├── version
-│   └── web 
+│   └── web
 │       ├── handler                                                    # contains code for API endpoints
 │       ├── middleware                                                # contains middleware for API endpoints
 │       └── server.go
@@ -200,7 +196,7 @@ backend
 ├── docker-compose.yml                  # docker-compose file which can be used to compile and run "all-in-one" image
 ├── Dockerfile                          # dockerfile for "all-in-one" image, containing frontend, backend & database
 ├── docker
-│   ├── README.md 
+│   ├── README.md
 │   └── rootfs                          # filesystem configs, used in Dockerfiles to setup s6-overlay service manager
 │       └── etc
 │           ├── cont-init.d
@@ -277,4 +273,4 @@ PRAGMA wal_checkpoint(TRUNCATE);
 ```
 
 See: https://sqlite.org/forum/info/fefd56014e2135589ea57825b0e2aa3e2df5daf53b5e41aa6a9d8f0c29d0b8e5
-TODO: check if https://www.sqlite.org/pragma.html#pragma_wal_checkpoint can be used to do this automatically. 
+TODO: check if https://www.sqlite.org/pragma.html#pragma_wal_checkpoint can be used to do this automatically.
diff --git a/Makefile b/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

diff --git a/frontend/angular.json b/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"
             },

diff --git a/frontend/proxy.conf.json b/frontend/proxy.conf.json
@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:9090",
+    "secure": false
+  }
+}
diff --git a/frontend/src/assets/favicon/site.webmanifest b/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"
         }

diff --git a/frontend/src/environments/environment.cloud_sandbox.ts b/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',
 };
diff --git a/frontend/src/environments/environment.desktop_prod.ts b/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',
 };
diff --git a/frontend/src/environments/environment.dev.ts b/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',
+};
diff --git a/frontend/src/environments/environment.prod.ts b/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',
 };
diff --git a/frontend/src/environments/environment.sandbox.ts b/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',
 };
diff --git a/frontend/src/environments/environment.ts b/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 /

diff --git a/frontend/src/index-cloud.html b/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="icon" type="image/png" href="./assets/img/favicon.png" />
-  <title>fastenhealth</title>
+  <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 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>
diff --git a/frontend/src/index-desktop.html b/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>
diff --git a/frontend/src/index.html b/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('<!--');