From 44774e68e158d56beb17eaf6e75cbc355a9d3057 Mon Sep 17 00:00:00 2001 From: jimenezz22 Date: Sun, 22 Jun 2025 00:14:06 -0600 Subject: [PATCH 1/2] feat: enhance local development setup with HTTPS support and environment variable updates --- client/.env.example | 2 + client/.gitignore | 2 + client/dev-dist/sw.js | 2 +- client/package.json | 6 +- client/vite.config.ts | 192 +++++++++++++++++++++++------------------- 5 files changed, 117 insertions(+), 87 deletions(-) diff --git a/client/.env.example b/client/.env.example index cf2af41..0930eb8 100644 --- a/client/.env.example +++ b/client/.env.example @@ -10,6 +10,8 @@ VITE_PUBLIC_MASTER_ADDRESS=YOUR_MASTER_ADDRESS VITE_PUBLIC_MASTER_PRIVATE_KEY=YOUR_MASTER_PRIVATE_KEY VITE_PUBLIC_SLOT_ADDRESS=YOUR_KATANA_ADDRESS +VITE_PUBLIC_LOCAL_HTTPS=HTTPS_FLAG + # PostHog Config VITE_POSTHOG_API_KEY="YOUR__POSTHOG_KEY" VITE_POSTHOG_HOST="YOUR_HOST" diff --git a/client/.gitignore b/client/.gitignore index f42c603..c550c82 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -22,6 +22,8 @@ mkcert+1.pem mkcert+1-key.pem localhost*.pem localhost*-key.pem +dev-key.pem +dev.pem # Editor directories and files .vscode/* diff --git a/client/dev-dist/sw.js b/client/dev-dist/sw.js index c42ebe1..c0439f7 100644 --- a/client/dev-dist/sw.js +++ b/client/dev-dist/sw.js @@ -82,7 +82,7 @@ define(['./workbox-86c9b217'], (function (workbox) { 'use strict'; "revision": "3ca0b8505b4bec776b69afdba2768812" }, { "url": "index.html", - "revision": "0.cqa50r5rbt" + "revision": "0.73g75renlu8" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), { diff --git a/client/package.json b/client/package.json index 3e76a12..98319e4 100644 --- a/client/package.json +++ b/client/package.json @@ -10,7 +10,11 @@ "preview": "vite preview", "serve": "vite preview", "format:check": "prettier --check .", - "format": "prettier --write ." + "format": "prettier --write .", + "dev:https": "VITE_LOCAL_HTTPS=true vite", + "dev:http": "VITE_LOCAL_HTTPS=false vite", + "preview:https": "VITE_LOCAL_HTTPS=true vite preview", + "mkcert": "mkcert -key-file dev-key.pem -cert-file dev.pem localhost 127.0.0.1 ::1" }, "dependencies": { "@cartridge/connector": "0.5.9", diff --git a/client/vite.config.ts b/client/vite.config.ts index f95277b..d64d7d3 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -1,93 +1,115 @@ -import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; import topLevelAwait from "vite-plugin-top-level-await"; import wasm from "vite-plugin-wasm"; import { VitePWA } from "vite-plugin-pwa"; import fs from "fs"; +import path from "path"; -export default defineConfig(({ mode }) => ({ - server: { - port: 3001, - https: { - key: fs.readFileSync("mkcert+1-key.pem"), // Path to private key file - cert: fs.readFileSync("mkcert+1.pem"), // Path to certificate file - }, - }, - plugins: [ - react(), - wasm(), - topLevelAwait(), - VitePWA({ - registerType: "autoUpdate", - devOptions: { - enabled: mode === 'development' - }, - workbox: { - maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5 MB - }, - includeAssets: [ - "icons/logo.png", - "screenshots/loading.png", - "screenshots/home.png", - "screenshots/store.png", - "screenshots/leaderboard.png" - ], - manifest: { - name: "Golem Runner", - short_name: "Golem", - description: - "A captivating endless runner where elemental golems dash through magical realms. This game combines fun gameplay with powerful blockchain technology!", - start_url: "/", - display: "standalone", - lang: "en-US", - theme_color: "#000000", - background_color: "#000000", - orientation: "any", - icons: [ - { - src: "/icons/logo.png", - sizes: "192x192", - type: "image/png", - purpose: "any maskable" - }, - { - src: "/icons/logo.png", - sizes: "192x192", - type: "image/png", - purpose: "any" - } - ], - screenshots: [ - { - src: "/screenshots/loading.png", - sizes: "822x1664", - type: "image/png", - }, - { - src: "/screenshots/home.png", - sizes: "822x1664", - type: "image/png", - }, - { - src: "/screenshots/store.png", - sizes: "822x1664", - type: "image/png", +export default defineConfig(({ command }) => { + const isDev = command === 'serve'; + const isLocalHttps = process.env.VITE_LOCAL_HTTPS === 'true'; + + // Conditionally load HTTPS certs in development + const getHttpsConfig = () => { + if (!isDev || !isLocalHttps) return {}; + + const keyPath = path.resolve('./mkcert+1-key.pem'); + const certPath = path.resolve('./mkcert+1.pem'); + + try { + if (fs.existsSync(keyPath) && fs.existsSync(certPath)) { + return { + https: { + key: fs.readFileSync(keyPath), + cert: fs.readFileSync(certPath), }, - { - src: "/screenshots/leaderboard.png", - sizes: "822x1664", - type: "image/png", - } - ], - shortcuts: [ - { - name: "Play Now", - short_name: "Play", - description: "Start a new run with your golem.", - url: "/play" - } - ], + }; } - }) - ], -})); + } catch (err) { + console.warn('⚠️ Error reading HTTPS certificates. Falling back to HTTP.'); + } + + return {}; + }; + + return { + server: { + port: 3001, + ...getHttpsConfig(), + ...(isDev && { + host: true, + cors: true, + }), + }, + + define: { + global: 'globalThis', + }, + + optimizeDeps: { + include: ['buffer'], + }, + + plugins: [ + react(), + wasm(), + topLevelAwait(), + VitePWA({ + registerType: "autoUpdate", + devOptions: { + enabled: isDev, + }, + workbox: { + maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, + }, + includeAssets: [ + "icons/logo.png", + "screenshots/loading.png", + "screenshots/home.png", + "screenshots/store.png", + "screenshots/leaderboard.png", + ], + manifest: { + name: "Golem Runner", + short_name: "Golem", + description: "A captivating endless runner where elemental golems dash through magical realms. This game combines fun gameplay with powerful blockchain technology!", + start_url: "/", + display: "standalone", + lang: "en-US", + theme_color: "#000000", + background_color: "#000000", + orientation: "any", + icons: [ + { + src: "/icons/logo.png", + sizes: "192x192", + type: "image/png", + purpose: "any maskable", + }, + { + src: "/icons/logo.png", + sizes: "192x192", + type: "image/png", + purpose: "any", + }, + ], + screenshots: [ + { src: "/screenshots/loading.png", sizes: "822x1664", type: "image/png" }, + { src: "/screenshots/home.png", sizes: "822x1664", type: "image/png" }, + { src: "/screenshots/store.png", sizes: "822x1664", type: "image/png" }, + { src: "/screenshots/leaderboard.png", sizes: "822x1664", type: "image/png" }, + ], + shortcuts: [ + { + name: "Play Now", + short_name: "Play", + description: "Start a new run with your golem.", + url: "/play", + }, + ], + }, + }), + ], + }; +}); From 3642794d6ad4853ab590987f4b0b6fa16b1cb354 Mon Sep 17 00:00:00 2001 From: jimenezz22 Date: Sun, 22 Jun 2025 00:16:16 -0600 Subject: [PATCH 2/2] fix: update mkcert command to use new key and certificate filenames --- client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/package.json b/client/package.json index 98319e4..86de875 100644 --- a/client/package.json +++ b/client/package.json @@ -14,7 +14,7 @@ "dev:https": "VITE_LOCAL_HTTPS=true vite", "dev:http": "VITE_LOCAL_HTTPS=false vite", "preview:https": "VITE_LOCAL_HTTPS=true vite preview", - "mkcert": "mkcert -key-file dev-key.pem -cert-file dev.pem localhost 127.0.0.1 ::1" + "mkcert": "mkcert -key-file mkcert+1-key.pem -cert-file mkcert+1.pem localhost 127.0.0.1 ::1" }, "dependencies": { "@cartridge/connector": "0.5.9",