more optional env vars for easier development

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:

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,
       },
     },
   },