From c990f35f40031ad0d1b4b0eef1ba0a48d6316a13 Mon Sep 17 00:00:00 2001
From: Victor Tramontina <victor.tramontina@universo.univates.br>
Date: Mon, 4 Aug 2025 11:20:36 -0300
Subject: [PATCH] more optional env vars for easier development

---
 web/README.md      | 27 +++++++++++++++++++++++++--
 web/vite.config.ts | 20 ++++++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/web/README.md b/web/README.md
index b30fa7341..3992e4b91 100644
--- a/web/README.md
+++ b/web/README.md
@@ -15,10 +15,33 @@ npm install
 Within `/web`, run:
 
 ```bash
-PROXY_HOST=<ip_address:port> npm run dev
+npm run dev
 ```
 
-The Proxy Host can point to your existing Frigate instance. Otherwise defaults to `localhost:5000` if running Frigate on the same machine.
+By default, this will connect to `localhost:5000` using HTTP protocol. You can customize the connection with these environment variables:
+
+```bash
+# Basic configuration - point to your Frigate instance
+PROXY_HOST=<ip_address:port> npm run dev
+
+# Advanced configurations
+# Use HTTPS instead of HTTP (websocket will use WSS instead of WS)
+PROXY_PROTOCOL=https PROXY_HOST=<ip_address:port> npm run dev
+
+# Disable certificate validation for self-signed or invalid certs
+PROXY_SECURE=false PROXY_PROTOCOL=https PROXY_HOST=<ip_address:port> npm run dev
+```
+
+### Proxy Configuration Notes
+
+- **PROXY_HOST**: Sets the host and port for your Frigate instance (default: `localhost:5000`)
+- **PROXY_PROTOCOL**: Sets the protocol to use (`http` or `https`, default: `http`)
+- **PROXY_SECURE**: Controls certificate validation. Set to `false` when:
+  - Using self-signed certificates
+  - Working with invalid or expired certificates
+  - Connecting to HTTPS services in development environments
+
+These options are particularly useful when working with Frigate instances that use HTTPS but don't have proper certificate validation.
 
 ## Extensions
 Install these IDE extensions for an improved development experience:
diff --git a/web/vite.config.ts b/web/vite.config.ts
index cb1a580bf..76aed4cd5 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -5,6 +5,8 @@ import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
 const proxyHost = process.env.PROXY_HOST || "localhost:5000";
+const proxyProtocol = process.env.PROXY_PROTOCOL || "http";
+const proxySecure = process.env.PROXY_SECURE === "false" ? false : undefined;
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,26 +16,32 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: `http://${proxyHost}`,
+        target: `${proxyProtocol}://${proxyHost}`,
         ws: true,
+        secure: proxySecure,
       },
       "/vod": {
-        target: `http://${proxyHost}`,
+        target: `${proxyProtocol}://${proxyHost}`,
+        secure: proxySecure,
       },
       "/clips": {
-        target: `http://${proxyHost}`,
+        target: `${proxyProtocol}://${proxyHost}`,
+        secure: proxySecure,
       },
       "/exports": {
-        target: `http://${proxyHost}`,
+        target: `${proxyProtocol}://${proxyHost}`,
+        secure: proxySecure,
       },
       "/ws": {
-        target: `ws://${proxyHost}`,
+        target: `${proxyProtocol === "http" ? "ws" : "wss"}://${proxyHost}`,
         ws: true,
+        secure: proxySecure,
       },
       "/live": {
-        target: `ws://${proxyHost}`,
+        target: `${proxyProtocol === "http" ? "ws" : "wss"}://${proxyHost}`,
         changeOrigin: true,
         ws: true,
+        secure: proxySecure,
       },
     },
   },