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 - name: Copy files to the test website with the AWS CLI
run: | 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 aws s3 sync dist s3://app-sandbox.fastenhealth.com --acl public-read
- uses: chrnorm/deployment-action@v2 - uses: chrnorm/deployment-action@v2

View File

@ -86,8 +86,7 @@ Next we'll start the processes described above:
```bash ```bash
# In terminal #1, run the following # 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 # In terminal #2, run the following
make serve-backend 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). _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 ### Credentials

View File

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

View File

@ -76,10 +76,27 @@
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [ "scripts": [
"node_modules/@panva/oauth4webapi/build/index.js" {
"input": "node_modules/@panva/oauth4webapi/build/index.js",
"bundleName": "oauth4webapi"
}
] ]
}, },
"configurations": { "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": { "prod": {
"fileReplacements": [ "fileReplacements": [
{ {
@ -135,7 +152,10 @@
] ]
}, },
"cloud_sandbox": { "cloud_sandbox": {
"index": "src/index-cloud.html", "index": {
"input": "src/index-cloud.html",
"output": "src/index.html"
},
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
@ -163,6 +183,10 @@
] ]
}, },
"desktop_sandbox": { "desktop_sandbox": {
"index": {
"input": "src/index-desktop.html",
"output": "src/index.html"
},
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
@ -190,6 +214,10 @@
] ]
}, },
"desktop_prod": { "desktop_prod": {
"index": {
"input": "src/index-desktop.html",
"output": "src/index.html"
},
"fileReplacements": [ "fileReplacements": [
{ {
"replace": "src/environments/environment.ts", "replace": "src/environments/environment.ts",
@ -248,9 +276,15 @@
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "fastenhealth:build" "hmr": true,
"liveReload": true,
"browserTarget": "fastenhealth:build",
"proxyConfig": "proxy.conf.json"
}, },
"configurations": { "configurations": {
"dev": {
"browserTarget": "fastenhealth:build:dev"
},
"prod": { "prod": {
"browserTarget": "fastenhealth:build: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": "", "short_name": "",
"icons": [ "icons": [
{ {
"src": "/android-chrome-192x192.png", "src": "/assets/favicon/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/android-chrome-512x512.png", "src": "/assets/favicon/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }

View File

@ -7,9 +7,6 @@ export const environment = {
lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox', 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 //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', 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', 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 //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', 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', 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 //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', fasten_api_endpoint_base: '/api',
}; };

View File

@ -11,9 +11,6 @@ export const environment = {
lighthouse_api_endpoint_base: 'https://lighthouse.fastenhealth.com/sandbox', 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 //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', 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 //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', 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 //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', // fasten_api_endpoint_base: 'https://api.sandbox.fastenhealth.com/v1',
// if relative, must start with / // if relative, must start with /

View File

@ -6,9 +6,15 @@
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" 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 --> <!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/> <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"/> <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> document.write(`<base href="${baseHref}"/>`); </script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </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="msapplication-TileColor" content="#603cba">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<title>fastenhealth</title> <title>Fasten Health</title>
<!-- Fonts and icons --> <!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/> <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"/> <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet"/>
@ -40,9 +40,6 @@
<!-- required for lhncbc/lforms --> <!-- required for lhncbc/lforms -->
<script src="./assets/js/webcomponents/webcomponents-loader.js"></script> <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> <script>
if (!window.customElements) { if (!window.customElements) {
document.write('<!--'); document.write('<!--');