feat: add base path configuration

src/app/router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { lazy, Suspense } from "react";
 import AuthLayout from "@/components/layouts/auth-layout";
 import MainLayout from "@/components/layouts/main-layout";
+import { BASE_PATH } from "@/lib/consts";
 
 const LoginPage = lazy(() => import("@/pages/auth/login"));
 const ClusterPage = lazy(() => import("@/pages/cluster/page"));
@@ -10,43 +11,48 @@ const BucketsPage = lazy(() => import("@/pages/buckets/page"));
 const ManageBucketPage = lazy(() => import("@/pages/buckets/manage/page"));
 const KeysPage = lazy(() => import("@/pages/keys/page"));
 
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+  [
+    {
+      path: "/auth",
+      Component: AuthLayout,
+      children: [
+        {
+          path: "login",
+          Component: LoginPage,
+        },
+      ],
+    },
+    {
+      path: "/",
+      Component: MainLayout,
+      children: [
+        {
+          index: true,
+          Component: HomePage,
+        },
+        {
+          path: "cluster",
+          Component: ClusterPage,
+        },
+        {
+          path: "buckets",
+          children: [
+            { index: true, Component: BucketsPage },
+            { path: ":id", Component: ManageBucketPage },
+          ],
+        },
+        {
+          path: "keys",
+          Component: KeysPage,
+        },
+      ],
+    },
+  ],
   {
-    path: "/auth",
-    Component: AuthLayout,
-    children: [
-      {
-        path: "login",
-        Component: LoginPage,
-      },
-    ],
-  },
-  {
-    path: "/",
-    Component: MainLayout,
-    children: [
-      {
-        index: true,
-        Component: HomePage,
-      },
-      {
-        path: "cluster",
-        Component: ClusterPage,
-      },
-      {
-        path: "buckets",
-        children: [
-          { index: true, Component: BucketsPage },
-          { path: ":id", Component: ManageBucketPage },
-        ],
-      },
-      {
-        path: "keys",
-        Component: KeysPage,
-      },
-    ],
-  },
-]);
+    basename: BASE_PATH,
+  }
+);
 
 const Router = () => {
   return (

src/components/containers/sidebar.tsx

@@ -15,6 +15,7 @@ import appStore from "@/stores/app-store";
 import garageLogo from "@/assets/garage-logo.svg";
 import { useMutation } from "@tanstack/react-query";
 import api from "@/lib/api";
+import * as utils from "@/lib/utils";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/useAuth";
 
@@ -93,7 +94,7 @@ const LogoutButton = () => {
   const logout = useMutation({
     mutationFn: () => api.post("/auth/logout"),
     onSuccess: () => {
-      window.location.href = "/auth/login";
+      window.location.href = utils.url("/auth/login");
     },
     onError: (err) => {
       toast.error(err?.message || "Unknown error");

src/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    __BASE_PATH?: string;
+  }
+}

src/lib/api.ts

@@ -1,10 +1,13 @@
+import * as utils from "@/lib/utils";
+import { BASE_PATH } from "./consts";
+
 type FetchOptions = Omit<RequestInit, "headers" | "body"> & {
   params?: Record<string, any>;
   headers?: Record<string, string>;
   body?: any;
 };
 
-export const API_URL = "/api";
+export const API_URL = BASE_PATH + "/api";
 
 export class APIError extends Error {
   status!: number;
@@ -47,7 +50,7 @@ const api = {
     const data = isJson ? await res.json() : await res.text();
 
     if (res.status === 401 && !url.startsWith("/auth")) {
-      window.location.href = "/auth/login";
+      window.location.href = utils.url("/auth/login");
       throw new APIError("unauthorized", res.status);
     }
 

src/lib/consts.ts

@@ -0,0 +1,6 @@
+// consts.ts
+
+export const BASE_PATH =
+  (import.meta.env.PROD ? window.__BASE_PATH : null) ||
+  import.meta.env.VITE_BASE_PATH ||
+  "";

src/lib/utils.ts

@@ -3,6 +3,7 @@ import { toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 import dayjsRelativeTime from "dayjs/plugin/relativeTime";
 import dayjs from "dayjs";
+import { BASE_PATH } from "./consts";
 
 dayjs.extend(dayjsRelativeTime);
 export { dayjs };
@@ -53,3 +54,7 @@ export const copyToClipboard = async (text: string) => {
     textArea?.remove();
   }
 };
+
+export const url = (...paths: unknown[]) => {
+  return BASE_PATH + paths.join("/");
+};