Use baseUri for requests instead of hard-coded paths (#15)

Author: Tristan-WorkGH

src/components/App/app-wrapper.tsx

@@ -115,7 +115,7 @@ const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
     },
 };
 
-const basename = new URL(document.querySelector('base')?.href ?? '').pathname;
+const basename = new URL(document.baseURI ?? '').pathname;
 
 /**
  * Layer injecting Theme, Internationalization (i18n) and other tools (snackbar, error boundary, ...)

src/services/config-notification.ts

@@ -9,10 +9,10 @@ import ReconnectingWebSocket, { Event } from 'reconnecting-websocket';
 import { APP_NAME } from '../utils/config-params';
 import { getUrlWithToken, getWsBase } from '../utils/api-ws';
 
-const PREFIX_CONFIG_NOTIFICATION_WS = `${process.env.REACT_APP_WS_GATEWAY}/config-notification`;
+const PREFIX_CONFIG_NOTIFICATION_WS = `${getWsBase()}/config-notification`;
 
 export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket {
-    const webSocketUrl = `${getWsBase()}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?appName=${APP_NAME}`;
+    const webSocketUrl = `${PREFIX_CONFIG_NOTIFICATION_WS}/notify?appName=${APP_NAME}`;
     const reconnectingWebSocket = new ReconnectingWebSocket(
         () => getUrlWithToken(webSocketUrl),
         undefined,

src/services/config.ts

@@ -11,10 +11,10 @@ import {
     PARAM_LANGUAGE,
     PARAM_THEME,
 } from '../utils/config-params';
-import { backendFetch, backendFetchJson } from '../utils/api-rest';
+import { backendFetch, backendFetchJson, getRestBase } from '../utils/api-rest';
 import { LanguageParameters } from '../utils/language';
 
-const PREFIX_CONFIG_QUERIES = `${process.env.REACT_APP_API_GATEWAY}/config`;
+const PREFIX_CONFIG_QUERIES = `${getRestBase()}/config`;
 
 // https://github.com/gridsuite/config-server/blob/main/src/main/java/org/gridsuite/config/server/dto/ParameterInfos.java
 export type ConfigParameter =

src/services/study.ts

@@ -5,11 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { backendFetchJson, Token } from '../utils/api-rest';
+import { backendFetchJson, getRestBase, Token } from '../utils/api-rest';
 import { getErrorMessage } from '../utils/error';
 import { APP_NAME } from '../utils/config-params';
 
-const STUDY_URL = `${process.env.REACT_APP_API_GATEWAY}/study/v1`;
+const STUDY_URL = `${getRestBase()}/study/v1`;
 
 //TODO delete when commons-ui will be in typescript
 export type ServerAbout = {

src/services/user-admin.ts

@@ -5,11 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { backendFetch, backendFetchJson } from '../utils/api-rest';
+import { backendFetch, backendFetchJson, getRestBase } from '../utils/api-rest';
 import { extractUserSub, getToken, getUser } from '../utils/api';
 import { User } from '../utils/auth';
 
-const USER_ADMIN_URL = `${process.env.REACT_APP_API_GATEWAY}/user-admin/v1`;
+const USER_ADMIN_URL = `${getRestBase()}/user-admin/v1`;
 
 export function getUserSub(): Promise<unknown> {
     return extractUserSub(getUser());

src/utils/api-rest.ts

@@ -16,6 +16,13 @@ export interface ErrorWithStatus extends Error {
 export type Url = string | URL;
 export type InitRequest = Partial<RequestInit>;
 
+export function getRestBase(): string {
+    // We use the `baseURI` (from `<base/>` in index.html) to build the URL, which is corrected by httpd/nginx
+    return (
+        document.baseURI.replace(/\/+$/, '') + process.env.REACT_APP_API_GATEWAY
+    );
+}
+
 function handleError(response: Response): Promise<never> {
     return response.text().then((text: string) => {
         const errorName = 'HttpResponseError : ';

src/utils/api-ws.ts

@@ -10,9 +10,12 @@ import { getToken } from './api';
 export type * from './api';
 
 export function getWsBase(): string {
-    return document.baseURI
-        .replace(/^http(s?):\/\//, 'ws$1://')
-        .replace(/\/$/, '');
+    // We use the `baseURI` (from `<base/>` in index.html) to build the URL, which is corrected by httpd/nginx
+    return (
+        document.baseURI
+            .replace(/^http(s?):\/\//, 'ws$1://')
+            .replace(/\/+$/, '') + process.env.REACT_APP_WS_GATEWAY
+    );
 }
 
 export function getUrlWithToken(baseUrl: string): string {