From 5cfe23610e7ed281c35010c2702073a531a1339d Mon Sep 17 00:00:00 2001
From: Carlos <carlos@sanz.dev>
Date: Mon, 26 Jan 2026 22:35:52 -0800
Subject: [PATCH 1/2] feat: use relative URLs for frontend API calls

Change frontend to use relative URLs instead of hardcoded localhost
values. This enables the same Docker image to work in any environment
since nginx handles routing to the backend.

Changes:
- backendURL now uses '/' (relative path)
- containerOrigin derived from window.location.origin
- Add getWebSocketURL() helper for WebSocket connections
- Remove VITE_* env vars from jest config (no longer needed)
- Update tests and snapshots

This is a prerequisite for automated deployment where images should
be environment-agnostic.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/jest.config.cjs                      |  6 +-
 frontend/src/components/HomePage.tsx          |  6 +-
 .../__snapshots__/Hero.test.tsx.snap          |  2 +-
 .../components/__tests__/HomePage.test.tsx    |  1 +
 frontend/src/components/utils/URLs.ts         | 62 ++++++++++++-------
 5 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/frontend/jest.config.cjs b/frontend/jest.config.cjs
index 94f9284c..a018c6e0 100644
--- a/frontend/jest.config.cjs
+++ b/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: {},
                 },
               },
             },
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 01fd0fe7..24eeb8a2 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/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!');
diff --git a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap b/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
index 6d325033..3c459e6d 100644
--- a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
+++ b/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"
diff --git a/frontend/src/components/__tests__/HomePage.test.tsx b/frontend/src/components/__tests__/HomePage.test.tsx
index 0f8e5f3b..af6e8abd 100644
--- a/frontend/src/components/__tests__/HomePage.test.tsx
+++ b/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
diff --git a/frontend/src/components/utils/URLs.ts b/frontend/src/components/utils/URLs.ts
index 944254bc..ff54ac1c 100644
--- a/frontend/src/components/utils/URLs.ts
+++ b/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',
+};

From 44dafd2dd460973e55214e1d1d1391f3d04a2e7b Mon Sep 17 00:00:00 2001
From: Carlos <carlos@sanz.dev>
Date: Fri, 30 Jan 2026 19:42:04 -0800
Subject: [PATCH 2/2] fix: add Vite dev proxy for local development

Configure Vite's development server to proxy backend routes to
localhost:8000, mimicking nginx's routing behavior. This allows
relative URLs to work in both local development and production.

Routes proxied: /auth, /api, /tasks, /health, /sync, /ws, and all
task mutation endpoints. Also proxies /taskchampion to localhost:8080.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/vite.config.ts | 69 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 78caf990..f0aecf70 100644
--- a/frontend/vite.config.ts
+++ b/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/, ''),
+      },
+    },
+  },
 });