⚡ enhance frontend vars handling

Author: zcubbs

web/start/.env.development

@@ -0,0 +1,3 @@
+VITE_APP_LOGO_URL=""
+VITE_API_URL=""
+VITE_APP_TITLE=""

web/start/src/App.tsx

@@ -7,11 +7,12 @@ import {ToastProvider} from "@/components/ui/toast.tsx";
 import {Toaster} from "@/components/ui/toaster.tsx";
 import Logo from './assets/logo.png';
 import {Separator} from "@/components/ui/separator.tsx";
+import getConfig from "@/config.ts";
 
 const App: React.FC = () => {
   const [blueprints, setBlueprints] = useState<Blueprint[]>([]);
   useEffect(() => {
-    document.title = window.VITE_APP_TITLE || 'Power - Starters';
+    document.title = getConfig('VITE_APP_TITLE') || 'Power - Starters';
     fetchBlueprints().then(setBlueprints);
   }, []);
 
@@ -35,7 +36,7 @@ const App: React.FC = () => {
   }
 
   const getLogo = () => {
-    const logoUrl = window.VITE_APP_LOGO_URL;
+    const logoUrl = getConfig('VITE_APP_LOGO_URL')
     return (
       <img src={logoUrl || Logo} alt="logo" className="h-12" />
     );

web/start/src/api.ts

@@ -1,7 +1,8 @@
 import axios, {AxiosError, AxiosResponse} from 'axios';
+import getConfig from "@/config.ts";
 
 export const API_BASE_URL =
-  window.VITE_API_URL || 'http://localhost:3000';
+  getConfig('window.VITE_API_URL') || 'http://localhost:8000';
 
 interface Blueprint {
   type: string;

web/start/src/config.ts

@@ -0,0 +1,13 @@
+// src/utils/config.js
+function getConfig(key: string) {
+  // Check if the app is running in production
+  if (import.meta.env.PROD) {
+    // Production environment: Read from global window object
+    return window[key];
+  } else {
+    // Development environment: Use Vite's import.meta.env
+    return import.meta.env[key];
+  }
+}
+
+export default getConfig;

web/start/src/globals.d.ts

@@ -4,6 +4,7 @@ declare global {
     VITE_APP_LOGO_URL?: string;
     VITE_API_URL?: string;
     VITE_APP_TITLE?: string;
+    [key: string]: any;
   }
 }