[FEAT] Add dinamic HTTPS support based on the enviroment

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"

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/*

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.

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",

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'],
-  },
+  };
 });