From 76ea82a649ca08620837ede38c83a88abe6c75fb Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Sun, 26 Apr 2026 21:15:59 +0700
Subject: [PATCH] fix(dev): read .env.local in vite + svelte configs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Symptom: 'Blocked request. This host (codeserver.sg.miti99.com) is not
allowed.' — the configs were reading process.env.CODESERVER_HOST, which
is empty at config-eval time because Vite reads .env.local at runtime,
not into process.env.

Switch both vite.config.js and svelte.config.js to use loadEnv() from
vite, which reads .env.local explicitly. Also lift allowedHosts out of
the codeserver profile so plain `npm run dev` is also reachable from
the codeserver proxy when CODESERVER_HOST is set in .env.local.
---
 web/svelte.config.js |  9 +++++++--
 web/vite.config.js   | 46 ++++++++++++++++++++++++++------------------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/svelte.config.js b/web/svelte.config.js
index 408795a..c94c11f 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -1,18 +1,23 @@
 import adapter from "@sveltejs/adapter-static";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { loadEnv } from "vite";
 
 const profile = process.env.BUILD_PROFILE;
 const isCodeserver = process.env.VITE_DEV_PROFILE === "codeserver";
 
+// Same env-loading concern as vite.config.js — .env.local isn't in
+// process.env at config-eval time. loadEnv reads it.
+const env = loadEnv(process.env.NODE_ENV ?? "development", process.cwd(), "");
+
 // basePath resolution:
-//   1. NEXT_BASE_PATH (kept name for consistency with prior config; treated as opaque override)
+//   1. NEXT_BASE_PATH — explicit override (escape hatch)
 //   2. codeserver dev → /absproxy/{port}
 //   3. BUILD_PROFILE=gh → /loto
 //   4. default (CF Pages root, local dev) → ""
 function resolveBase() {
   if (process.env.NEXT_BASE_PATH != null) return process.env.NEXT_BASE_PATH;
   if (isCodeserver) {
-    const port = process.env.CODESERVER_PORT ?? "3000";
+    const port = env.CODESERVER_PORT ?? "3000";
     return `/absproxy/${port}`;
   }
   if (profile === "gh") return "/loto";
diff --git a/web/vite.config.js b/web/vite.config.js
index 168020e..53bd1d8 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -1,26 +1,34 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
+import { defineConfig, loadEnv } from "vite";
 
-const isCodeserver = process.env.VITE_DEV_PROFILE === "codeserver";
-const host = process.env.CODESERVER_HOST;
-const port = Number(process.env.CODESERVER_PORT ?? 3000);
+export default defineConfig(({ mode }) => {
+  // .env.local lives outside process.env at config-eval time; loadEnv reads it.
+  const env = loadEnv(mode, process.cwd(), "");
+  const isCodeserver = process.env.VITE_DEV_PROFILE === "codeserver";
+  const host = env.CODESERVER_HOST;
+  const port = Number(env.CODESERVER_PORT ?? 3000);
 
-const codeserverServer = host
-  ? {
+  return {
+    plugins: [tailwindcss(), sveltekit()],
+    server: {
       port,
       host: true,
       strictPort: true,
-      allowedHosts: [host],
-      hmr: {
-        host,
-        protocol: "wss",
-        clientPort: 443,
-        path: `/absproxy/${port}/`,
-      },
-    }
-  : { port: 3000, host: true };
-
-export default {
-  plugins: [tailwindcss(), sveltekit()],
-  server: isCodeserver ? codeserverServer : { port: 3000 },
-};
+      // Always allow the codeserver host if .env.local sets one — covers
+      // both `npm run dev` (no proxy config) and `npm run dev:codeserver`.
+      ...(host ? { allowedHosts: [host] } : {}),
+      // HMR through the proxy only in the explicit codeserver profile.
+      ...(isCodeserver && host
+        ? {
+            hmr: {
+              host,
+              protocol: "wss",
+              clientPort: 443,
+              path: `/absproxy/${port}/`,
+            },
+          }
+        : {}),
+    },
+  };
+});