WIP: Docker

booklore-ui/src/app/book/service/file.service.ts

@@ -1,11 +1,12 @@
 import {Injectable, inject} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {API_CONFIG} from '../../config/api-config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FileService {
-  private readonly url = 'http://localhost:8080/v1/book';
+  private readonly url = `${API_CONFIG.BASE_URL}/v1/book`;
   private readonly http = inject(HttpClient);
 
   downloadFile(bookId: number): void {

booklore-ui/src/app/book/service/library.service.ts

@@ -6,12 +6,13 @@ import {Library} from '../model/library.model';
 import {BookService} from './book.service';
 import {SortOption} from '../model/sort.model';
 import {LibraryState} from '../model/state/library-state.model';
+import {API_CONFIG} from '../../config/api-config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class LibraryService {
-  private readonly url = 'http://localhost:8080/v1/library';
+  private readonly url = `${API_CONFIG.BASE_URL}/v1/library`;
 
   private libraryStateSubject = new BehaviorSubject<LibraryState>({
     libraries: null,

booklore-ui/src/app/book/service/shelf.service.ts

@@ -6,12 +6,13 @@ import { Shelf } from '../model/shelf.model';
 import { SortOption } from '../model/sort.model';
 import { BookService } from './book.service';
 import { ShelfState } from '../model/state/shelf-state.model';
+import {API_CONFIG} from '../../config/api-config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ShelfService {
-  private readonly url = 'http://localhost:8080/v1/shelf';
+  private readonly url = `${API_CONFIG.BASE_URL}/v1/shelf`;
   private shelfStateSubject = new BehaviorSubject<ShelfState>({
     shelves: null,
     loaded: false,

booklore-ui/src/app/config/api-config.ts

@@ -1,3 +1,4 @@
 export const API_CONFIG = {
-  BASE_URL: 'http://localhost:8080'
+  BASE_URL: `http://localhost:${window.location.port || 8080}`,
+  BROKER_URL: `ws://localhost:${window.location.port || 8080}/ws`
 };

booklore-ui/src/app/core/service/app-settings.service.ts

@@ -2,12 +2,13 @@ import {Injectable} from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import {BehaviorSubject} from 'rxjs';
 import {AppSettings} from '../model/app-settings.model';
+import {API_CONFIG} from '../../config/api-config';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppSettingsService {
-  private apiUrl = 'http://localhost:8080/api/settings';
+  private readonly apiUrl = `${API_CONFIG.BASE_URL}/api/settings`;
 
   private appSettingsSubject = new BehaviorSubject<AppSettings | null>(null);
   appSettings$ = this.appSettingsSubject.asObservable();

booklore-ui/src/app/epub-viewer/service/epub.service.ts

@@ -1,12 +1,13 @@
 import {inject, Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {Observable} from 'rxjs';
+import {API_CONFIG} from '../../config/api-config';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EpubService {
-  private baseUrl = 'http://localhost:8080/api/epub';
+  private baseUrl = `${API_CONFIG.BASE_URL}/api/epub`;
 
   private http = inject(HttpClient);
 

booklore-ui/src/app/shared/websocket/rx-stomp.config.ts

@@ -1,8 +1,9 @@
-import { RxStompConfig } from '@stomp/rx-stomp';
+import {RxStompConfig} from '@stomp/rx-stomp';
+import {API_CONFIG} from '../../config/api-config';
 
 export const rxStompConfig: RxStompConfig = {
   // Which server?
-  brokerURL: 'ws://localhost:8080/ws',
+  brokerURL: API_CONFIG.BROKER_URL,
 
   // Headers
   // Typical keys: login, passcode, host

booklore-ui/src/app/utilities/component/book-uploader/book-uploader.component.ts

@@ -10,6 +10,7 @@ import {Library, LibraryPath} from '../../../book/model/library.model';
 import {MessageService} from 'primeng/api';
 import {DynamicDialogRef} from 'primeng/dynamicdialog';
 import {Select} from 'primeng/select';
+import {API_CONFIG} from '../../../config/api-config';
 
 @Component({
   selector: 'app-book-uploader',
@@ -26,7 +27,7 @@ import {Select} from 'primeng/select';
 })
 export class BookUploaderComponent {
 
-  private uploadUrl = 'http://localhost:8080/api/v1/files/upload';
+  private uploadUrl = `${API_CONFIG.BASE_URL}/api/v1/files/upload`;
 
   private libraryService = inject(LibraryService);
   private messageService = inject(MessageService);

booklore-ui/src/app/utilities/component/directory-picker/utility.service.ts

@@ -1,13 +1,14 @@
 import {inject, Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {HttpClient, HttpParams} from '@angular/common/http';
+import {API_CONFIG} from '../../../config/api-config';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UtilityService {
 
-  private pathUrl = 'http://localhost:8080/v1/path';
+  private pathUrl = `${API_CONFIG.BASE_URL}/v1/path`;
 
   private http = inject(HttpClient);
 

docker-compose.yml

@@ -2,10 +2,9 @@ version: '3.8'
 services:
   booklore-app:
     container_name: booklore
-    image: localhost:5000/booklore-app:v12
+    image: localhost:5000/booklore-app:v22
     ports:
-      - "8081:8080"
-      - "4201:80"
+      - "5050:6060"
     volumes:
       - /Users/aditya.chandel/my-library-temp/config:/app/config
       - /Users/aditya.chandel/my-library-temp/books:/app/books

nginx.conf

@@ -1,27 +1,43 @@
 # the events block is required
-events{}
+events {}
 
 http {
     # include the default mime.types to map file extensions to MIME types
     include /etc/nginx/mime.types;
 
     server {
-        # set the root directory for the server (we need to copy our
-        # application files here)
+        listen 6060;  # Listen on port 6060 for both API and UI
+
+        # Set the root directory for the server (Angular app)
         root /usr/share/nginx/html;
 
-        # set the default index file for the server (Angular generates the
-        # index.html file for us and it will be in the above directory)
+        # Set the default index file for the server
         index index.html;
 
-        # specify the configuration for the '/' location
+        # Serve Angular UI
         location / {
-            # try to serve the requested URI. if that fails then try to
-            # serve the URI with a trailing slash. if that fails, then
-            # serve the index.html file; this is needed in order to serve
-            # Angular routes--e.g.,'localhost:8080/customer' will serve
-            # the index.html file
-            try_files $uri $uri/ /index.html;
+            try_files $uri $uri/ /index.html;  # Fallback to index.html for Angular routing
+        }
+
+        # Proxy API requests that start with /v1/ to the backend
+        location /v1/ {
+            proxy_pass http://localhost:8080;  # Backend API running on port 8080
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        # Proxy WebSocket requests (ws://) to the backend
+        location /ws {
+            proxy_pass http://localhost:8080/ws;  # Backend WebSocket endpoint
+            proxy_http_version 1.1;  # Ensure HTTP 1.1 is used for WebSocket connection
+            proxy_set_header Upgrade $http_upgrade;  # Pass the upgrade header
+            proxy_set_header Connection 'upgrade';  # Pass the connection header
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
         }
     }
-}
+}