-
- {sessionState.name || 'Shared Session'}
-
-
- ID: {sessionState.connectionId}
-
+
{sessionState.name || "Shared Session"}
+
ID: {sessionState.connectionId}
-
@@ -296,7 +286,7 @@ const ShareWSSession = () => {
query={{
uuid: sessionState.connectionId,
width: Math.round(window.innerWidth * (window.devicePixelRatio || 1)),
- height: Math.round(window.innerHeight * (window.devicePixelRatio || 1))
+ height: Math.round(window.innerHeight * (window.devicePixelRatio || 1)),
}}
connectionId={sessionState.connectionId}
onDisconnect={handleDisconnect}
diff --git a/frontend/src/components/WebSocketControl.jsx b/frontend/src/components/WebSocketControl.jsx
index 4d45f47..0ba1964 100644
--- a/frontend/src/components/WebSocketControl.jsx
+++ b/frontend/src/components/WebSocketControl.jsx
@@ -21,6 +21,7 @@ import {
DialogTrigger,
} from "@/components/ui/dialog";
import WebSocketMetricsDisplay from "./WebSocketMetricsDisplay";
+import { API_BASE } from "../config";
/**
* A collapsible control panel for WebSocket connection management
@@ -132,7 +133,7 @@ function WebSocketControl({
const formData = new FormData();
formData.append("file", file);
const xhr = new window.XMLHttpRequest();
- xhr.open("POST", `/sessions/${connectionId}/upload`, true);
+ xhr.open("POST", `${API_BASE}/sessions/${connectionId}/upload`, true);
xhr.withCredentials = false;
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
diff --git a/frontend/src/config.js b/frontend/src/config.js
new file mode 100644
index 0000000..7a78a7f
--- /dev/null
+++ b/frontend/src/config.js
@@ -0,0 +1,18 @@
+// Base URL for backend REST API calls.
+// In production (e.g. Cloudflare Pages) set VITE_API_BASE_URL to the backend origin,
+// e.g. https://api.kubebrowse.example.com or https://kubebrowse-tunnel.pages.dev
+//
+// For local dev with an HTTP backend, set VITE_API_BASE_URL=http://localhost:4567
+// and run `npm run dev` (HTTP dev server).
+export const API_BASE = (import.meta.env.VITE_API_BASE_URL || "").replace(/\/$/, "");
+
+// Derive WebSocket / HTTP tunnel bases from the same origin so they stay in sync.
+const apiUrl = API_BASE ? new URL(API_BASE) : null;
+
+export const WS_BASE = apiUrl
+ ? `${apiUrl.protocol === "https:" ? "wss" : "ws"}://${apiUrl.host}`
+ : `${window.location.protocol === "https:" ? "wss" : "ws"}://${location.host}`;
+
+export const HTTP_TUNNEL_BASE = apiUrl
+ ? `${apiUrl.protocol}//${apiUrl.host}`
+ : `${window.location.protocol}//${location.host}`;
diff --git a/frontend/src/hooks/useGuacWebSocket.js b/frontend/src/hooks/useGuacWebSocket.js
index d6659d3..cccbc96 100644
--- a/frontend/src/hooks/useGuacWebSocket.js
+++ b/frontend/src/hooks/useGuacWebSocket.js
@@ -4,6 +4,7 @@ import Guacamole from "guacamole-common-js";
import states from "../lib/states";
import sessionDuplicator from "../lib/websocketSessionDuplicator";
import useWebSocketMetrics from "./useWebSocketMetrics";
+import { API_BASE } from "../config";
// Session persistence keys
const SESSION_STORAGE_KEY = "kubeBrowse_sessionConnection";
@@ -120,7 +121,7 @@ const useGuacWebSocket = (
if (!isSharedSession) {
try {
console.log(`Cleaning up session ${sessionUUID} after failed reconnection attempts`);
- await fetch(`/sessions/${sessionUUID}/stop`, {
+ await fetch(`${API_BASE}/sessions/${sessionUUID}/stop`, {
method: "DELETE",
});
console.log(`Session ${sessionUUID} cleanup request sent`);
@@ -180,7 +181,7 @@ const useGuacWebSocket = (
console.log(
`Cleaning up session ${sessionUUID} after failed reconnection attempts`,
);
- fetch(`/sessions/${sessionUUID}/stop`, {
+ fetch(`${API_BASE}/sessions/${sessionUUID}/stop`, {
method: "DELETE",
}).catch((err) => console.error("Failed to cleanup session on backend:", err));
} else {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 2e0e460..bff74f7 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -3,9 +3,6 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
-const guacClient = process.env.GUAC_CLIENT_URL || "https://localhost:4567";
-console.log(`Using Guacamole client URL: ${guacClient}`);
-
export default defineConfig({
plugins: [react()],
resolve: {
@@ -13,161 +10,4 @@ export default defineConfig({
"@": path.resolve(__dirname, "./src"),
},
},
- server: {
- proxy: {
- "/tunnel": {
- target: guacClient,
- changeOrigin: true,
- ws: false,
- secure: false, // Ignore certificate validation
- timeout: 60000, // Increase timeout to 60 seconds
- proxyTimeout: 60000,
- cookieDomainRewrite: "localhost",
- cookiePathRewrite: "/",
- },
- "/api/v1": {
- target: guacClient,
- changeOrigin: true,
- ws: false,
- secure: false, // Ignore certificate validation
- timeout: 60000, // Increase timeout to 60 seconds
- proxyTimeout: 60000,
- cookieDomainRewrite: "localhost",
- cookiePathRewrite: "/",
- },
- "/sessions": {
- target: guacClient,
- changeOrigin: true,
- ws: false,
- secure: false, // Ignore certificate validation
- timeout: 60000, // Increase timeout to 60 seconds
- proxyTimeout: 60000,
- cookieDomainRewrite: "localhost",
- cookiePathRewrite: "/",
- },
- "/auth": {
- target: guacClient,
- changeOrigin: true,
- ws: false,
- secure: false, // Ignore certificate validation
- timeout: 60000, // Increase timeout to 60 seconds
- proxyTimeout: 60000,
- cookieDomainRewrite: "localhost",
- cookiePathRewrite: "/",
- onProxyReq: (proxyReq, req, res) => {
- // Ensure cookies are forwarded properly
- if (req.headers.cookie) {
- proxyReq.setHeader("Cookie", req.headers.cookie);
- }
- },
- onProxyRes: (proxyRes, req, res) => {
- // Handle Set-Cookie headers from the backend
- if (proxyRes.headers["set-cookie"]) {
- const cookies = proxyRes.headers["set-cookie"];
- // Rewrite cookie domain and path for frontend
- const rewrittenCookies = cookies.map(
- (cookie) =>
- cookie
- .replace(/Domain=[^;]+;?/g, "Domain=localhost;")
- .replace(/Path=[^;]+;?/g, "Path=/;")
- .replace(/Secure;?/g, ""), // Remove Secure flag for local development
- );
- proxyRes.headers["set-cookie"] = rewrittenCookies;
- }
- },
- },
- "/websocket-tunnel": {
- target: guacClient,
- changeOrigin: true,
- ws: true,
- secure: false, // Ignore certificate validation
- timeout: 120000, // Increase timeout to 120 seconds
- proxyTimeout: 120000,
- configure: (proxy, _options) => {
- // Increase buffer size to handle larger WebSocket frames
- proxy.options.buffer = Buffer.alloc(1024 * 1024);
-
- proxy.on("error", (err, req, res) => {
- console.log("Proxy error:", err);
-
- // Prevent additional writes to broken connections
- if (err.code === "EPIPE" || err.code === "ECONNRESET") {
- console.log("Connection closed by remote host. Preventing further writes.");
- if (res && !res.headersSent) {
- res.writeHead(502, { "Content-Type": "text/plain" });
- res.end("WebSocket connection error. Please refresh the page to reconnect.");
- }
- }
- });
-
- proxy.on("proxyReq", (proxyReq, req, _res) => {
- // Ensure WebSocket headers are preserved
- if (req.headers["sec-websocket-key"]) {
- if (!proxyReq.getHeader("connection")) {
- proxyReq.setHeader("connection", "upgrade");
- }
- if (!proxyReq.getHeader("upgrade")) {
- proxyReq.setHeader("upgrade", "websocket");
- }
-
- // Add additional headers that might help with connection stability
- proxyReq.setHeader("pragma", "no-cache");
- proxyReq.setHeader("cache-control", "no-cache");
- }
-
- // Log outgoing proxy requests
- console.log(`Proxying WebSocket request to: ${req.url}`);
- });
-
- proxy.on("proxyRes", (proxyRes, req, res) => {
- // Log successful responses
- console.log(`Proxy response: ${proxyRes.statusCode} for ${req.url}`);
- });
-
- proxy.on("upgrade", (req, socket, head) => {
- console.log("WebSocket upgrade initiated for:", req.url);
-
- // Add error handler to the socket
- socket.on("error", (err) => {
- console.error("WebSocket socket error:", err);
- // Close the socket gracefully to prevent EPIPE errors
- try {
- if (!socket.destroyed) {
- socket.end();
- }
- } catch (e) {
- console.error("Error while closing socket:", e);
- }
- });
-
- // Add close handler
- socket.on("close", () => {
- console.log("WebSocket connection closed for:", req.url);
- });
-
- // Keep socket alive
- socket.setKeepAlive(true);
-
- // Increase socket timeout
- socket.setTimeout(120000);
- });
-
- // Add general proxy error handling
- proxy.on("econnreset", (err, req, res, target) => {
- console.warn("Connection reset by peer:", err);
-
- // Try to gracefully handle the reset
- if (res && !res.headersSent) {
- res.writeHead(502, { "Content-Type": "text/plain" });
- res.end("Connection reset by server. Please refresh the page to reconnect.");
- }
- });
-
- proxy.on("end", () => {
- console.log("Proxy connection ended");
- });
- },
- },
- },
- },
});