Support BASE_URL environment variable v2.5.1

package.json

@@ -9,6 +9,7 @@
     "scripts": {
         "serve": "vite serve",
         "build": "vite build && npm run build.zip",
+        "build:printnanny": "BASE_URL=/mainsail/ vite build --base=/mainsail/ && npm run build.zip",
         "format": "npm run format:base -- --write",
         "format:base": "prettier .",
         "format:check": "npm run format:base -- --check",
@@ -116,4 +117,4 @@
     "engines": {
         "node": "^16 || ^18"
     }
-}
+}

src/components/TheSelectPrinterDialog.vue

@@ -382,7 +382,8 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
             hostname: printer.socket.hostname,
             port: printer.socket.port,
         })
-        this.$socket.setUrl(this.protocol + '://' + printer.socket.hostname + ':' + printer.socket.port + '/websocket')
+        const basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
+        this.$socket.setUrl(`${this.protocol}://${printer.socket.hostname}:${printer.socket.port}${basePath}/websocket`)
         this.$socket.connect()
     }
 

src/main.ts

@@ -13,7 +13,7 @@ import { registerSW } from 'virtual:pwa-register'
 
 // noinspection JSUnusedGlobalSymbols
 registerSW({
-    onOfflineReady() {},
+    onOfflineReady() { },
 })
 
 Vue.config.productionTip = false
@@ -54,6 +54,7 @@ Vue.use(OverlayScrollbarsPlugin, {
 
 // Directives
 import './directives/longpress'
+
 import './directives/responsive-class'
 
 // Echarts
@@ -76,7 +77,8 @@ Vue.use(VueResize)
 
 const initLoad = async () => {
     //load config.json
-    await fetch('/config.json')
+    const basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
+    await fetch(`${basePath}/config.json`)
         .then((res) => res.json())
         .then(async (file) => {
             window.console.debug('Loaded config.json')

src/store/farm/printer/getters.ts

@@ -7,7 +7,8 @@ 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 basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
+        return `${state.socket.protocol}://${state.socket.hostname}:${state.socket.port}${basePath}/websocket`
     },
 
     getSocketData: (state) => {
@@ -149,8 +150,8 @@ export const getters: GetterTree<FarmPrinterState, any> = {
                 element.substr(0, element.lastIndexOf('.')) === themeDir + '/' + acceptName &&
                 acceptExtensions.includes(element.substr(element.lastIndexOf('.') + 1))
         )
-
-        return file ? '//' + state.socket.hostname + ':' + state.socket.port + '/server/files/config/' + file : null
+        const basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
+        return file ? `//${state.socket.hostname}:${state.socket.port}${basePath}/server/files/config/` + file : null
     },
 
     getLogo: (state, getters) => {
@@ -259,7 +260,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
         ) {
             return (
                 state.data.print_stats.print_duration /
-                    (state.data.print_stats.filament_used / state.current_file.filament_total) -
+                (state.data.print_stats.filament_used / state.current_file.filament_total) -
                 state.data.print_stats.print_duration
             ).toFixed(0)
         }

src/store/socket/actions.ts

@@ -19,8 +19,9 @@ export const actions: ActionTree<SocketState, RootState> = {
 
         if ('$socket' in Vue.prototype) {
             await Vue.prototype.$socket.close()
+            const basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
             await Vue.prototype.$socket.setUrl(
-                state.protocol + '://' + payload.hostname + ':' + payload.port + '/websocket'
+                `${state.protocol}://${payload.hostname}:${payload.port}${basePath}/websocket`
             )
             await Vue.prototype.$socket.connect()
         }

src/store/socket/getters.ts

@@ -4,6 +4,16 @@ import { RootState } from '@/store/types'
 
 export const getters: GetterTree<SocketState, RootState> = {
     getUrl: (state) => {
+        const basePath = import.meta.env.BASE_URL || ''; // https://vitejs.dev/guide/build.html#public-base-path
+        const port = state.port === 80 ? '' : `:${state.port}`
+
+        const url = `//${state.hostname}${port}${basePath}`;
+        // strip trailing slash from BASE_URL in this getter, since most socket/getUrl consumers seem to assume no trailing slash is present
+        if (url[url.length - 1] === "/") {
+            return url.slice(0, -1)
+        }
+        return url
+
         return '//' + state.hostname + (state.port !== 80 ? ':' + state.port : '')
     },
 
@@ -12,6 +22,6 @@ export const getters: GetterTree<SocketState, RootState> = {
     },
 
     getWebsocketUrl: (state, getters) => {
-        return state.protocol + ':' + getters['getUrl'] + '/websocket'
+        return `${state.protocol}:${getters['getUrl']}/websocket`
     },
 }