feat: use relative URLs for frontend API calls

frontend/jest.config.cjs

@@ -26,11 +26,7 @@ module.exports = {
               options: {
                 metaObjectReplacement: {
                   url: 'https://www.url.com',
-                  env: {
-                    VITE_BACKEND_URL: 'http://localhost:8000/',
-                    VITE_FRONTEND_URL: 'http://localhost:80',
-                    VITE_CONTAINER_ORIGIN: 'http://localhost:8080/',
-                  },
+                  env: {},
                 },
               },
             },

frontend/src/components/HomePage.tsx

@@ -5,7 +5,7 @@ import { Footer } from './HomeComponents/Footer/Footer';
 import { SetupGuide } from './HomeComponents/SetupGuide/SetupGuide';
 import { FAQ } from './HomeComponents/FAQ/FAQ';
 import { Tasks } from './HomeComponents/Tasks/Tasks';
-import { url } from '@/components/utils/URLs';
+import { url, getWebSocketURL } from '@/components/utils/URLs';
 import { useNavigate } from 'react-router';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
@@ -60,9 +60,7 @@ export const HomePage: React.FC = () => {
       getTasks(userInfo.email, userInfo.encryption_secret, userInfo.uuid);
     }
 
-    const socketURL = `${url.backendURL.replace(/^http/, 'ws')}ws?clientID=${
-      userInfo.uuid
-    }`;
+    const socketURL = getWebSocketURL(`ws?clientID=${userInfo.uuid}`);
     const socket = new WebSocket(socketURL);
 
     // socket.onopen = () => console.log('WebSocket connected!');

frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap

@@ -42,7 +42,7 @@ exports[`Hero component using snapshot renders correctly 1`] = `
         class="space-y-4 md:space-y-0 md:space-x-4"
       >
         <a
-          href="http://localhost:8000/auth/oauth"
+          href="/auth/oauth"
         >
           <button
             class="w-full md:w-1/3 bg-blue-400 hover:bg-blue-500"

frontend/src/components/__tests__/HomePage.test.tsx

@@ -88,6 +88,7 @@ jest.mock('@/components/utils/URLs', () => ({
     containerOrigin: 'http://mocked-origin/',
     frontendURL: 'http://mocked-frontend-url/',
   },
+  getWebSocketURL: (path: string) => `ws://mocked-backend-url/${path}`,
 }));
 
 // Mock fetch

frontend/src/components/utils/URLs.ts

@@ -1,25 +1,39 @@
-const isTesting = false;
+// Check if we're in a browser environment
+const isBrowser = typeof window !== 'undefined';
 
-export const url = isTesting
-  ? {
-      backendURL: '',
-      frontendURL: '',
-      containerOrigin: '',
-      githubRepoURL: '',
-      githubDocsURL: '',
-      zulipURL: '',
-      taskwarriorURL: '',
-      taskchampionSyncServerURL: '',
-    }
-  : {
-      backendURL: import.meta.env.VITE_BACKEND_URL || 'http://localhost:8000/',
-      frontendURL: import.meta.env.VITE_FRONTEND_URL || 'http://localhost:80',
-      containerOrigin:
-        import.meta.env.VITE_CONTAINER_ORIGIN || 'http://localhost:8080/',
-      githubRepoURL: 'https://github.com/CCExtractor/ccsync',
-      githubDocsURL: 'https://its-me-abhishek.github.io/ccsync-docs/',
-      zulipURL: 'https://ccextractor.org/public/general/support/',
-      taskwarriorURL: 'https://taskwarrior.org/docs/',
-      taskchampionSyncServerURL:
-        'https://github.com/GothenburgBitFactory/taskchampion-sync-server/tree/main',
-    };
+// Helper to get the WebSocket URL for the current host
+export const getWebSocketURL = (path: string): string => {
+  if (!isBrowser) {
+    return `ws://localhost:8000/${path}`;
+  }
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${protocol}//${window.location.host}/${path}`;
+};
+
+// Helper to get the sync server URL (shown to users in SetupGuide)
+const getSyncServerURL = (): string => {
+  if (!isBrowser) {
+    return 'http://localhost:8080/';
+  }
+  return `${window.location.origin}/taskchampion/`;
+};
+
+export const url = {
+  // Backend API calls use relative URLs - nginx routes to backend
+  backendURL: '/',
+
+  // Frontend URL for redirects - just use root
+  frontendURL: '/',
+
+  // Sync server URL - derived from current origin
+  // This is shown to users in SetupGuide for their taskwarrior config
+  containerOrigin: getSyncServerURL(),
+
+  // External URLs (unchanged)
+  githubRepoURL: 'https://github.com/CCExtractor/ccsync',
+  githubDocsURL: 'https://its-me-abhishek.github.io/ccsync-docs/',
+  zulipURL: 'https://ccextractor.org/public/general/support/',
+  taskwarriorURL: 'https://taskwarrior.org/docs/',
+  taskchampionSyncServerURL:
+    'https://github.com/GothenburgBitFactory/taskchampion-sync-server/tree/main',
+};

frontend/vite.config.ts

@@ -9,4 +9,73 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    proxy: {
+      // Proxy backend routes during development
+      // This mimics nginx's routing behavior in production
+      '/auth': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/tasks': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/health': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/sync': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/ws': {
+        target: 'ws://localhost:8000',
+        ws: true,
+      },
+      // Task mutation endpoints
+      '/add-task': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/edit-task': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/delete-task': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/complete-task': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/modify-task': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/add-tasks': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/complete-tasks': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      '/delete-tasks': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+      // Taskchampion sync server
+      '/taskchampion': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/taskchampion/, ''),
+      },
+    },
+  },
 });