Update vite.config.js to allow serving over https

package.json

@@ -57,6 +57,7 @@
     "globals": "^15.14.0",
     "jest": "^29.7.0",
     "vite": "^6.0.5",
+    "vite-plugin-mkcert": "^1.17.8",
     "vite-plugin-singlefile": "^2.1.0"
   }
 }

src/hooks/useSerial/useSerial.js

@@ -12,8 +12,15 @@ const useSerial = () => {
 
     useEffect(() => {
         // check if browser compatible
+        // Note: this check will fail in other cases too:
+        //   - URL must be secure or localhost
+        //   - Must run after the DOM has been loaded
+        //   - Must be in the main thread.
         if (!navigator.serial) {
-            console.error("Web Serial API not supported");
+            const isMainThread = typeof window !== "undefined" && typeof document !== "undefined";
+            const isLoading = document.readyState === "loading";
+            const isSecure = window.location.protocol === "https:";
+            console.error(`Web Serial API not supported: isSecure: ${isSecure}, isMainThread: ${isMainThread}, isLoading: ${isLoading}`);
         }
 
         // setup callback to get full history

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { viteSingleFile } from "vite-plugin-singlefile";
+import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -16,6 +17,7 @@ export default defineConfig({
                 }
             },
         },
+        mkcert(),
     ],
     optimizeDeps: {
         include: [
@@ -27,4 +29,8 @@ export default defineConfig({
     build: {
         outDir: "./docs",
     },
+    server: {
+        https: true,
+        host: true, // or specify a hostname like 'localhost'
+    },
 });