refactor angular config for better dev mode

This commit is contained in:
David Radcliffe 2024-08-25 12:44:47 -04:00 committed by Jason Kulatunga
parent 7d07157550
commit fa0decc2b5
15 changed files with 138 additions and 45 deletions

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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"
},

6
frontend/proxy.conf.json Normal file
View File

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

View File

@ -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"
}

View File

@ -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',
};

View File

@ -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',
};

View File

@ -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',
};

View File

@ -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',
};

View File

@ -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',
};

View File

@ -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 /

View File

@ -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>

View File

@ -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>

View File

@ -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('<!--');