let vite be the proxy to the dev server (#1630)

apps/client/src/externals.ts

@@ -49,10 +49,7 @@ function resolveUrl(protocol: 'http' | 'ws', path: string) {
   url.pathname = baseURI ? `${baseURI}/${path}` : path;
 
   // in development mode, we use the React port for UI, but need the requests to target the server
-  if (isDev) {
+  // this is done with a proxy in the vite config to avoid CORS issues in the dev environment
-    // this is used as a fallback port for development
-    url.port = '4001';
-  }
 
   const result = url.toString();
 

apps/client/vite.config.js

@@ -39,6 +39,29 @@ export default defineConfig({
   ],
   server: {
     port: 3000,
+    proxy: {
+      '^/login*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/data*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/api*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+      },
+      '^/ws*': {
+        target: 'http://localhost:4001/',
+        changeOrigin: true,
+        configure: logProxyRequests,
+        ws: true,
+      },
+    },
   },
   test: {
     globals: true,
@@ -78,3 +101,9 @@ export default defineConfig({
     },
   },
 });
+
+function logProxyRequests(proxy) {
+  proxy.on('proxyReq', (_proxyReq, req, _res) => {
+    console.log('Proxy:', req.method, req.url);
+  });
+}