Merge pull request #19 from prajeeta15/p2p/dev-server

Rohit-554 · web-flow · commit 30a237b1d0a4 · 2025-10-06T02:52:53.000+05:30
P2p/dev server #1
diff --git a/HTTPS_SETUP.md b/HTTPS_SETUP.md
@@ -0,0 +1,68 @@
+# HTTPS dev server (LAN testing)
+This document explains how to create locally-trusted certificates and run the Vite dev server over HTTPS so you can test the app from other devices on the same LAN (phones, tablets, etc.).
+
+## Recommended approach: use `mkcert` (easiest — certificates are trusted automatically)
+
+### Install mkcert
+- macOS (Homebrew):
+```
+brew install mkcert
+brew install nss # for Firefox (optional)
+```
+- Windows (Chocolatey):
+```
+choco install mkcert
+```
+- Linux: download the mkcert binary from the project releases or use your package manager if available. Also install ```libnss3-tools``` for Firefox integration when required.
+
+(See mkcert project for platform-specific install steps.)
+
+### Generate certs (recommended)
+```npm run generate-cert```
+This script will prefer mkcert. If mkcert is installed it will create a locally-trusted certificate and install a local CA (if needed). The generated files will be placed in ```./certs/localhost.pem``` and ```./certs/localhost-key.pem```.
+
+### Start the dev server
+```npm run dev:https```
+
+### Open the site from another device on your LAN using your machine IP, for example:
+```https://192.168.1.23:5173```
+If the browser still warns about the certificate, confirm ```mkcert -install``` succeeded, or (if using the OpenSSL fallback) ```import certs/localhost.pem``` into the OS/browser trust store (instructions below).
+
+## Fallback: OpenSSL (self-signed)
+
+If you don't have mkcert installed, npm run generate-cert will try to create a self-signed cert with openssl. Self-signed certs will trigger browser warnings unless you import the cert into the trusted root store.
+Trusting the self-signed cert (example):
+- macOS (Keychain Access)
+  1. Open Keychain Access.
+  2. File → Import Items → select ```certs/localhost.pem```.
+  3. Find the imported cert in login or System keychain, double-click it, expand "Trust" and set "When using this certificate" → "Always Trust".
+
+- Windows
+  1. Run certmgr.msc.
+  2. Import ```certs/localhost.pem``` into ```Trusted Root Certification Authorities``` → Certificates.
+
+- Linux
+ 1. Varies by distro/browser. On Debian/Ubuntu you can generally copy the PEM into ```/usr/local/share/ca-certificates/``` and run ```sudo update-ca-certificates```. Firefox may need manual import.
+
+## HMR / websocket problems
+
+If the dev server loads but HMR (hot module replacement) fails in other devices, set DEV_HMR_HOST to your host machine's LAN IP when starting the server. Example:
+
+- macOS / Linux:
+```DEV_HMR_HOST=192.168.1.23 npm run dev:https```
+
+- Windows (PowerShell):
+```
+$env:DEV_HMR_HOST = '192.168.1.23'
+npm run dev:https
+```
+This forces Vite to use that host in the HMR websocket URL.
+
+## Troubleshooting
+
+- If you see ```NET::ERR_CERT_AUTHORITY_INVALID```, your cert is not trusted. Prefer mkcert to avoid this.
+- If ```mkcert``` fails to install the local CA, try running ```mkcert -install``` manually (may request admin rights).
+- If ```openssl``` is not installed on Windows, use ```mkcert ``` instead, or install OpenSSL via MSYS2 / Git for Windows / other means.
+
+## Security note
+Do not commit your private key to the repository. We add certs/ to .gitignore. If you prefer to share a single cert for your team, coordinate explicitly and treat the key as sensitive.
diff --git a/certs/.gitkeep b/certs/.gitkeep
@@ -0,0 +1 @@
+# empty file to keep the certs directory in git
diff --git a/package.json b/package.json
@@ -19,6 +19,13 @@
     "vite": "5.4.9",
     "vite-plugin-pwa": "^0.17.4"
   },
