Support secure same-origin API URLs

README.md

@@ -160,6 +160,26 @@ If the browser shows a CORS error, make sure the exact frontend origin is in
 FRONTEND_ORIGINS=https://plasttrack.sable.ynsdev.site
 ```
 
+If the frontend is served over HTTPS, the WebSocket URL must use `wss://`, not
+`ws://`. Browsers block insecure WebSockets from secure pages. Recommended
+same-domain reverse proxy variables:
+
+```env
+FRONTEND_ORIGIN=https://plasttrack.sable.ynsdev.site
+FRONTEND_ORIGINS=https://plasttrack.sable.ynsdev.site
+VITE_API_BASE_URL=https://plasttrack.sable.ynsdev.site
+VITE_WS_URL=wss://plasttrack.sable.ynsdev.site/ws/dashboard
+VITE_ALLOWED_HOSTS=plasttrack.sable.ynsdev.site,localhost,127.0.0.1
+```
+
+The reverse proxy must route:
+
+```text
+/api/*         -> backend:8000
+/ws/dashboard -> backend:8000
+/*             -> frontend:5173
+```
+
 ### 3. Deploy
 
 Click `Deploy the stack`.

frontend/src/lib/api.ts

@@ -1,5 +1,28 @@
-export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
-export const WS_URL = import.meta.env.VITE_WS_URL ?? "ws://localhost:8000/ws/dashboard";
+function resolveApiBaseUrl() {
+  const configuredUrl = import.meta.env.VITE_API_BASE_URL;
+  if (configuredUrl) {
+    return configuredUrl;
+  }
+  if (typeof window === "undefined") {
+    return "http://localhost:8000";
+  }
+  return window.location.origin;
+}
+
+function resolveWsUrl() {
+  const configuredUrl = import.meta.env.VITE_WS_URL;
+  if (configuredUrl) {
+    return configuredUrl;
+  }
+  if (typeof window === "undefined") {
+    return "ws://localhost:8000/ws/dashboard";
+  }
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${window.location.host}/ws/dashboard`;
+}
+
+export const API_BASE_URL = resolveApiBaseUrl();
+export const WS_URL = resolveWsUrl();
 
 export async function fetchJson<T>(path: string, init?: RequestInit): Promise<T> {
   const response = await fetch(`${API_BASE_URL}${path}`, {