From 69bed888b4b5f317212147f4b0aeffab7108037c Mon Sep 17 00:00:00 2001
From: 4cello <32751308+4cello@users.noreply.github.com>
Date: Sat, 27 Apr 2024 15:46:48 +0200
Subject: [PATCH] feat: Connect to Moonraker via subdirectory/path (#1836)

Co-authored-by: Stefan Dej <meteyou@gmail.com>
---
 .env.development.local.example                |  3 +
 public/config.json                            |  1 +
 src/components/TheConnectingDialog.vue        |  8 +-
 src/components/TheSelectPrinterDialog.vue     | 92 +++++++++++++++----
 .../settings/SettingsRemotePrintersTab.vue    | 28 ++++--
 src/locales/en.json                           |  2 +
 src/store/actions.ts                          |  1 +
 src/store/farm/index.ts                       |  1 +
 src/store/farm/printer/getters.ts             | 16 +++-
 src/store/farm/printer/index.ts               |  1 +
 src/store/farm/printer/types.ts               |  1 +
 src/store/gui/remoteprinters/actions.ts       |  4 +
 src/store/gui/remoteprinters/types.ts         |  1 +
 src/store/socket/actions.ts                   |  5 +-
 src/store/socket/getters.ts                   |  9 +-
 src/store/socket/index.ts                     |  2 +
 src/store/socket/types.ts                     |  1 +
 src/store/types.ts                            |  2 +
 18 files changed, 149 insertions(+), 29 deletions(-)

diff --git a/.env.development.local.example b/.env.development.local.example
index a818e9f67..c66b2044f 100644
--- a/.env.development.local.example
+++ b/.env.development.local.example
@@ -4,6 +4,9 @@ VUE_APP_HOSTNAME=printer.local
 # port from the moonraker instance
 VUE_APP_PORT=7125
 
+# route_prefix from the moonraker instance
+VUE_APP_PATH="/"
+
 # reconnect interval in ms
 VUE_APP_RECONNECT_INTERVAL=5000
 
diff --git a/public/config.json b/public/config.json
index cdc1db4a6..9dd1d5a8d 100644
--- a/public/config.json
+++ b/public/config.json
@@ -3,6 +3,7 @@
     "defaultTheme": "dark",
     "hostname": null,
     "port": null,
+    "path": null,
     "instancesDB": "moonraker",
     "instances": []
 }
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index 190dd478f..29cad445b 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -65,8 +65,14 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.$store.state.socket.port
     }
 