+  {
+  "scripts": {
+  "dev": "vite",
+  "dev:https": "vite --host",
+  "build": "vite build",
+  "generate-cert": "node ./scripts/generate-cert.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rohit-554/Peer-Hacktoberfest.git"
diff --git a/scripts/generate-cert.js b/scripts/generate-cert.js
@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+const os = require('os')
+
+
+const repoRoot = path.resolve(__dirname, '..')
+const certDir = path.join(repoRoot, 'certs')
+if (!fs.existsSync(certDir)) fs.mkdirSync(certDir)
+
+
+const certFile = path.join(certDir, 'localhost.pem')
+const keyFile = path.join(certDir, 'localhost-key.pem')
+
+
+function getLocalIPs() {
+const nets = os.networkInterfaces()
+const results = []
+for (const name of Object.keys(nets)) {
+for (const net of nets[name]) {
+// we only care about IPv4 external addresses
+if (net.family === 'IPv4' && !net.internal) {
+results.push(net.address)
+}
+}
+}
+return results
+}
+
+
+const localIPs = getLocalIPs()
+const hosts = ['localhost', '127.0.0.1', '::1', ...localIPs]
+
+
+console.log('Generating cert for hosts:', hosts.join(', '))
+
+
+function run(cmd) {
+console.log('> ' + cmd)
+execSync(cmd, { stdio: 'inherit' })
+}
+
+
+// Try mkcert first (preferred — mkcert installs a local CA and will make certs trusted by browsers)
+try {
+execSync('mkcert -version', { stdio: 'ignore' })
+console.log('mkcert found — creating locally-trusted certs (mkcert will install a local CA if necessary)')
+try { execSync('mkcert -install', { stdio: 'inherit' }) } catch (e) { /* ignore */ }
+const mkcertCmd = `mkcert -cert-file "${certFile}" -key-file "${keyFile}" ${hosts.map(h => '"' + h + '"').join(' ')}`
+run(mkcertCmd)
+console.log('Created certs:')
+console.log(' ', certFile)
+console.log(' ', keyFile)
+process.exit(0)
+} catch (e) {
+console.log('mkcert not available — falling back to OpenSSL self-signed cert (NOT trusted automatically)')
+}
+
+
+// Fallback: openssl (self-signed, will trigger browser warnings unless imported into trust stores)
+try {
+const subj = '/CN=localhost'
+const opensslCmd = `openssl req -x509 -newkey rsa:2048 -nodes -keyout "${keyFile}" -out "${certFile}" -days 365 -subj "${subj}"`
+run(opensslCmd)
+console.log('Created self-signed certs:')
+console.log(' ', certFile)
+console.log(' ', keyFile)
+console.log('\nNote: This self-signed certificate will NOT be trusted by browsers automatically. Use mkcert if you want a trusted cert. See HTTPS_SETUP.md for instructions.')
+process.exit(0)
+} catch (err) {
+console.error('Failed to create certificates. Make sure you have `mkcert` or `openssl` installed.\nError: ', err && err.message)
+process.exit(1)
+}
diff --git a/vite.config.js b/vite.config.js
@@ -1,95 +1,117 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
+import fs from 'fs'
+import path from 'path'
+
+const certDir = path.resolve(__dirname, 'certs')
+const certPath = path.join(certDir, 'localhost.pem')
+const keyPath = path.join(certDir, 'localhost-key.pem')
+
+let httpsOptions = false
+try {
+  if (fs.existsSync(certPath) && fs.existsSync(keyPath)) {
+    httpsOptions = {
+      cert: fs.readFileSync(certPath),
+      key: fs.readFileSync(keyPath)
+    }
+    console.log('[vite] Using HTTPS certs for dev server')
+  } else {
+    console.warn('[vite] No HTTPS certs found — run `npm run generate-cert` to create them')
+  }
+} catch (e) {
+  console.warn('[vite] Error reading HTTPS certs:', e.message)
+}
 
 export default defineConfig({
-    base: process.env.VITE_BASE_PATH || '/',
-    plugins: [
-        react(),
-        VitePWA({
-            registerType: 'autoUpdate',
-            workbox: {
-                globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
-                navigateFallback: '/offline.html',
-                navigateFallbackDenylist: [/^\/api\//],
-                runtimeCaching: [
-                    {
-                        urlPattern: /^https:\/\/0\.peerjs\.com\//,
-                        handler: 'NetworkFirst',
-                        options: {
-                            cacheName: 'peerjs-cache',
-                            expiration: {
-                                maxEntries: 10,
-                                maxAgeSeconds: 60 * 60 * 24 // 24 hours
-                            }
-                        }
-                    },
-                    {
-                        urlPattern: /^https:\/\/api\.qrserver\.com\//,
-                        handler: 'CacheFirst',
-                        options: {
-                            cacheName: 'qr-cache',
-                            expiration: {
-                                maxEntries: 50,
-                                maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
-                            }
-                        }
-                    }
-                ]
-            },
-            manifest: {
-                name: 'Peer P2P Voice Chat',
-                short_name: 'PeerChat',
-                description: 'Local Wi-Fi P2P voice chat using WebRTC (PeerJS)',
-                theme_color: '#0f172a',
-                background_color: '#0f172a',
-                display: 'standalone',
-                orientation: 'portrait-primary',
-                scope: '/',
-                start_url: '/',
-                lang: 'en',
-                categories: ['communication', 'social'],
-                icons: [
-                    {
-                        src: 'pwa-192x192.png',
-                        sizes: '192x192',
-                        type: 'image/png',
-                        purpose: 'any maskable'
-                    },
-                    {
-                        src: 'pwa-512x512.png',
-                        sizes: '512x512',
-                        type: 'image/png',
-                        purpose: 'any maskable'
-                    },
-                    {
-                        src: 'apple-touch-icon.png',
-                        sizes: '180x180',
-                        type: 'image/png'
-                    }
-                ],
-                shortcuts: [
-                    {
-                        name: 'Start Voice Chat',
-                        short_name: 'Voice Chat',
-                        description: 'Start a new voice chat session',
-                        url: '/?action=call',
-                        icons: [
-                            {
-                                src: 'pwa-192x192.png',
-                                sizes: '192x192'
-                            }
-                        ]
-                    }
-                ]
-            },
-            devOptions: {
-                enabled: true
+  base: process.env.VITE_BASE_PATH || '/',
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+        navigateFallback: '/offline.html',
+        navigateFallbackDenylist: [/^\\/api\\//],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\\/\\/0\\.peerjs\\.com\\//,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'peerjs-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24
+              }
             }
-        })
-    ],
-    server: {
-        host: true,
-        port: 5173
-    }
+          },
+          {
+            urlPattern: /^https:\\/\\/api\\.qrserver\\.com\\//,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'qr-cache',
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 7
+              }
+            }
+          }
+        ]
+      },
+      manifest: {
+        name: 'Peer P2P Voice Chat',
+        short_name: 'PeerChat',
+        description: 'Local Wi-Fi P2P voice chat using WebRTC (PeerJS)',
+        theme_color: '#0f172a',
+        background_color: '#0f172a',
+        display: 'standalone',
+        orientation: 'portrait-primary',
+        scope: '/',
+        start_url: '/',
+        lang: 'en',
+        categories: ['communication', 'social'],
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: 'apple-touch-icon.png',
+            sizes: '180x180',
+            type: 'image/png'
+          }
+        ],
+        shortcuts: [
+          {
+            name: 'Start Voice Chat',
+            short_name: 'Voice Chat',
+            description: 'Start a new voice chat session',
+            url: '/?action=call',
+            icons: [
+              {
+                src: 'pwa-192x192.png',
+                sizes: '192x192'
+              }
+            ]
+          }
+        ]
+      },
+      devOptions: {
+        enabled: true
+      }
+    })
+  ],
+  server: {
+    host: true,
+    port: 5173,
+    https: httpsOptions
+  }
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+# empty file to keep the certs directory in git`