#22 Adapted frontend to be wrapped into a webjar

quartz-manager-frontend/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
-    "build": "ng build",
+    "build": "ng build --prod",
     "test": "jest",
     "lint": "ng lint",
     "e2e": "ng e2e"

quartz-manager-frontend/src/app/app.module.ts

@@ -45,15 +45,19 @@ import {
   SchedulerService,
   ConfigService,
   ProgressWebsocketService,
-  LogsWebsocketService
+  LogsWebsocketService,
+  getHtmlBaseUrl
 } from './services';
 import { ChangePasswordComponent } from './views/change-password/change-password.component';
 import { ForbiddenComponent } from './views/forbidden/forbidden.component';
+import { APP_BASE_HREF } from '@angular/common';
+import { environment } from '../environments/environment';
 
 export function initUserFactory(userService: UserService) {
     return () => userService.jsessionInitUser();
 }
 
+
 // const stompConfig: StompConfig = {
 //   // Which server?
 //   url: 'ws://localhost:8080/quartz-manager/progress',
@@ -131,6 +135,16 @@ export function jwtOptionsFactory(apiService: ApiService) {
     FlexLayoutModule
   ],
   providers: [
+    {
+      provide: APP_BASE_HREF,
+      useValue: getHtmlBaseUrl()
+    },
+    {
+      'provide': APP_INITIALIZER,
+      'useFactory': initUserFactory,
+      'deps': [UserService],
+      'multi': true
+    },
     LoginGuard,
     GuestGuard,
     AdminGuard,
@@ -141,13 +155,7 @@ export function jwtOptionsFactory(apiService: ApiService) {
     ApiService,
     UserService,
     ConfigService,
-    MatIconRegistry,
-    {
-      'provide': APP_INITIALIZER,
-      'useFactory': initUserFactory,
-      'deps': [UserService],
-      'multi': true
-    }
+    MatIconRegistry
     // StompService,
     // ServerSocket
     // {

quartz-manager-frontend/src/app/services/config.service.ts

@@ -1,9 +1,30 @@
 import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+
+const WEBJAR_PATH = '/quartz-manager-ui/';
+
+export function getHtmlBaseUrl(){
+    const baseUrl = getBaseUrl() || '/';
+    return environment.production ? getBaseUrl() + WEBJAR_PATH: '/';
+  }
+
+export function getBaseUrl(){
+    if(environment.production){
+        let contextPath: string = window.location.pathname.split('/')[1] || '';
+        if(contextPath && ('/' + contextPath + '/') === WEBJAR_PATH)
+            return '';
+        if(contextPath)
+          contextPath = '/' + contextPath;
+       return contextPath;
+     }
+     return '';
+}
 
 @Injectable()
 export class ConfigService {
 
-  private _api_url = '/quartz-manager/api'
+  private _api_url = getBaseUrl() + '/quartz-manager/api'
 
   private _refresh_token_url = this._api_url + '/refresh';
 

quartz-manager-frontend/src/app/services/logs.websocket.service.ts

@@ -1,12 +1,12 @@
-import { Injectable, OnInit } from '@angular/core';
-import { WebsocketService, ApiService } from '.';
+import { Injectable } from '@angular/core';
+import { WebsocketService, ApiService, getBaseUrl } from '.';
 import { SocketOption } from '../model/SocketOption.model';
 
 @Injectable()
 export class LogsWebsocketService extends WebsocketService {
 
     constructor(private apiService: ApiService){
-        super(new SocketOption('/quartz-manager/logs', '/topic/logs', apiService.getToken))
+        super(new SocketOption( getBaseUrl() +'/quartz-manager/logs', '/topic/logs', apiService.getToken))
     }
 
 }

quartz-manager-frontend/src/app/services/progress.websocket.service.ts

@@ -1,12 +1,12 @@
-import { Injectable, OnInit } from '@angular/core';
-import { WebsocketService, ApiService } from '.';
+import { Injectable } from '@angular/core';
+import { WebsocketService, ApiService, getBaseUrl } from '.';
 import { SocketOption } from '../model/SocketOption.model';
 
 @Injectable()
 export class ProgressWebsocketService extends WebsocketService {
 
     constructor(private apiService: ApiService){
-        super(new SocketOption('/quartz-manager/progress', '/topic/progress', apiService.getToken))
+        super(new SocketOption(getBaseUrl() + '/quartz-manager/progress', '/topic/progress', apiService.getToken))
     }
 
 }

quartz-manager-frontend/src/app/services/scheduler.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { getBaseUrl } from '.';
 import { ApiService } from './api.service';
 
 @Injectable()
@@ -9,30 +10,30 @@ export class SchedulerService {
   ) { }
 
   startScheduler = () => {
-    return this.apiService.get('/quartz-manager/scheduler/run')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/run')
   }
   
   stopScheduler = () => {
-    return this.apiService.get('/quartz-manager/scheduler/stop')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/stop')
   }
   
   pauseScheduler = () => {
-    return this.apiService.get('/quartz-manager/scheduler/pause')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/pause')
   }
   
   resumeScheduler = () => {
-    return this.apiService.get('/quartz-manager/scheduler/resume')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/resume')
   }
 
   getStatus = () => {
-    return this.apiService.get('/quartz-manager/scheduler')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler')
   }
 
   getConfig = () => {
-    return this.apiService.get('/quartz-manager/scheduler/config')
+    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/config')
   }
 
   updateConfig = (config: Object) => {
-    return this.apiService.post('/quartz-manager/scheduler/config', config)
+    return this.apiService.post(getBaseUrl() + '/quartz-manager/scheduler/config', config)
   }
 }

quartz-manager-frontend/src/index.html

@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <title>Quartz Manager</title>
-  <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 

quartz-manager-parent/pom.xml

@@ -18,7 +18,7 @@
   <modules>
     <module>quartz-manager-api</module>
     <module>quartz-manager-web</module>
-    <module>quartz-manager-fe-builder</module>
+    <module>quartz-manager-ui-webjar</module>
   </modules>
 
   <dependencyManagement>

quartz-manager-parent/quartz-manager-ui-webjar/pom.xml

@@ -7,10 +7,10 @@
         <version>2.2.2-SNAPSHOT</version>
 	</parent>
   
-	<artifactId>quartz-manager-fe-builder</artifactId>
+	<artifactId>quartz-manager-ui-webjar</artifactId>
   
-	<name>Quartz Manager FE Builder</name>
-	<description>Builder for frontend</description>
+	<name>Quartz Manager UI webjar</name>
+	<description>webjar builder for quartz-manager frontend</description>
   
 	<url>https://github.com/fabioformosa/quartz-manager</url>
 	<properties>