From 8f4cd66b583278d1fa414cd8a05462ddf4affedc Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 11:55:16 +0200 Subject: [PATCH 1/9] Add bootstrap --- bff/ui/package-lock.json | 41 ++++++++++++++++++++++++++++++++++++++++ bff/ui/package.json | 6 +++--- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/bff/ui/package-lock.json b/bff/ui/package-lock.json index 9811b6d..bc038b0 100644 --- a/bff/ui/package-lock.json +++ b/bff/ui/package-lock.json @@ -18,6 +18,7 @@ "@angular/platform-browser-dynamic": "17.3.4", "@angular/router": "17.3.4", "@nx/angular": "18.2.4", + "bootstrap": "^5.3.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "0.14.4" @@ -5616,6 +5617,16 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.14.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz", @@ -7717,6 +7728,24 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -20974,6 +21003,12 @@ } } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true + }, "@rollup/rollup-android-arm-eabi": { "version": "4.14.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz", @@ -22539,6 +22574,12 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/bff/ui/package.json b/bff/ui/package.json index c75b667..5fcf462 100644 --- a/bff/ui/package.json +++ b/bff/ui/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser-dynamic": "17.3.4", "@angular/router": "17.3.4", "@nx/angular": "18.2.4", + "bootstrap": "^5.3.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "0.14.4" @@ -32,6 +33,7 @@ "@angular/cli": "~17.0.0", "@angular/compiler-cli": "17.3.4", "@angular/language-service": "17.3.4", + "@nx/eslint": "18.2.4", "@nx/eslint-plugin": "18.2.4", "@nx/jest": "18.2.4", "@nx/js": "18.2.4", @@ -53,8 +55,6 @@ "prettier": "^2.6.2", "ts-jest": "^29.1.0", "ts-node": "10.9.1", - "typescript": "5.4.5", - "@nx/eslint": "18.2.4" + "typescript": "5.4.5" } } - From 2f02c21f174d7a5895f8cb433766e3fce91a43e3 Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:07:25 +0200 Subject: [PATCH 2/9] Add Call API component --- bff/ui/app.routes.ts | 9 ++++++++ .../src/app/call-api/call-api.component.html | 1 + .../src/app/call-api/call-api.component.scss | 0 .../app/call-api/call-api.component.spec.ts | 21 +++++++++++++++++++ bff/ui/src/app/call-api/call-api.component.ts | 11 ++++++++++ 5 files changed, 42 insertions(+) create mode 100644 bff/ui/app.routes.ts create mode 100644 bff/ui/src/app/call-api/call-api.component.html create mode 100644 bff/ui/src/app/call-api/call-api.component.scss create mode 100644 bff/ui/src/app/call-api/call-api.component.spec.ts create mode 100644 bff/ui/src/app/call-api/call-api.component.ts diff --git a/bff/ui/app.routes.ts b/bff/ui/app.routes.ts new file mode 100644 index 0000000..bd2e43a --- /dev/null +++ b/bff/ui/app.routes.ts @@ -0,0 +1,9 @@ +import { Route } from '@angular/router'; +import { CallApiComponent } from './call-api/call-api.component'; + +export const appRoutes: Route[] = [ + { + path: 'call-api', + component: CallApiComponent + } +]; \ No newline at end of file diff --git a/bff/ui/src/app/call-api/call-api.component.html b/bff/ui/src/app/call-api/call-api.component.html new file mode 100644 index 0000000..3a96005 --- /dev/null +++ b/bff/ui/src/app/call-api/call-api.component.html @@ -0,0 +1 @@ +

call-api works!

