From 7b344d56291be0ef9869069ec3d3d448cf9fd10f Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin"
 <4000772+mcmonkey4eva@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:01:23 +0900
Subject: [PATCH] Fix routing (#939)

* reinstate working routing code and remove broken code

* forward object_info

* remove object_info bit
---
 .env_example       |  8 --------
 src/config.ts      |  3 +--
 src/router.ts      |  3 +--
 src/scripts/api.ts | 12 +++++++-----
 vite.config.mts    |  8 ++++++--
 5 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/.env_example b/.env_example
index e6d2e2f71..3ddf31fa2 100644
--- a/.env_example
+++ b/.env_example
@@ -17,11 +17,3 @@ EXAMPLE_REPO_PATH=tests-ui/ComfyUI_examples
 
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true
-
-# ------ ViteJS related env variables ------
-# Note: the VITE_ prefix is required
-
-# Frontend base URL
-# Note: default / is for http://localhost:5173/
-# Example: /foobar/ will be served as http://localhost:5173/foobar/
-VITE_BASE_URL=
diff --git a/src/config.ts b/src/config.ts
index 02b60adc8..adae026c1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,4 @@
 export default {
   app_title: 'ComfyUI',
-  app_version: __COMFYUI_FRONTEND_VERSION__,
-  base_url: import.meta.env.VITE_BASE_URL
+  app_version: __COMFYUI_FRONTEND_VERSION__
 }
diff --git a/src/router.ts b/src/router.ts
index e568503fc..56a61cf9f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,9 +1,8 @@
-import config from '@/config'
 import { createRouter, createWebHistory } from 'vue-router'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 const router = createRouter({
-  history: createWebHistory(config.base_url),
+  history: createWebHistory(window.location.pathname),
   routes: [
     {
       path: '/',
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index de250bc79..8b431c12c 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -33,6 +33,7 @@ interface QueuePromptRequestBody {
 class ComfyApi extends EventTarget {
   #registered = new Set()
   api_host: string
+  api_base: string
   initialClientId: string
   user: string
   socket?: WebSocket
@@ -42,21 +43,22 @@ class ComfyApi extends EventTarget {
 
   constructor() {
     super()
-    this.api_host = window.location.host
+    this.api_host = location.host
+    this.api_base = location.pathname.split('/').slice(0, -1).join('/')
     console.log('Running on', this.api_host)
     this.initialClientId = sessionStorage.getItem('clientId')
   }
 
   internalURL(route: string): string {
-    return '/internal' + route
+    return this.api_base + '/internal' + route
   }
 
   apiURL(route: string): string {
-    return '/api' + route
+    return this.api_base + '/api' + route
   }
 
   fileURL(route: string): string {
-    return route
+    return this.api_base + route
   }
 
   fetchApi(route: string, options?: RequestInit) {
@@ -112,7 +114,7 @@ class ComfyApi extends EventTarget {
       existingSession = '?clientId=' + existingSession
     }
     this.socket = new WebSocket(
-      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}/ws${existingSession}`
+      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}${this.api_base}/ws${existingSession}`
     )
     this.socket.binaryType = 'arraybuffer'
 
diff --git a/vite.config.mts b/vite.config.mts
index 062623f49..d6fc42e63 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -90,10 +90,9 @@ function getModuleName(id: string): string {
 }
 
 const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
-const VITE_BASE_URL = process.env.VITE_BASE_URL || '/'
 
 export default defineConfig({
-  base: VITE_BASE_URL,
+  base: '',
   server: {
     proxy: {
       '/internal': {
@@ -115,6 +114,11 @@ export default defineConfig({
       '/ws': {
         target: DEV_SERVER_COMFYUI_URL,
         ws: true
+      },
+
+      '/testsubrouteindex': {
+        target: 'http://localhost:5173',
+        rewrite: (path) => path.substring('/testsubrouteindex'.length)
       }
     }
   },