From d6ccceff591af50f9ca571f51648b0f6b90e9e7b Mon Sep 17 00:00:00 2001 From: Georges-Antoine Assi Date: Fri, 8 Aug 2025 12:39:19 -0400 Subject: [PATCH] Run vite dev with https --- .devcontainer/devcontainer.json | 10 ++-- docker-compose.yml | 2 + env.template | 2 +- frontend/package-lock.json | 90 ++++++++++++++++++++++++++++----- frontend/package.json | 1 + frontend/vite.config.js | 14 +++-- 6 files changed, 99 insertions(+), 20 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 96712b31b..f6d753c34 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -4,10 +4,10 @@ "service": "romm-dev", "workspaceFolder": "/app", "shutdownAction": "stopCompose", - "forwardPorts": [5000, 3000, 3306, 6379], + "forwardPorts": [443, 3000, 3306, 5000, 6379], "portsAttributes": { - "5000": { - "label": "Backend API", + "443": { + "label": "HTTPS Dev Server", "onAutoForward": "notify" }, "3000": { @@ -18,6 +18,10 @@ "label": "MariaDB", "onAutoForward": "silent" }, + "5000": { + "label": "Backend API", + "onAutoForward": "notify" + }, "6379": { "label": "Valkey/Redis", "onAutoForward": "silent" diff --git a/docker-compose.yml b/docker-compose.yml index c640377f9..6ffceec0b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -13,6 +13,7 @@ services: - ROMM_BASE_PATH=/app/romm ports: - "3000:3000" # Frontend dev server + - "443:443" # HTTPS dev server - "${DEV_PORT:-5000}:5000" # Backend API volumes: - ./backend:/app/backend @@ -21,6 +22,7 @@ services: - /app/frontend/node_modules # Empty directory - /app/frontend/dist # Empty directory - ./romm_mock:/app/romm + - ~/.vite-plugin-mkcert:/app/.vite-plugin-mkcert depends_on: - romm-db-dev - romm-valkey-dev diff --git a/env.template b/env.template index 0ed5c26a5..52c4bd4b9 100644 --- a/env.template +++ b/env.template @@ -1,7 +1,7 @@ ROMM_BASE_PATH=/path/to/romm_mock DEV_MODE=true +DEV_HTTPS=false KIOSK_MODE=false -VITE_ALLOWED_HOSTS=false # Gunicorn (optional) # Workers -> (2 × CPU cores) + 1 diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3a955f398..d3b41f68f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -46,6 +46,7 @@ "typescript": "^5.7.3", "typescript-eslint": "^8.28.0", "vite": "^6.3.5", + "vite-plugin-mkcert": "^1.17.8", "vite-plugin-pwa": "^0.21.1", "vite-plugin-vuetify": "^2.0.4", "vue-tsc": "^2.2.8" @@ -1920,6 +1921,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "aix" @@ -1935,6 +1937,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "android" @@ -1950,6 +1953,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "android" @@ -1965,6 +1969,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "android" @@ -1980,6 +1985,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -1995,6 +2001,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -2010,6 +2017,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -2025,6 +2033,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -2040,6 +2049,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2055,6 +2065,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2070,6 +2081,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2085,6 +2097,7 @@ "cpu": [ "loong64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2100,6 +2113,7 @@ "cpu": [ "mips64el" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2115,6 +2129,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2130,6 +2145,7 @@ "cpu": [ "riscv64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2145,6 +2161,7 @@ "cpu": [ "s390x" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2160,6 +2177,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -2175,6 +2193,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -2190,6 +2209,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -2205,6 +2225,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -2220,6 +2241,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -2235,6 +2257,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "sunos" @@ -2250,6 +2273,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -2265,6 +2289,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "win32" @@ -2280,6 +2305,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -2565,7 +2591,7 @@ "version": "0.3.8", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -2579,7 +2605,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6.0.0" } @@ -2588,7 +2614,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6.0.0" } @@ -2597,7 +2623,7 @@ "version": "0.3.6", "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" @@ -2612,7 +2638,7 @@ "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -2919,6 +2945,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2932,6 +2959,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2945,6 +2973,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2957,6 +2986,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2970,6 +3000,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2983,6 +3014,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -2996,6 +3028,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3009,6 +3042,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3022,6 +3056,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3035,6 +3070,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3048,6 +3084,7 @@ "cpu": [ "loong64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3061,6 +3098,7 @@ "cpu": [ "ppc64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3074,6 +3112,7 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3087,6 +3126,7 @@ "cpu": [ "riscv64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3100,6 +3140,7 @@ "cpu": [ "s390x" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3113,6 +3154,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3126,6 +3168,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3139,6 +3182,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3152,6 +3196,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3165,6 +3210,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -3257,7 +3303,7 @@ "version": "22.13.14", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz", "integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.20.0" @@ -3776,7 +3822,7 @@ "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", - "devOptional": true, + "dev": true, "bin": { "acorn": "bin/acorn" }, @@ -4064,7 +4110,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "devOptional": true + "dev": true }, "node_modules/call-bind": { "version": "1.0.8", @@ -5250,6 +5296,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -7466,7 +7513,7 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.10.0" } @@ -7483,7 +7530,7 @@ "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "devOptional": true, + "dev": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -7720,7 +7767,7 @@ "version": "5.37.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz", "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -7738,7 +7785,7 @@ "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "devOptional": true + "dev": true }, "node_modules/tinyglobby": { "version": "0.2.14", @@ -7994,7 +8041,7 @@ "version": "6.20.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", - "devOptional": true + "dev": true }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.1", @@ -8194,6 +8241,23 @@ } } }, + "node_modules/vite-plugin-mkcert": { + "version": "1.17.8", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.8.tgz", + "integrity": "sha512-S+4tNEyGqdZQ3RLAG54ETeO2qyURHWrVjUWKYikLAbmhh/iJ+36gDEja4OWwFyXNuvyXcZwNt5TZZR9itPeG5Q==", + "dev": true, + "dependencies": { + "axios": "^1.8.3", + "debug": "^4.4.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=v16.7.0" + }, + "peerDependencies": { + "vite": ">=3" + } + }, "node_modules/vite-plugin-pwa": { "version": "0.21.1", "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.21.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2f40109b8..da0bacd23 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -64,6 +64,7 @@ "typescript": "^5.7.3", "typescript-eslint": "^8.28.0", "vite": "^6.3.5", + "vite-plugin-mkcert": "^1.17.8", "vite-plugin-pwa": "^0.21.1", "vite-plugin-vuetify": "^2.0.4", "vue-tsc": "^2.2.8" diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 679d4334d..eddc5a6a5 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -2,6 +2,7 @@ import vue from "@vitejs/plugin-vue"; import { VitePWA } from "vite-plugin-pwa"; import vuetify, { transformAssetUrls } from "vite-plugin-vuetify"; +import mkcert from "vite-plugin-mkcert"; // Utilities import { URL, fileURLToPath } from "node:url"; @@ -16,7 +17,6 @@ export default defineConfig(({ mode }) => { ...loadEnv(mode, "./", envPrefixes), }; const backendPort = env.DEV_PORT ?? "5000"; - const allowedHosts = env.VITE_ALLOWED_HOSTS == "true" ? true : false; return { build: { @@ -46,6 +46,11 @@ export default defineConfig(({ mode }) => { type: "module", }, }), + env.DEV_HTTPS && + mkcert({ + savePath: "/app/.vite-plugin-mkcert", + hosts: ["localhost", "127.0.0.1", "romm.dev"], + }), ], define: { "process.env": {}, @@ -75,8 +80,11 @@ export default defineConfig(({ mode }) => { rewrite: (path) => path.replace(/^\/openapi.json/, "/openapi.json"), }, }, - port: 3000, - allowedHosts: allowedHosts, + port: env.DEV_HTTPS ? 443 : 3000, + allowedHosts: ["localhost", "127.0.0.1", "romm.dev"], + https: { + cert: "/app/.vite-plugin-mkcert/dev.pem", + }, }, }; });