diff --git a/bff/ui/src/app/call-api/call-api.component.scss b/bff/ui/src/app/call-api/call-api.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/bff/ui/src/app/call-api/call-api.component.spec.ts b/bff/ui/src/app/call-api/call-api.component.spec.ts new file mode 100644 index 0000000..6d5eaf0 --- /dev/null +++ b/bff/ui/src/app/call-api/call-api.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { CallApiComponent } from './call-api.component'; + +describe('CallApiComponent', () => { + let component: CallApiComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CallApiComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(CallApiComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/bff/ui/src/app/call-api/call-api.component.ts b/bff/ui/src/app/call-api/call-api.component.ts new file mode 100644 index 0000000..72d5325 --- /dev/null +++ b/bff/ui/src/app/call-api/call-api.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'app-call-api', + standalone: true, + imports: [CommonModule], + templateUrl: './call-api.component.html', + styleUrl: './call-api.component.scss', +}) +export class CallApiComponent {} From a6a4fb907b25c67ef35ec8868c52992870938f87 Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:09:37 +0200 Subject: [PATCH 3/9] update routes --- bff/ui/app.routes.ts | 9 --------- bff/ui/src/app/app.routes.ts | 8 +++++++- 2 files changed, 7 insertions(+), 10 deletions(-) delete mode 100644 bff/ui/app.routes.ts diff --git a/bff/ui/app.routes.ts b/bff/ui/app.routes.ts deleted file mode 100644 index bd2e43a..0000000 --- a/bff/ui/app.routes.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Route } from '@angular/router'; -import { CallApiComponent } from './call-api/call-api.component'; - -export const appRoutes: Route[] = [ - { - path: 'call-api', - component: CallApiComponent - } -]; \ No newline at end of file diff --git a/bff/ui/src/app/app.routes.ts b/bff/ui/src/app/app.routes.ts index 8762dfe..bd2e43a 100644 --- a/bff/ui/src/app/app.routes.ts +++ b/bff/ui/src/app/app.routes.ts @@ -1,3 +1,9 @@ import { Route } from '@angular/router'; +import { CallApiComponent } from './call-api/call-api.component'; -export const appRoutes: Route[] = []; +export const appRoutes: Route[] = [ + { + path: 'call-api', + component: CallApiComponent + } +]; \ No newline at end of file From 3d15305993368de921f281c6fbca2e7ff064f17b Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:16:06 +0200 Subject: [PATCH 4/9] build --- bff/ui/nx.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bff/ui/nx.json b/bff/ui/nx.json index a869731..87ea0d0 100644 --- a/bff/ui/nx.json +++ b/bff/ui/nx.json @@ -61,5 +61,5 @@ } }, "defaultProject": "ui", - "nxCloudAccessToken": "YzEwYmYxZDgtMmZiZS00OTAwLThhZDMtNTFkM2VlOWExMGNlfHJlYWQtd3JpdGU=" + "nxCloudAccessToken": "NGJmZDYwYzItOTg1NS00ZTYyLWFkMmYtMDk1YWRlN2EzNjJifHJlYWQtd3JpdGU=" } From 0baad00b056a61076eb53213a778613fff11558b Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:30:10 +0200 Subject: [PATCH 5/9] Fix YARP setup --- bff/server/appsettings.Development.json | 34 +++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/bff/server/appsettings.Development.json b/bff/server/appsettings.Development.json index 1cf6778..3b12273 100644 --- a/bff/server/appsettings.Development.json +++ b/bff/server/appsettings.Development.json @@ -9,10 +9,40 @@ "UiDevServerUrl": "https://localhost:4201", "ReverseProxy": { "Routes": { - "route1": { + "assets": { "ClusterId": "cluster1", "Match": { - "Path": "{**catch-all}" + "Path": "assets/{**catch-all}" + } + }, + "routealljs": { + "ClusterId": "cluster1", + "Match": { + "Path": "{nomatterwhat}.js" + } + }, + "routeallcss": { + "ClusterId": "cluster1", + "Match": { + "Path": "{nomatterwhat}.css" + } + }, + "webpacklazyloadingsources": { + "ClusterId": "cluster1", + "Match": { + "Path": "/src_{nomatterwhat}_ts.js" + } + }, + "signalr": { + "ClusterId": "cluster1", + "Match": { + "Path": "/ng-cli-ws" + } + }, + "webpacknodesrcmap": { + "ClusterId": "cluster1", + "Match": { + "Path": "/{nomatterwhat}.js.map" } } }, From 9590c717a1fa779c7b2bcbb00393e88cf065b9d9 Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:43:23 +0200 Subject: [PATCH 6/9] Update UI and YARP --- .../src/app/call-api/call-api.component.html | 9 +++++++ bff/ui/src/app/call-api/call-api.component.ts | 24 +++++++++++++++++-- bff/ui/src/app/home.component.html | 14 ++++------- 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/bff/ui/src/app/call-api/call-api.component.html b/bff/ui/src/app/call-api/call-api.component.html index 3a96005..40303b7 100644 --- a/bff/ui/src/app/call-api/call-api.component.html +++ b/bff/ui/src/app/call-api/call-api.component.html @@ -1 +1,10 @@

call-api works!

+ +
+ +
+ +
+ +

get direct data using API:

+
{{ dataFromAzureProtectedApi$ | async | json }}
diff --git a/bff/ui/src/app/call-api/call-api.component.ts b/bff/ui/src/app/call-api/call-api.component.ts index 72d5325..c62a59d 100644 --- a/bff/ui/src/app/call-api/call-api.component.ts +++ b/bff/ui/src/app/call-api/call-api.component.ts @@ -1,5 +1,7 @@ -import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit, inject } from '@angular/core'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-call-api', @@ -8,4 +10,22 @@ import { CommonModule } from '@angular/common'; templateUrl: './call-api.component.html', styleUrl: './call-api.component.scss', }) -export class CallApiComponent {} + +export class CallApiComponent { + + private readonly httpClient = inject(HttpClient); + dataFromAzureProtectedApi$: Observable; + + getDirectApiData() { + this.dataFromAzureProtectedApi$ = this.httpClient.get( + `${this.getCurrentHost()}/api/DirectApi` + ); + } + + private getCurrentHost() { + const host = window.location.host; + const url = `${window.location.protocol}//${host}`; + + return url; + } +} diff --git a/bff/ui/src/app/home.component.html b/bff/ui/src/app/home.component.html index b5805ad..ccf9205 100644 --- a/bff/ui/src/app/home.component.html +++ b/bff/ui/src/app/home.component.html @@ -1,13 +1,13 @@

BFF OpenIddict Security architecture with Angular nx

- +
- -
+ Call API + +
+
@@ -15,10 +15,6 @@

BFF OpenIddict Security architecture with Angular nx

User profile:

{{ userProfileClaims | json }}
-
- -

get direct data using API:

- 
{{ dataFromAzureProtectedApi$ | async | json }}
 From 9071f2f15951d1b82c3653f64666cf3a73a39e46 Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:48:49 +0200 Subject: [PATCH 7/9] Add data --- bff/ui/src/app/call-api/call-api.component.html | 3 +-- bff/ui/src/app/home.component.html | 15 +++++++++------ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/bff/ui/src/app/call-api/call-api.component.html b/bff/ui/src/app/call-api/call-api.component.html index 40303b7..856ebf8 100644 --- a/bff/ui/src/app/call-api/call-api.component.html +++ b/bff/ui/src/app/call-api/call-api.component.html @@ -1,4 +1,4 @@ -

call-api works!

+

Data from API

@@ -6,5 +6,4 @@
-

get direct data using API:

{{ dataFromAzureProtectedApi$ | async | json }}
diff --git a/bff/ui/src/app/home.component.html b/bff/ui/src/app/home.component.html index ccf9205..68307f8 100644 --- a/bff/ui/src/app/home.component.html +++ b/bff/ui/src/app/home.component.html @@ -2,12 +2,13 @@

BFF OpenIddict Security architecture with Angular nx

- Call API - -
- -
- +
@@ -20,3 +21,5 @@

User profile:

Log in + +
\ No newline at end of file From 6f95fe3ec54f47241eb9db28d0a322237255dd5a Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 13:54:34 +0200 Subject: [PATCH 8/9] UI --- bff/ui/project.json | 9 +++++++-- bff/ui/src/app/call-api/call-api.component.html | 4 ++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/bff/ui/project.json b/bff/ui/project.json index 26a270c..1b060f0 100644 --- a/bff/ui/project.json +++ b/bff/ui/project.json @@ -16,8 +16,13 @@ "polyfills": ["zone.js"], "tsConfig": "./tsconfig.app.json", "assets": ["./src/favicon.ico", "./src/assets"], - "styles": ["./src/styles.scss"], - "scripts": [] + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", + "./src/styles.scss" + ], + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ] }, "configurations": { "production": { diff --git a/bff/ui/src/app/call-api/call-api.component.html b/bff/ui/src/app/call-api/call-api.component.html index 856ebf8..3cb094b 100644 --- a/bff/ui/src/app/call-api/call-api.component.html +++ b/bff/ui/src/app/call-api/call-api.component.html @@ -1,7 +1,7 @@ -

Data from API

+

Data from API:

- +
From f56e044ce8b521f3d265dde4ea54ab96c24556d5 Mon Sep 17 00:00:00 2001 From: damienbod Date: Sun, 14 Apr 2024 14:01:47 +0200 Subject: [PATCH 9/9] Add navigation --- bff/ui/src/app/home.component.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/bff/ui/src/app/home.component.html b/bff/ui/src/app/home.component.html index 68307f8..80cc036 100644 --- a/bff/ui/src/app/home.component.html +++ b/bff/ui/src/app/home.component.html @@ -2,7 +2,7 @@

BFF OpenIddict Security architecture with Angular nx

-