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

@@ -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
+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=

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
 }

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: '/',

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'
 

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) {

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': {