+    get path() {
+        return this.$store.state.socket.path
+    }
+
     get formatHostname() {
-        return parseInt(this.port) !== 80 && this.port !== '' ? this.hostname + ':' + this.port : this.hostname
+        return parseInt(this.port) !== 80 && this.port !== ''
+            ? this.hostname + ':' + this.port + this.path
+            : this.hostname + this.path
     }
 
     get isConnecting() {
diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue
index 8e82c03c6..235bf2624 100644
--- a/src/components/TheSelectPrinterDialog.vue
+++ b/src/components/TheSelectPrinterDialog.vue
@@ -1,5 +1,3 @@
-<style scoped></style>
-
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
         <panel
@@ -34,7 +32,7 @@
             </template>
             <template v-if="isConnecting || (isConnected && !guiIsReady)">
                 <v-card-text>
-                    <v-progress-linear color="primary" indeterminate></v-progress-linear>
+                    <v-progress-linear color="primary" indeterminate />
                 </v-card-text>
             </template>
             <template v-else-if="connectingFailed">
@@ -70,7 +68,7 @@
                                     required
                                     outlined
                                     hide-details="auto"
-                                    dense></v-text-field>
+                                    dense />
                             </v-col>
                             <v-col class="col-4">
                                 <v-text-field
@@ -80,12 +78,30 @@
                                     hide-details="auto"
                                     required
                                     outlined
-                                    dense></v-text-field>
+                                    dense />
+                            </v-col>
+                        </v-row>
+                        <v-row v-if="showOptionalSettings">
+                            <v-col class="col-12">
+                                <v-text-field
+                                    v-model="dialogAddPrinter.path"
+                                    :rules="[(v) => !v || v.startsWith('/') || 'Path must start with /']"
+                                    :label="$t('SelectPrinterDialog.Path')"
+                                    hide-details="auto"
+                                    outlined
+                                    dense />
                             </v-col>
                         </v-row>
                     </v-card-text>
                     <v-card-actions>
-                        <v-spacer></v-spacer>
+                        <v-checkbox
+                            v-model="showOptionalSettings"
+                            class="ml-2"
+                            :on-icon="mdiShowOptional"
+                            :off-icon="mdiHideOptional"
+                            :true-value="false"
+                            :false-value="true" />
+                        <v-spacer />
                         <v-btn color="primary" text class="middle" type="submit" :disabled="!addPrinterValid">
                             {{ $t('SelectPrinterDialog.AddPrinter') }}
                         </v-btn>
@@ -108,7 +124,7 @@
                                     required
                                     outlined
                                     dense
-                                    hide-details="auto"></v-text-field>
+                                    hide-details="auto" />
                             </v-col>
                             <v-col class="col-4">
                                 <v-text-field
@@ -118,7 +134,18 @@
                                     required
                                     outlined
                                     dense
-                                    hide-details="auto"></v-text-field>
+                                    hide-details="auto" />
+                            </v-col>
+                        </v-row>
+                        <v-row v-if="showOptionalSettings">
+                            <v-col class="col-12">
+                                <v-text-field
+                                    v-model="dialogEditPrinter.path"
+                                    :rules="[(v) => !v || v.startsWith('/') || 'Path must start with /']"
+                                    :label="$t('SelectPrinterDialog.Path')"
+                                    hide-details="auto"
+                                    outlined
+                                    dense />
                             </v-col>
                         </v-row>
                     </v-card-text>
@@ -126,7 +153,14 @@
                         <v-btn color="red" icon tile class="minwidth-0 rounded" @click="delPrinter">
                             <v-icon small>{{ mdiDelete }}</v-icon>
                         </v-btn>
-                        <v-spacer></v-spacer>
+                        <v-checkbox
+                            v-model="showOptionalSettings"
+                            class="ml-2"
+                            :on-icon="mdiShowOptional"
+                            :off-icon="mdiHideOptional"
+                            :true-value="false"
+                            :false-value="true" />
+                        <v-spacer />
                         <v-btn color="primary" text type="submit" :disabled="!editPrinterValid">
                             {{ $t('SelectPrinterDialog.UpdatePrinter') }}
                         </v-btn>
@@ -149,7 +183,7 @@
                                                 indeterminate
                                                 color="primary"
                                                 size="24"
-                                                width="2.5"></v-progress-circular>
+                                                width="2.5" />
                                             <v-icon
                                                 v-if="!printer.socket.isConnecting"
                                                 :color="printer.socket.isConnected ? 'green' : 'red'">
@@ -225,6 +259,8 @@ import {
     mdiCloseThick,
     mdiConnection,
     mdiDelete,
+    mdiCog,
+    mdiCogOff,
     mdiPencil,
     mdiSync,
 } from '@mdi/js'
@@ -233,19 +269,22 @@ import {
     components: { Panel },
 })
 export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
