feat(): proxy backend

Author: I-am-PUID-0

.gitignore

@@ -23,3 +23,4 @@ logs
 .env.*
 !.env.example
 /.vs
+.pnpm-store*

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@material-symbols/font-400": "^0.27.0",
     "@vueuse/core": "^11.3.0",
+    "http-proxy-middleware": "^3.0.3",
     "nuxt": "^3.14.159",
     "vue": "latest",
     "vue-router": "latest"

plugins/websocket.js

@@ -1,11 +1,8 @@
 import { useEventBus } from '@vueuse/core';
 
 export default defineNuxtPlugin((nuxtApp) => {
-  // Determine WebSocket protocol based on current protocol
   const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-
-  // Always connect to the backend on localhost:8000
-  const websocketUrl = `${protocol}://127.0.0.1:8000/ws/logs`; // Backend WebSocket URL
+  const websocketUrl = `${protocol}://${window.location.host}/ws/logs`; // Relative path
   const socket = new WebSocket(websocketUrl);
 
   const logBus = useEventBus('log-bus'); // Initialize the event bus

pnpm-lock.yaml

@@ -0,0 +1,29 @@
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+export default defineEventHandler(async (event) => {
+  const reqUrl = event.req.url;
+
+  // Apply the proxy only for specific routes (e.g., /api and /ws)
+  if (reqUrl.startsWith('/api') || reqUrl.startsWith('/ws')) {
+    const proxy = createProxyMiddleware({
+      target: 'http://localhost:8000', // Backend server
+      changeOrigin: true,
+      ws: true, // Enable WebSocket proxying
+      pathRewrite: {
+        '^/api': '', // Remove '/api' prefix when forwarding
+        '^/ws': '/ws', // Keep '/ws' prefix
+      },
+    });
+
+    return new Promise((resolve, reject) => {
+      proxy(event.req, event.res, (err) => {
+        if (err) {
+          console.error('[Proxy Error]:', err);
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+});

server/middleware/proxy.js

@@ -1,9 +1,5 @@
 export const statusRepository = () => {
-  // Determine the API base URL dynamically based on the frontend's location
-  const protocol = window.location.protocol;
-  const hostname = window.location.hostname;
-  const backendPort = 8000; // Set the backend port
-  const apiBaseUrl = `${protocol}//${hostname}:${backendPort}`;
+  const apiBaseUrl = `${window.location.origin}/api`;
   return {
     async getServiceStatus(serviceId) {
       return await fetch(`${apiBaseUrl}/service-status/${serviceId}`, {