From b7eb6ec1dcd4023d278caecb5329a11505db1f76 Mon Sep 17 00:00:00 2001 From: Leigh Johnson Date: Fri, 5 May 2023 15:48:09 -0700 Subject: [PATCH] support BASE_URL environment variable --- package.json | 3 ++- src/components/TheSelectPrinterDialog.vue | 3 ++- src/main.ts | 8 +++++--- src/store/farm/printer/getters.ts | 9 +++++---- src/store/socket/actions.ts | 3 ++- src/store/socket/getters.ts | 12 +++++++++++- 6 files changed, 27 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 99c06e6cf8..ba7a0137a9 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue index 8e82c03c69..833388dc96 100644 --- a/src/components/TheSelectPrinterDialog.vue +++ b/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() } diff --git a/src/main.ts b/src/main.ts index 82509ec7bb..503a50e424 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,7 +13,7 @@ import { registerSW } from 'virtual:pwa-register' // noinspection JSUnusedGlobalSymbols registerSW({ - onOfflineReady() {}, + onOfflineReady() { }, }) Vue.config.productionTip = false @@ -53,7 +53,8 @@ Vue.use(OverlayScrollbarsPlugin, { }) // Directives -import './directives/longpress' +import './directives/longpress' "build:printnanny": "BASE_URL=/mainsail/ vite build --base=/mainsail/ && npm run build.zip", + 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') diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts index 41406c149c..9852185495 100644 --- a/src/store/farm/printer/getters.ts +++ b/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 = { 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 = { 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 = { ) { 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) } diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts index c2f3996828..e4373ee49e 100644 --- a/src/store/socket/actions.ts +++ b/src/store/socket/actions.ts @@ -19,8 +19,9 @@ export const actions: ActionTree = { 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() } diff --git a/src/store/socket/getters.ts b/src/store/socket/getters.ts index 592e4acaa5..af449e36a8 100644 --- a/src/store/socket/getters.ts +++ b/src/store/socket/getters.ts @@ -4,6 +4,16 @@ import { RootState } from '@/store/types' export const getters: GetterTree = { 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 = { }, getWebsocketUrl: (state, getters) => { - return state.protocol + ':' + getters['getUrl'] + '/websocket' + return `${state.protocol}:${getters['getUrl']}/websocket` }, }