Merge pull request #1485 from ksylvan/0523-generalize-web-ui-connect-to-fabric-api

Web UI: Centralize Environment Configuration and Make Fabric Base URL Configurable

web/src/lib/config/environment.ts

@@ -0,0 +1,62 @@
+/**
+ * Environment configuration for the Fabric web app
+ * Centralizes all environment variable handling
+ */
+
+// Default values
+const DEFAULT_FABRIC_BASE_URL = 'http://localhost:8080';
+
+/**
+ * Get the Fabric base URL from environment variable or default
+ * This function works in both server and client contexts
+ */
+export function getFabricBaseUrl(): string {
+  // In server context (Node.js), use process.env
+  if (typeof process !== 'undefined' && process.env) {
+    return process.env.FABRIC_BASE_URL || DEFAULT_FABRIC_BASE_URL;
+  }
+
+  // In client context, check if the environment was injected via Vite
+  if (typeof window !== 'undefined' && (window as any).__FABRIC_CONFIG__) {
+    return (window as any).__FABRIC_CONFIG__.FABRIC_BASE_URL || DEFAULT_FABRIC_BASE_URL;
+  }
+
+  // Fallback to default
+  return DEFAULT_FABRIC_BASE_URL;
+}
+
+/**
+ * Get the Fabric API base URL (adds /api if not present)
+ */
+export function getFabricApiUrl(): string {
+  const baseUrl = getFabricBaseUrl();
+
+  // Remove trailing slash if present
+  const cleanBaseUrl = baseUrl.replace(/\/$/, '');
+
+  // Check if it already ends with /api
+  if (cleanBaseUrl.endsWith('/api')) {
+    return cleanBaseUrl;
+  }
+
+  return `${cleanBaseUrl}/api`;
+}
+
+/**
+ * Configuration object for easy access to all environment settings
+ */
+export const config = {
+  fabricBaseUrl: getFabricBaseUrl(),
+  fabricApiUrl: getFabricApiUrl(),
+} as const;
+
+// Type definitions
+export interface FabricConfig {
+  FABRIC_BASE_URL: string;
+}
+
+declare global {
+  interface Window {
+    __FABRIC_CONFIG__?: FabricConfig;
+  }
+}

web/src/routes/chat/+server.ts

@@ -15,11 +15,11 @@ export const POST: RequestHandler = async ({ request }) => {
         language: body.language,
         hasLanguageParam: true
       });
-      
+
       // Extract video ID
       const match = body.url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
       const videoId = match ? match[1] : null;
-      
+
       if (!videoId) {
         return json({ error: 'Invalid YouTube URL' }, { status: 400 });
       }

web/vite.config.ts

@@ -2,6 +2,9 @@ import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
+// Get the Fabric base URL from environment variable with fallback
+const FABRIC_BASE_URL = process.env.FABRIC_BASE_URL || 'http://localhost:8080';
+
 export default defineConfig({
   plugins: [sveltekit(), purgeCss()],
   build: {
@@ -18,6 +21,10 @@ export default defineConfig({
     'process.browser': true,
     'process': {
       cwd: () => ('/')
+    },
+    // Inject Fabric configuration for client-side access
+    '__FABRIC_CONFIG__': {
+      FABRIC_BASE_URL: JSON.stringify(FABRIC_BASE_URL)
     }
   },
   resolve: {
@@ -31,11 +38,11 @@ export default defineConfig({
     },
     proxy: {
       '/api': {
-        target: 'http://localhost:8080',
+        target: FABRIC_BASE_URL,
         changeOrigin: true,
         timeout: 30000,
         rewrite: (path) => path.replace(/^\/api/, ''),
-        configure: (proxy, options) => {
+        configure: (proxy, _options) => {
           proxy.on('error', (err, req, res) => {
             console.log('proxy error', err);
             res.writeHead(500, {
@@ -46,10 +53,10 @@ export default defineConfig({
         }
       },
       '^/(patterns|models|sessions)/names': {
-        target: 'http://localhost:8080',
+        target: FABRIC_BASE_URL,
         changeOrigin: true,
         timeout: 30000,
-        configure: (proxy, options) => {
+        configure: (proxy, _options) => {
           proxy.on('error', (err, req, res) => {
             console.log('proxy error', err);
             res.writeHead(500, {