Merge pull request #1853 from dashitongzhi/feature/subdirectory-support

feat(frontend): add PUBLIC_URL support for subdirectory deployment

Author: derneuere

apps/frontend/src/api_client/api.ts

@@ -3,7 +3,8 @@ import { jwtDecode } from "jwt-decode";
 import { Cookies } from "react-cookie";
 import { notification } from "../service/notifications";
 
-const API_BASE_URL = "/api";
+const PUBLIC_URL = import.meta.env.VITE_PUBLIC_URL || import.meta.env.PUBLIC_URL || "";
+const API_BASE_URL = PUBLIC_URL + "/api";
 
 // Custom fetch client with auth and refresh token functionality
 class FetchClient {
@@ -95,7 +96,7 @@ class FetchClient {
           cookies.remove("access");
           cookies.remove("refresh");
           cookies.remove("jwt");
-          window.location.href = "/login";
+          window.location.href = PUBLIC_URL + "/login";
         }
 
         // Always show notifications for login attempts (wrong credentials),

apps/frontend/src/api_client/apiClient.js

@@ -1,3 +1,3 @@
-export const serverAddress = "";
-// // This is a dirty hack. Grabs current host for when sharing. URL handling needs cleaned up. DW 12-13-20
-export const shareAddress = window.location.host;
+export const serverAddress = import.meta.env.VITE_PUBLIC_URL || import.meta.env.PUBLIC_URL || "";
+// This is used for sharing. URL handling needs to account for subdirectory.
+export const shareAddress = window.location.host + (import.meta.env.VITE_PUBLIC_URL || import.meta.env.PUBLIC_URL || "");

apps/frontend/vite.config.ts

@@ -1,25 +1,34 @@
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vitest/config";
+import { defineConfig, loadEnv } from "vitest/config";
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
-export default defineConfig({
-  base: "/",
-  plugins: [tanstackRouter({target: "react", autoCodeSplitting: true}), react()],
-  appType: 'spa',
-  server: {
-    host: "0.0.0.0",
-    port: 3000,
-  },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "./src/setupTests.ts",
-    css: true,
-    reporters: ["verbose"],
-    coverage: {
-      reporter: ["text", "json", "html"],
-      include: ["src/**/*"],
-      exclude: [],
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const publicUrl = env.PUBLIC_URL || env.VITE_PUBLIC_URL || '/';
+  
+  return {
+    base: publicUrl,
+    plugins: [tanstackRouter({target: "react", autoCodeSplitting: true}), react()],
+    appType: 'spa',
+    server: {
+      host: "0.0.0.0",
+      port: 3000,
     },
-  },
+    build: {
+      assetsDir: 'assets',
+      emptyOutDir: true,
+    },
+    test: {
+      globals: true,
+      environment: "jsdom",
+      setupFiles: "./src/setupTests.ts",
+      css: true,
+      reporters: ["verbose"],
+      coverage: {
+        reporter: ["text", "json", "html"],
+        include: ["src/**/*"],
+        exclude: [],
+      },
+    },
+  }
 });