From 9c7ea5bd8720caef5318649f6139a17cc4200462 Mon Sep 17 00:00:00 2001
From: ArtificialLab <2308123+dmx974@users.noreply.github.com>
Date: Mon, 23 Sep 2024 07:09:10 +0400
Subject: [PATCH] Fix routing (#929)

* fix router and move graph related parts to GraphView.vue

* (fix) add back child element in UnloadWindowConfirmDialog

* (cleanup) remove empty callback

* (fix) routing issue when base url is not webroot

* add back DEV_SERVER_COMFYUI_URL
---
 .env_example               | 10 +++++++++-
 src/config.ts              |  3 ++-
 src/router.ts              |  3 ++-
 src/scripts/api.ts         | 13 ++++++-------
 src/stores/nodeDefStore.ts |  2 +-
 vite.config.mts            |  3 ++-
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/.env_example b/.env_example
index 79971384d..e6d2e2f71 100644
--- a/.env_example
+++ b/.env_example
@@ -16,4 +16,12 @@ DEPLOY_COMFYUI_DIR=/home/ComfyUI/web
 EXAMPLE_REPO_PATH=tests-ui/ComfyUI_examples
 
 # Whether to enable minification of the frontend code.
-ENABLE_MINIFY=true
\ No newline at end of file
+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 adae026c1..02b60adc8 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,5 @@
 export default {
   app_title: 'ComfyUI',
-  app_version: __COMFYUI_FRONTEND_VERSION__
+  app_version: __COMFYUI_FRONTEND_VERSION__,
+  base_url: import.meta.env.VITE_BASE_URL
 }
diff --git a/src/router.ts b/src/router.ts
index b20e825e4..e568503fc 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,8 +1,9 @@
+import config from '@/config'
 import { createRouter, createWebHistory } from 'vue-router'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHistory(config.base_url),
   routes: [
     {
       path: '/',
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index e53a67c8a..f83cb488b 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -33,7 +33,6 @@ interface QueuePromptRequestBody {
 class ComfyApi extends EventTarget {
   #registered = new Set()
   api_host: string
-  api_base: string
   initialClientId: string
   user: string
   socket?: WebSocket
@@ -43,21 +42,21 @@ class ComfyApi extends EventTarget {
 
   constructor() {
     super()
-    this.api_host = location.host
-    this.api_base = location.pathname.split('/').slice(0, -1).join('/')
+    this.api_host = window.location.host
+    console.log('Running on', this.api_host)
     this.initialClientId = sessionStorage.getItem('clientId')
   }
 
   internalURL(route: string): string {
-    return this.api_base + '/internal' + route
+    return '/internal' + route
   }
 
   apiURL(route: string): string {
-    return this.api_base + '/api' + route
+    return '/api' + route
   }
 
   fileURL(route: string): string {
-    return this.api_base + route
+    return route
   }
 
   fetchApi(route: string, options?: RequestInit) {
@@ -113,7 +112,7 @@ class ComfyApi extends EventTarget {
       existingSession = '?clientId=' + existingSession
     }
     this.socket = new WebSocket(
-      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}${this.api_base}/ws${existingSession}`
+      `ws${window.location.protocol === 'https:' ? 's' : ''}://${this.api_host}/ws${existingSession}`
     )
     this.socket.binaryType = 'arraybuffer'
 
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index df2f7a157..3bd00fc3c 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -368,7 +368,7 @@ export const useNodeFrequencyStore = defineStore('nodeFrequency', () => {
   const loadNodeFrequencies = async () => {
     if (!isLoaded.value) {
       try {
-        const response = await axios.get('/assets/sorted-custom-node-map.json')
+        const response = await axios.get('assets/sorted-custom-node-map.json')
         nodeFrequencyLookup.value = response.data
         isLoaded.value = true
       } catch (error) {
diff --git a/vite.config.mts b/vite.config.mts
index 749b12d64..062623f49 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -90,9 +90,10 @@ 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: '',
+  base: VITE_BASE_URL,
   server: {
     proxy: {
       '/internal': {