Prepare for reverse proxy usage #125

Not working correctly yet but no BC for regular, non suburl, usage

Author: FoxxMD

src/backend/ioc.ts

@@ -75,7 +75,8 @@ const createRoot = (options?: RootOptions) => {
             sources: () => new ScrobbleSources(items.sourceEmitter, localUrl, items.configDir),
             notifiers: () => new Notifiers(items.notifierEmitter, items.clientEmitter, items.sourceEmitter),
             localUrl,
-            hasDefinedBaseUrl: baseUrl !== undefined
+            hasDefinedBaseUrl: baseUrl !== undefined,
+            isSubPath: u.pathname !== '/' && u.pathname.length > 0
         }
     });
 }

src/backend/server/index.ts

@@ -71,6 +71,9 @@ export const initServer = async (parentLogger: Logger, initialOutput: LogInfo[]
             }
         }
 
+        if(process.env.USE_HASH_ROUTER === undefined) {
+            process.env.USE_HASH_ROUTER = root.get('isSubPath');
+        }
         ViteExpress.config({mode: isProd ? 'production' : 'development'});
         try {
             ViteExpress.listen(app, port, () => {

src/client/App.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import logo from './logo.svg';
-import * as ReactDOM from "react-dom/client";
 import {
     createBrowserRouter,
+    createHashRouter, RouteObject,
     RouterProvider, useLocation,
 } from "react-router-dom";
 import {connect, ConnectedProps, Provider} from 'react-redux'
@@ -25,7 +24,7 @@ function NoMatch() {
     );
 }
 
-const router = createBrowserRouter([
+const routes: RouteObject[] = [
     {
         path: "/",
         element: <Dashboard />,
@@ -46,7 +45,14 @@ const router = createBrowserRouter([
         path: "*",
         element: <NoMatch/>
     }
-]);
+];
+
+const genRouter = () => {
+    const useHashRouter = __USE_HASH_ROUTER__ === 'true';
+    return useHashRouter ? createHashRouter(routes) : createBrowserRouter(routes);
+}
+
+const router = genRouter();
 
 const mapDispatchToProps = (dispatch) => {
     return {

src/client/deadLetter/deadLetterDucks.ts

@@ -6,7 +6,7 @@ import {ApiEventPayload, clientUpdate} from "../status/ducks";
 type DeadResponse = DeadLetterScrobble<JsonPlayObject, string>[];
 export const deadApi = createApi({
     reducerPath: 'deadApi',
-    baseQuery: fetchBaseQuery({baseUrl: '/api/'}),
+    baseQuery: fetchBaseQuery({baseUrl: './api/'}),
     tagTypes: ['DeadLetters'],
     endpoints: (builder) => ({
         getDead: builder.query<DeadResponse, { name: string, type: string }>({

src/client/logs/logsApi.ts

@@ -3,7 +3,7 @@ import {LogInfoJson, LogOutputConfig} from "../../core/Atomic";
 
 export const logsApi = createApi({
     reducerPath: 'logsApi',
-    baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
+    baseQuery: fetchBaseQuery({ baseUrl: './api/' }),
     endpoints: (builder) => ({
         getLogs: builder.query<{ data: LogInfoJson[], settings: LogOutputConfig }, undefined>({
             query: () => `logs`,

src/client/recent/recentDucks.ts

@@ -4,7 +4,7 @@ import {JsonPlayObject} from "../../core/Atomic";
 type RecentResponse = (JsonPlayObject & { index: number })[];
 export const recentApi = createApi({
     reducerPath: 'recentApi',
-    baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
+    baseQuery: fetchBaseQuery({ baseUrl: './api/' }),
     endpoints: (builder) => ({
         getRecent: builder.query<RecentResponse, {name: string, type: string}>({
             query: (params) => `recent?name=${params.name}&type=${params.type}`,

src/client/scrobbled/scrobbledDucks.ts

@@ -4,7 +4,7 @@ import {JsonPlayObject} from "../../core/Atomic";
 type ScrobbledResponse = (JsonPlayObject & { index: number })[];
 export const scrobbledApi = createApi({
     reducerPath: 'scrobbledApi',
-    baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
+    baseQuery: fetchBaseQuery({ baseUrl: './api/' }),
     endpoints: (builder) => ({
         getRecent: builder.query<ScrobbledResponse, {name: string, type: string}>({
             query: (params) => `scrobbled?name=${params.name}&type=${params.type}`,

src/client/status/statusApi.ts

@@ -3,7 +3,7 @@ import {ClientStatusData, SourceStatusData} from "../../core/Atomic";
 
 export const statusApi = createApi({
     reducerPath: 'statusApi',
-    baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
+    baseQuery: fetchBaseQuery({ baseUrl: './api/' }),
     endpoints: (builder) => ({
         getStatus: builder.query<{ sources: SourceStatusData[], clients: ClientStatusData[] }, undefined>({
             query: () => `status`,

src/client/vite-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="vite/client" />
 declare const __APP_VERSION__: string
+declare const __USE_HASH_ROUTER__: bool

vite.config.ts

@@ -3,12 +3,14 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig(() => {
     return {
+        base: (process.env.BASE_URL ?? '/'),
         plugins: [react()],
         build: {
             sourcemap: true
         },
         define: {
-            "__APP_VERSION__": JSON.stringify((process.env.APP_VERSION ?? 'Unknown').toString())
+            "__APP_VERSION__": JSON.stringify((process.env.APP_VERSION ?? 'Unknown').toString()),
+            "__USE_HASH_ROUTER__": JSON.stringify((process.env.USE_HASH_ROUTER ?? false))
         }
     };
 });