-    private addPrinterValid = false
-    private dialogAddPrinter = {
+    addPrinterValid = false
+    dialogAddPrinter = {
         bool: false,
         hostname: '',
         port: 7125,
+        path: '/',
     }
-    private editPrinterValid = false
-    private dialogEditPrinter = {
+    editPrinterValid = false
+    dialogEditPrinter = {
         bool: false,
         id: '',
         hostname: '',
         port: 0,
+        path: '/',
     }
+    showOptionalSettings = false
 
     /**
      * Icons
@@ -257,6 +296,8 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
     mdiPencil = mdiPencil
     mdiCheckboxMarkedCircle = mdiCheckboxMarkedCircle
     mdiCancel = mdiCancel
+    mdiShowOptional = mdiCog
+    mdiHideOptional = mdiCogOff
 
     get printers() {
         return this.$store.getters['gui/remoteprinters/getRemoteprinters'] ?? []
@@ -282,8 +323,12 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         return this.$store.state.socket.port
     }
 
+    get path() {
+        return this.$store.state.socket.path
+    }
+
     get formatHostname() {
-        return parseInt(this.port) !== 80 && this.port !== '' ? this.hostname + ':' + this.port : this.hostname
+        return this.hostname + (this.port !== '' ? ':' + this.port : '') + (this.path !== '' ? this.path : '')
     }
 
     get isConnected() {
@@ -345,17 +390,20 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         const values = {
             hostname: this.dialogAddPrinter.hostname,
             port: this.dialogAddPrinter.port,
+            path: this.dialogAddPrinter.path,
         }
         this.$store.dispatch('gui/remoteprinters/store', { values })
 
         this.dialogAddPrinter.hostname = ''
         this.dialogAddPrinter.bool = false
+        this.dialogAddPrinter.path = '/'
     }
 
     editPrinter(printer: GuiRemoteprintersStatePrinter) {
         this.dialogEditPrinter.hostname = printer.hostname
         this.dialogEditPrinter.port = printer.port
         this.dialogEditPrinter.id = printer.id ?? ''
+        this.dialogEditPrinter.path = printer.path ?? '/'
         this.dialogEditPrinter.bool = true
     }
 
@@ -363,6 +411,8 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         const values = {
             hostname: this.dialogEditPrinter.hostname,
             port: this.dialogEditPrinter.port,
+            path: this.dialogEditPrinter.path,
+            id: this.dialogEditPrinter.id,
         }
         this.$store.dispatch('gui/remoteprinters/update', {
             id: this.dialogEditPrinter.id,
@@ -381,8 +431,18 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         this.$store.dispatch('socket/setData', {
             hostname: printer.socket.hostname,
             port: printer.socket.port,
+            path: printer.socket.path,
         })
-        this.$socket.setUrl(this.protocol + '://' + printer.socket.hostname + ':' + printer.socket.port + '/websocket')
+        const normPath = printer.socket.path.replaceAll(/(^\/*)|(\/*$)/g, '')
+        const url =
+            this.protocol +
+            '://' +
+            printer.socket.hostname +
+            ':' +
+            printer.socket.port +
+            (normPath.length > 0 ? `/${normPath}` : '') +
+            '/websocket'
+        this.$socket.setUrl(url)
         this.$socket.connect()
     }
 
diff --git a/src/components/settings/SettingsRemotePrintersTab.vue b/src/components/settings/SettingsRemotePrintersTab.vue
index be8c806e6..c15ec255d 100644
--- a/src/components/settings/SettingsRemotePrintersTab.vue
+++ b/src/components/settings/SettingsRemotePrintersTab.vue
@@ -7,7 +7,7 @@
                     {{ $t('Settings.RemotePrintersTab.UseConfigJson') }}
                 </v-alert>
                 <div v-for="(printer, index) in printers" :key="printer.id">
-                    <v-divider v-if="index" class="my-2"></v-divider>
+                    <v-divider v-if="index" class="my-2" />
                     <settings-row
                         :title="formatPrinterName(printer)"
                         :loading="printer.socket.isConnecting"
@@ -54,9 +54,9 @@
                         hide-details="auto"
                         required
                         dense
-                        outlined></v-text-field>
+                        outlined />
                 </settings-row>
-                <v-divider class="my-2"></v-divider>
+                <v-divider class="my-2" />
                 <settings-row :title="$t('Settings.RemotePrintersTab.Port')">
                     <v-text-field
                         v-model="form.port"
@@ -64,7 +64,16 @@
                         hide-details="auto"
                         required
                         dense
-                        outlined></v-text-field>
+                        outlined />
+                </settings-row>
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.RemotePrintersTab.Path')">
+                    <v-text-field
+                        v-model="form.path"
+                        :rules="[(v) => !v || v.startsWith('/') || 'Path must start with /']"
+                        hide-details="auto"
+                        outlined
+                        dense />
                 </settings-row>
             </v-card-text>
             <v-card-actions class="d-flex justify-end">
@@ -91,6 +100,7 @@ interface printerForm {
     bool: boolean
     hostname: string
     port: number
+    path: string | null
     id: string | null
     namespace: string | null
 }
@@ -105,10 +115,11 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
     mdiDelete = mdiDelete
     mdiAlertOutline = mdiAlertOutline
 
-    private form: printerForm = {
+    form: printerForm = {
         bool: false,
         hostname: '',
         port: 7125,
+        path: '/',
         id: null,
         namespace: null,
     }
@@ -126,12 +137,13 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
     }
 
     formatPrinterName(printer: GuiRemoteprintersStatePrinter) {
-        return printer.hostname + (printer.port !== 80 ? ':' + printer.port : '')
+        return printer.hostname + (printer.port !== 80 ? ':' + printer.port : '') + (printer.path ?? '')
     }
 
     createPrinter() {
         this.form.hostname = ''
         this.form.port = 7125
+        this.form.path = '/'
         this.form.id = null
         this.form.namespace = null
         this.form.bool = true
@@ -141,6 +153,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         const printer = {
             hostname: this.form.hostname,
             port: this.form.port,
+            path: this.form.path,
         }
 
         this.$store.dispatch('gui/remoteprinters/store', { values: printer })
@@ -155,6 +168,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         this.form.id = printer.id ?? null
         this.form.hostname = printer.hostname
         this.form.port = printer.port
+        this.form.path = printer.path ?? '/'
         this.form.bool = true
     }
 
@@ -162,6 +176,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         const values = {
             hostname: this.form.hostname,
             port: this.form.port,
+            path: this.form.path,
         }
 
         this.$store.dispatch('gui/remoteprinters/update', { id: this.form.id, values })
@@ -169,6 +184,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         this.form.id = null
         this.form.hostname = ''
         this.form.port = 7125
+        this.form.path = '/'
         this.form.bool = false
     }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 4b4ebe337..03afbabeb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -832,6 +832,7 @@
         "HostnameInvalid": "invalid Hostname/IP",
         "HostnameIp": "Hostname/IP",
         "HostnameRequired": "Hostname is required",
+        "Path": "Path",
         "Port": "Port",
         "PortRequired": "Port is required",
         "RememberToAdd": "Please remember to add '{cors}' in moonraker.conf within 'cors_domains'.",
@@ -1065,6 +1066,7 @@
             "AddPrinter": "Add Printer",
             "EditPrinter": "Edit Printer",
             "Hostname": "Hostname",
+            "Path": "Path",
             "Port": "Port",
             "RemotePrinters": "Printers",
             "UpdatePrinter": "Update Printer",
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 07197c4d5..ba07f8d86 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -52,5 +52,6 @@ export const actions: ActionTree<RootState, RootState> = {
 
         if (payload.hostname) commit('socket/setData', { hostname: payload.hostname })
         if (payload.port) commit('socket/setData', { port: parseInt(payload.port.toString()) })
+        if (payload.path) commit('socket/setData', { route_prefix: payload.path })
     },
 }
diff --git a/src/store/farm/index.ts b/src/store/farm/index.ts
index 4aea8bce5..55a3e3446 100644
--- a/src/store/farm/index.ts
+++ b/src/store/farm/index.ts
@@ -52,6 +52,7 @@ export const farm: Module<FarmState, RootState> = {
             commit(payload.id + '/setSocketData', {
                 hostname: payload.values.hostname,
                 port: payload.values.port,
+                path: payload.values.path,
                 isConnecting: true,
             })
             dispatch(payload.id + '/reconnect')
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index 2c425fc85..7f9fd8631 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -7,7 +7,9 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 // eslint-disable-next-line
 export const getters: GetterTree<FarmPrinterState, any> = {
     getSocketUrl: (state) => {
-        return state.socket.protocol + '://' + state.socket.hostname + ':' + state.socket.port + '/websocket'
+        const normPath = state.socket.path.replaceAll(/(^\/*)|(\/*$)/g, '')
+        const path = normPath.length > 0 ? `/${normPath}` : ''
+        return state.socket.protocol + '://' + state.socket.hostname + ':' + state.socket.port + path + '/websocket'
     },
 
     getSocketData: (state) => {
@@ -32,7 +34,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
         )
             return state.data.gui.general.printername
 
-        return state.socket.port !== 80 ? state.socket.hostname + ':' + state.socket.port : state.socket.hostname
+        return state.socket.hostname + (state.socket.port != 80 ? ':' + state.socket.port : '') + state.socket.path
     },
 
     getPrinterSocketState: (state) => {
@@ -128,12 +130,15 @@ export const getters: GetterTree<FarmPrinterState, any> = {
             const dir = indexLastDir !== -1 ? state.current_file.filename.substring(0, indexLastDir) + '/' : ''
             const thumbnail = state.current_file.thumbnails.find((thumb) => thumb.width >= thumbnailBigMin)
 
+            const normPath = state.socket.path.replaceAll(/(^\/*)|(\/*$)/g, '')
+            const path = normPath.length > 0 ? `/${normPath}` : ''
             if (thumbnail && 'relative_path' in thumbnail)
                 return (
                     '//' +
                     state.socket.hostname +
                     ':' +
                     state.socket.port +
+                    path +
                     '/server/files/gcodes/' +
                     dir +
                     thumbnail.relative_path
@@ -150,7 +155,12 @@ export const getters: GetterTree<FarmPrinterState, any> = {
                 acceptExtensions.includes(element.substr(element.lastIndexOf('.') + 1))
         )
 
-        return file ? '//' + state.socket.hostname + ':' + state.socket.port + '/server/files/config/' + file : null
+        const normPath = state.socket.path.replaceAll(/(^\/*)|(\/*$)/g, '')
+        const path = normPath.length > 0 ? `/${normPath}` : ''
+
+        return file
+            ? '//' + state.socket.hostname + ':' + state.socket.port + path + '/server/files/config/' + file
+            : null
     },
 
     getLogo: (state, getters) => {
diff --git a/src/store/farm/printer/index.ts b/src/store/farm/printer/index.ts
index 0245165ad..12622ed7e 100644
--- a/src/store/farm/printer/index.ts
+++ b/src/store/farm/printer/index.ts
@@ -12,6 +12,7 @@ export const getDefaultState = (): FarmPrinterState => {
             instance: null,
             hostname: '',
             port: 7125,
+            path: '',
             webPort: 80,
             protocol: document.location.protocol === 'https:' ? 'wss' : 'ws',
             isConnected: false,
diff --git a/src/store/farm/printer/types.ts b/src/store/farm/printer/types.ts
index e1cd33d19..7f6269b9e 100644
--- a/src/store/farm/printer/types.ts
+++ b/src/store/farm/printer/types.ts
@@ -24,6 +24,7 @@ export interface FarmPrinterStateSocket {
     hostname: string
     port: number
     webPort: number
+    path: string
     protocol: string
     isConnected: boolean
     isConnecting: boolean
diff --git a/src/store/gui/remoteprinters/actions.ts b/src/store/gui/remoteprinters/actions.ts
index a62e70e19..b966c6876 100644
--- a/src/store/gui/remoteprinters/actions.ts
+++ b/src/store/gui/remoteprinters/actions.ts
@@ -39,6 +39,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
                     id: printerId,
                     hostname: printer.hostname ?? '',
                     port: printer.port ?? 7125,
+                    path: printer.path ?? '',
                     settings: printer.settings ?? {},
                 },
                 { root: true }
@@ -54,6 +55,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
                 printers.push({
                     hostname: state.printers[id].hostname,
                     port: state.printers[id].port,
+                    path: state.printers[id].path,
                     settings: state.printers[id].settings,
                 })
             })
@@ -63,6 +65,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
             const value = {
                 hostname: state.printers[id].hostname,
                 port: state.printers[id].port,
+                path: state.printers[id].path,
                 settings: state.printers[id].settings ?? {},
             }
 
@@ -84,6 +87,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
                 id,
                 hostname: payload.values.hostname ?? '',
                 port: payload.values.port ?? 7125,
+                path: payload.values.path ?? '',
             },
             { root: true }
         )
diff --git a/src/store/gui/remoteprinters/types.ts b/src/store/gui/remoteprinters/types.ts
index c77458f23..d1f366c5b 100644
--- a/src/store/gui/remoteprinters/types.ts
+++ b/src/store/gui/remoteprinters/types.ts
@@ -10,6 +10,7 @@ export interface GuiRemoteprintersStatePrinter {
     id?: string | null
     hostname: string
     port: number
+    path?: string | null
     socket?: FarmPrinterStateSocket
     settings?: {
         [key: string]: any
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index 30f8cf7c8..50b66b16b 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -18,9 +18,12 @@ export const actions: ActionTree<SocketState, RootState> = {
         commit('setData', payload)
 
         if ('$socket' in Vue.prototype) {
+            const normPath = payload.path.replaceAll(/(^\/*)|(\/*$)/g, '')
+            const path = normPath.length > 0 ? `/${normPath}` : ''
+
             await Vue.prototype.$socket.close()
             await Vue.prototype.$socket.setUrl(
-                state.protocol + '://' + payload.hostname + ':' + payload.port + '/websocket'
+                state.protocol + '://' + payload.hostname + ':' + payload.port + path + '/websocket'
             )
             await Vue.prototype.$socket.connect()
         }
diff --git a/src/store/socket/getters.ts b/src/store/socket/getters.ts
index 592e4acaa..1ce9907cb 100644
--- a/src/store/socket/getters.ts
+++ b/src/store/socket/getters.ts
@@ -4,11 +4,16 @@ import { RootState } from '@/store/types'
 
 export const getters: GetterTree<SocketState, RootState> = {
     getUrl: (state) => {
-        return '//' + state.hostname + (state.port !== 80 ? ':' + state.port : '')
+        const port = state.port !== 80 ? ':' + state.port : ''
+        const path = '/' + state.path.replace(/^\/|\/$/g, '')
+
+        return `//${state.hostname}${port}${path}`
     },
 
     getHostUrl: (state) => {
-        return (state.protocol === 'wss' ? 'https' : 'http') + '://' + state.hostname + '/'
+        const protocol = state.protocol === 'wss' ? 'https' : 'http'
+
+        return `${protocol}://${state.hostname}/`
     },
 
     getWebsocketUrl: (state, getters) => {
diff --git a/src/store/socket/index.ts b/src/store/socket/index.ts
index 08e865e74..c50c7bc7a 100644
--- a/src/store/socket/index.ts
+++ b/src/store/socket/index.ts
@@ -9,10 +9,12 @@ export const getDefaultState = (): SocketState => {
     const hostname = (import.meta.env.VUE_APP_HOSTNAME as string) || window.location.hostname
     const defaultPort = window.location.port || (window.location.protocol === 'https:' ? 443 : 80)
     const port = import.meta.env.VUE_APP_PORT ? Number(import.meta.env.VUE_APP_PORT) : Number(defaultPort)
+    const path = (import.meta.env.VUE_APP_PATH as string) || ''
 
     return {
         hostname,
         port,
+        path,
         protocol: document.location.protocol === 'https:' ? 'wss' : 'ws',
         reconnectInterval: Number(import.meta.env.VUE_APP_RECONNECT_INTERVAL || 2000),
         isConnected: false,
diff --git a/src/store/socket/types.ts b/src/store/socket/types.ts
index 56fb57bb6..c2675e784 100644
--- a/src/store/socket/types.ts
+++ b/src/store/socket/types.ts
@@ -1,6 +1,7 @@
 export interface SocketState {
     hostname: string
     port: number
+    path: string
     protocol: string
     reconnectInterval: number
     isConnected: boolean
diff --git a/src/store/types.ts b/src/store/types.ts
index b35b6f4a0..8efa504a2 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -28,6 +28,7 @@ export interface ConfigJson {
     defaultTheme?: 'dark' | 'light'
     hostname?: string | null
     port?: string | number | null
+    path?: string | null
     instancesDB?: 'moonraker' | 'browser' | 'json'
     instances?: ConfigJsonInstance[]
 }
@@ -35,4 +36,5 @@ export interface ConfigJson {
 export interface ConfigJsonInstance {
     hostname: string
     port?: number
+    path?: string
 }