feat: separate env dependent stuff

Author: frectonz

ui/src/api.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { createZodFetcher } from "zod-fetch";
 
-const BASE_URL = "http://localhost:3030/api";
+const BASE_URL = import.meta.env.PROD ? "/api" : "http://localhost:3030/api";
 
 const overview = z.object({
   file_name: z.string(),

ui/src/main.tsx

@@ -1,7 +1,8 @@
 import "./index.css";
+
+import React from "react";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
@@ -18,6 +19,14 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const ReactQueryDevtools = import.meta.env.PROD
+  ? () => null // Render nothing in production
+  : React.lazy(() =>
+      import("@tanstack/react-query-devtools").then((res) => ({
+        default: res.ReactQueryDevtools,
+      })),
+    );
+
 const queryClient = new QueryClient();
 
 // Render the app

ui/src/routes/__root.tsx

@@ -1,10 +1,18 @@
+import React from "react";
 import { Menu, Database } from "lucide-react";
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 
+const TanStackRouterDevtools = import.meta.env.PROD
+  ? () => null // Render nothing in production
+  : React.lazy(() =>
+      import("@tanstack/router-devtools").then((res) => ({
+        default: res.TanStackRouterDevtools,
+      })),
+    );
+
 export const Route = createRootRoute({
   component: Root,
 });