From fada6d2b00a6044b3ca9fcb625dc41d090841444 Mon Sep 17 00:00:00 2001
From: jimenezz22 <ljimenezbogantes@gmail.com>
Date: Tue, 17 Jun 2025 15:13:49 -0600
Subject: [PATCH] feat: Add dinamic HTTPS support based on the enviroment

---
 client/.env.example   |  3 +++
 client/.gitignore     |  2 ++
 client/README.md      |  2 +-
 client/package.json   |  5 +++-
 client/vite.config.ts | 60 ++++++++++++++++++++++++++++++-------------
 5 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/client/.env.example b/client/.env.example
index dbacade..f002125 100644
--- a/client/.env.example
+++ b/client/.env.example
@@ -6,6 +6,9 @@ VITE_PUBLIC_MASTER_ADDRESS=YOUR_MASTER_ADDRESS
 VITE_PUBLIC_MASTER_PRIVATE_KEY=YOUR_MASTER_PRIVATE_KEY
 VITE_PUBLIC_SLOT_ADDRESS=YOUR_KATANA_ADDRESS
 
+# Local HTTPS
+VITE_LOCAL_HTTPS=YOUR_LOCAL_HTTPS # true or false
+
 # PostHog Config
 VITE_POSTHOG_API_KEY="YOUR__POSTHOG_KEY"
 VITE_POSTHOG_HOST="YOUR_HOST"
diff --git a/client/.gitignore b/client/.gitignore
index 3b122e9..9496138 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -23,6 +23,8 @@ dev-key.pem
 dev.pem
 localhost*.pem
 localhost*-key.pem
+mkcert+1-key.pem
+mkcert+1.pem
 
 # Editor directories and files
 .vscode/*
diff --git a/client/README.md b/client/README.md
index eff9301..a25f44a 100644
--- a/client/README.md
+++ b/client/README.md
@@ -12,7 +12,7 @@
 ```bash
 git clone https://github.com/your-username/dojo-game-starter
 cd dojo-game-starter/client
-npm install && npm run mkcert && npm run dev
+npm install && npm run mkcert && npm run dev:https
 ```
 
 **That's it!** Your onchain game is running locally with wallet integration, optimistic updates, and seamless blockchain connectivity.
diff --git a/client/package.json b/client/package.json
index cd59bee..a5b46cc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -5,13 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:https": "VITE_LOCAL_HTTPS=true vite",
+    "dev:http": "VITE_LOCAL_HTTPS=false vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
+    "preview:https": "VITE_LOCAL_HTTPS=true vite preview",
     "serve": "vite preview",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
-    "mkcert": "mkcert -key-file dev-key.pem -cert-file dev.pem localhost"
+    "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 6140b4c..616cefa 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -3,25 +3,49 @@ import { defineConfig } from "vite";
 import topLevelAwait from "vite-plugin-top-level-await";
 import wasm from "vite-plugin-wasm";
 import fs from "fs";
+import path from "path";
 
-export default defineConfig({
-  plugins: [react(), wasm(), topLevelAwait()],
-  server: {
-    port: 3002,
-    https: {
-      key: fs.readFileSync("dev-key.pem"),
-      cert: fs.readFileSync("dev.pem"),
+export default defineConfig(({ command }) => {
+  const isDev = command === 'serve';
+  const isLocalHttps = process.env.VITE_LOCAL_HTTPS === 'true';
+
+  const getHttpsConfig = () => {
+    if (!isDev || !isLocalHttps) return {};
+    
+    const keyPath = path.resolve('./dev-key.pem');
+    const certPath = path.resolve('./dev.pem');
+    
+    try {
+      if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
+        return {
+          https: {
+            key: fs.readFileSync(keyPath),
+            cert: fs.readFileSync(certPath),
+          }
+        };
+      }
+    } catch (error) {
+      console.warn('⚠️  Error reading HTTPS certificates. Using HTTP.');
+    }
+    
+    return {};
+  };
+
+  return {
+    plugins: [react(), wasm(), topLevelAwait()],
+    server: {
+      port: 3002,
+      ...getHttpsConfig(),
+      ...(isDev && {
+        host: true,
+        cors: true,
+      }),
+    },
+    define: {
+      global: 'globalThis',
     },
-  },
-  define: {
-    global: 'globalThis',
-  },
-  resolve: {
-    alias: {
-      buffer: 'buffer',
+    optimizeDeps: {
+      include: ['buffer'],
     },
-  },
-  optimizeDeps: {
-    include: ['buffer'],
-  },
+  };
 });