From 1a317c14ab76dbd54e5ce2e0945a3d8ef13c0e67 Mon Sep 17 00:00:00 2001
From: bernardhanna <bernard@matrixinternet.ie>
Date: Sat, 22 Mar 2025 18:58:59 +0000
Subject: [PATCH] Fix Vite config to use .env and support local HTTPS in dev

---
 vite.config.js | 108 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 38 deletions(-)

diff --git a/vite.config.js b/vite.config.js
index 05a4c2848..ff465d0e2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,49 +1,81 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
 import i18n from 'laravel-vue-i18n/vite';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
+import fs from 'fs';
+import path from 'path';
 
-export default defineConfig({
-    plugins: [
-        vue({
-            template: {
-                transformAssetUrls: {
-                    base: null,
-                    includeAbsolute: false,
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const isLocal = mode === 'development';
+    const domain = env.APP_URL || 'localhost';
+
+    const certPath = path.resolve(process.env.HOME, `.config/valet/Certificates/${domain}.crt`);
+    const keyPath = path.resolve(process.env.HOME, `.config/valet/Certificates/${domain}.key`);
+
+    const config = {
+        plugins: [
+            vue({
+                template: {
+                    transformAssetUrls: {
+                        base: null,
+                        includeAbsolute: false,
+                    },
                 },
+            }),
+            laravel({
+                input: [
+                    'resources/assets/sass/app.scss',
+                    'resources/css/app.css',
+                    'resources/js/app.js',
+                ],
+                refresh: true,
+            }),
+            i18n('resources/lang')
+        ],
+        css: {
+            postcss: {
+                plugins: [tailwindcss, autoprefixer],
             },
-        }),
-        laravel({
-            input: [
-                'resources/assets/sass/app.scss',
-                'resources/css/app.css',
-                'resources/js/app.js',
-            ],
-            refresh: true,
-        }),
-        i18n('resources/lang')
-    ],
-    css: {
-        postcss: {
-            plugins: [
-                tailwindcss,  // Tailwind CSS
-                autoprefixer, // Autoprefixer
-            ],
         },
-    },
-    resolve: {
-        alias: {
-            '@': '/resources/js',
-            'vue': 'vue/dist/vue.esm-bundler.js',
+        resolve: {
+            alias: {
+                '@': '/resources/js',
+                vue: 'vue/dist/vue.esm-bundler.js',
+            },
+        },
+        define: {
+            global: 'window',
+        },
+        esbuild: {
+            jsxFactory: 'h',
+            jsxFragment: 'Fragment',
         },
-    },
-    define: {
-        global: 'window',  // Fix `crypto.getRandomValues` issue
-    },
-    esbuild: {
-        jsxFactory: 'h',
-        jsxFragment: 'Fragment',
-    },
+    };
+
+    if (isLocal && fs.existsSync(certPath) && fs.existsSync(keyPath)) {
+        config.server = {
+            host: domain,
+            port: 5174,
+            https: {
+                key: fs.readFileSync(keyPath),
+                cert: fs.readFileSync(certPath),
+            },
+            hmr: {
+                host: domain,
+                protocol: 'wss',
+            },
+            cors: true,
+        };
+    } else if (isLocal) {
+        config.server = {
+            host: domain,
+            port: 5174,
+            cors: true,
+        };
+    }
+
+    return config;
 });