diff --git a/docker/rootfs/usr/local/nginx/conf/nginx.conf b/docker/rootfs/usr/local/nginx/conf/nginx.conf
index c2ccc5079..7437f42fd 100644
--- a/docker/rootfs/usr/local/nginx/conf/nginx.conf
+++ b/docker/rootfs/usr/local/nginx/conf/nginx.conf
@@ -205,11 +205,13 @@ http {
add_header Cache-Control "public";
}
- sub_filter 'href="/' 'href="$http_x_ingress_path/';
- sub_filter 'url(/' 'url($http_x_ingress_path/';
- sub_filter '"/dist/' '"$http_x_ingress_path/dist/';
- sub_filter '"/js/' '"$http_x_ingress_path/js/';
- sub_filter '' '';
+ sub_filter 'href="/BASE_PATH/' 'href="$http_x_ingress_path/';
+ sub_filter 'url(/BASE_PATH/' 'url($http_x_ingress_path/';
+ sub_filter '"/BASE_PATH/dist/' '"$http_x_ingress_path/dist/';
+ sub_filter '"/BASE_PATH/js/' '"$http_x_ingress_path/js/';
+ sub_filter '"/BASE_PATH/assets/' '"$http_x_ingress_path/assets/';
+ sub_filter '="/BASE_PATH/"' '=window.baseUrl';
+ sub_filter '' '';
sub_filter_types text/css application/javascript;
sub_filter_once off;
diff --git a/web/package.json b/web/package.json
index ec04d3bb4..21b50468c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,7 +5,7 @@
"scripts": {
"dev": "vite",
"lint": "eslint ./ --ext .jsx,.js,.tsx,.ts",
- "build": "tsc && vite build",
+ "build": "tsc && vite build --base=/BASE_PATH/",
"preview": "vite preview",
"test": "jest"
},
diff --git a/web/src/api/baseUrl.js b/web/src/api/baseUrl.js
index 96559c9a8..132f170c5 100644
--- a/web/src/api/baseUrl.js
+++ b/web/src/api/baseUrl.js
@@ -1,2 +1,2 @@
import { API_HOST } from '../env';
-export const baseUrl = API_HOST || `${window.location.protocol}//${window.location.host}${window.baseUrl || ''}`;
+export const baseUrl = API_HOST || `${window.location.protocol}//${window.location.host}${window.baseUrl || '/'}`;
diff --git a/web/src/api/index.jsx b/web/src/api/index.jsx
index 427c65119..00c78db48 100644
--- a/web/src/api/index.jsx
+++ b/web/src/api/index.jsx
@@ -4,7 +4,7 @@ import useSWR, { SWRConfig } from 'swr';
import { MqttProvider } from './mqtt';
import axios from 'axios';
-axios.defaults.baseURL = `${baseUrl}/api/`;
+axios.defaults.baseURL = `${baseUrl}api/`;
export function ApiProvider({ children, options }) {
return (
diff --git a/web/src/api/mqtt.jsx b/web/src/api/mqtt.jsx
index 0dcfa2939..600cd1fc1 100644
--- a/web/src/api/mqtt.jsx
+++ b/web/src/api/mqtt.jsx
@@ -34,7 +34,7 @@ export function MqttProvider({
config,
children,
createWebsocket = defaultCreateWebsocket,
- mqttUrl = `${baseUrl.replace(/^http/, 'ws')}/ws`,
+ mqttUrl = `${baseUrl.replace(/^http/, 'ws')}ws`,
}) {
const [state, dispatch] = useReducer(reducer, initialState);
const wsRef = useRef();
diff --git a/web/src/components/JSMpegPlayer.jsx b/web/src/components/JSMpegPlayer.jsx
index 6b22008be..875f0c8ed 100644
--- a/web/src/components/JSMpegPlayer.jsx
+++ b/web/src/components/JSMpegPlayer.jsx
@@ -5,7 +5,7 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
export default function JSMpegPlayer({ camera, width, height }) {
const playerRef = useRef();
- const url = `${baseUrl.replace(/^http/, 'ws')}/live/${camera}`;
+ const url = `${baseUrl.replace(/^http/, 'ws')}live/${camera}`;
useEffect(() => {
const video = new JSMpeg.VideoElement(