From fa0decc2b560c795e8c42586fb30e34951338972 Mon Sep 17 00:00:00 2001 From: David Radcliffe Date: Sun, 25 Aug 2024 12:44:47 -0400 Subject: [PATCH] refactor angular config for better dev mode --- .github/workflows/cloud-deploy.yaml | 2 - CONTRIBUTING.md | 24 ++++---- Makefile | 2 +- frontend/angular.json | 40 ++++++++++++- frontend/proxy.conf.json | 6 ++ frontend/src/assets/favicon/site.webmanifest | 4 +- .../environments/environment.cloud_sandbox.ts | 3 - .../environments/environment.desktop_prod.ts | 1 - frontend/src/environments/environment.dev.ts | 12 ++++ frontend/src/environments/environment.prod.ts | 3 - .../src/environments/environment.sandbox.ts | 3 - frontend/src/environments/environment.ts | 5 -- frontend/src/index-cloud.html | 14 +++-- frontend/src/index-desktop.html | 59 +++++++++++++++++++ frontend/src/index.html | 5 +- 15 files changed, 138 insertions(+), 45 deletions(-) create mode 100644 frontend/proxy.conf.json create mode 100644 frontend/src/environments/environment.dev.ts create mode 100644 frontend/src/index-desktop.html diff --git a/.github/workflows/cloud-deploy.yaml b/.github/workflows/cloud-deploy.yaml index 824ab422..ccf63fb4 100644 --- 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 index 6edf0b80..75fe623a 100644 --- 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,8 +86,7 @@ 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 @@ -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 - -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-signup # Signup 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 index e08143bf..1ff27448 100644 --- 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 index 0adc37c5..5b66edd6 100644 --- 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 new file mode 100644 index 00000000..5312a5c0 --- /dev/null +++ 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 index b20abb7c..12c0d091 100644 --- 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 index 49ed974f..a85319ee 100644 --- 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 index 3a16b67c..f4ef6f8e 100644 --- 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 new file mode 100644 index 00000000..b5de02d5 --- /dev/null +++ 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 index ded622c6..aee07ade 100644 --- 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 index e0965aa0..6edf1280 100644 --- 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 index b39ce921..6f798dd6 100644 --- 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 index 613954a5..a08368e6 100644 --- 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" /> - - - fastenhealth + + + + + + + + + Fasten Health Cloud @@ -32,6 +38,6 @@ document.write(``); - + diff --git a/frontend/src/index-desktop.html b/frontend/src/index-desktop.html new file mode 100644 index 00000000..e5b9e5f6 --- /dev/null +++ b/frontend/src/index-desktop.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + Fasten Health + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/index.html b/frontend/src/index.html index 6371b097..d53c4d13 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -14,7 +14,7 @@ - fastenhealth + Fasten Health @@ -40,9 +40,6 @@ - - -