From 7e67ca9d104edf8250defda5df8e827df8cc6f97 Mon Sep 17 00:00:00 2001 From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com> Date: Sat, 18 Apr 2026 14:27:07 -0700 Subject: [PATCH] fix: add https support for local vite dev server --- package-lock.json | 28 +++++++++++++++---- package.json | 1 + src/core/io/KGProjectStorage.ts | 7 +++++ src/main.tsx | 48 ++++++++++++++++++++++++++++++++- vite.config.ts | 4 ++- 5 files changed, 81 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index fba7196..10c7d35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "K.G.Studio", - "version": "0.9.0-build.20260406", + "version": "0.10.0-build.20260411", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "K.G.Studio", - "version": "0.9.0-build.20260406", + "version": "0.10.0-build.20260411", "dependencies": { "@breezystack/lamejs": "^1.2.7", "class-transformer": "^0.5.1", @@ -46,6 +46,7 @@ "typescript": "~5.8.3", "typescript-eslint": "^8.34.1", "vite": "^7.0.0", + "vite-plugin-mkcert": "^1.17.12", "vitest": "^3.2.4" } }, @@ -3938,9 +3939,9 @@ } }, "node_modules/debug": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", - "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -13853,6 +13854,23 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/vite-plugin-mkcert": { + "version": "1.17.12", + "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.12.tgz", + "integrity": "sha512-HhLyUZnvkKLuk9o+HBaMlGIa6CqPTfLbVlLFBjrkN4mpZ4saYFRfFx5R12a46UxmzWT9dO8fijmblVvCYvCD3A==", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.4.3", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=v18.0.0" + }, + "peerDependencies": { + "vite": ">=3" + } + }, "node_modules/vite/node_modules/fdir": { "version": "6.4.6", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz", diff --git a/package.json b/package.json index f673914..c6c6cf7 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "typescript": "~5.8.3", "typescript-eslint": "^8.34.1", "vite": "^7.0.0", + "vite-plugin-mkcert": "^1.17.12", "vitest": "^3.2.4" } } diff --git a/src/core/io/KGProjectStorage.ts b/src/core/io/KGProjectStorage.ts index 2083a6d..7bdac74 100644 --- a/src/core/io/KGProjectStorage.ts +++ b/src/core/io/KGProjectStorage.ts @@ -51,6 +51,13 @@ export class KGProjectStorage { public async initialize(): Promise { if (this._initialized) return; + if (!navigator.storage?.getDirectory) { + throw new Error( + 'OPFS is unavailable. K.G.Studio requires a secure context (HTTPS or localhost). ' + + 'Access via https:// or use localhost/127.0.0.1 instead of an IP address.', + ); + } + this.rootDirHandle = await navigator.storage.getDirectory(); this.projectsDirHandle = await this.rootDirHandle.getDirectoryHandle( OPFS_CONSTANTS.ROOT_DIR, diff --git a/src/main.tsx b/src/main.tsx index c3caa3c..2f9bf21 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -9,6 +9,51 @@ import { KGAudioInterface } from './core/audio-interface/KGAudioInterface'; import { KGMidiInput } from './core/midi-input/KGMidiInput'; import { KGDebugger } from './core/KGDebugger'; +const root = createRoot(document.getElementById('root')!); + +// OPFS requires a secure context (HTTPS or localhost). Show a clear error instead of crashing. +if (!window.isSecureContext) { + root.render( + +
+
🔒
+

Secure Context Required

+

+ K.G.Studio uses the browser's Origin Private File System (OPFS) to store projects, + which requires a secure context. +

+
+
Use https:// instead of http://
+
or access via localhost / 127.0.0.1
+
+
+ , + ); +} else { // Initialize KGCore instance await KGCore.instance().initialize(); @@ -87,8 +132,9 @@ window.addEventListener('beforeunload', (event) => { // Note: Custom messages are no longer supported in modern browsers for security reasons }); -createRoot(document.getElementById('root')!).render( +root.render( , ); +} // end isSecureContext else diff --git a/vite.config.ts b/vite.config.ts index ed9abbb..bf8db10 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,6 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import mkcert from 'vite-plugin-mkcert'; import { readFileSync } from 'node:fs'; import { resolve } from 'node:path'; import { fileURLToPath, URL } from 'node:url'; @@ -11,12 +12,13 @@ const version = packageJson.version; // https://vite.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react(), mkcert()], base: '/kgstudio/', define: { __APP_VERSION__: JSON.stringify(version), }, server: { + host: true, // IMPORTANT: MAKE SURE TO UPDATE YOUR OS HOSTS FILE TO POINT `testlocal.com` TO YOUR LOCAL IP (e.g. 127.0.0.1). allowedHosts: ['testlocal.com', '.testlocal.com', 'localhost', '127.0.0.1'], },