Make webpage usable via reverse proxy

location.base needs to be set to the proxied path

public/index.ejs

@@ -29,7 +29,7 @@
 				display: none;
 			}
 		</style>
-
+		<script>location.base = "<%= locationBase %>"</script>
 		<script>
 			if (localStorage.getItem('selectedTheme')) {
 				document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))

src/app.js

@@ -33,6 +33,8 @@ import { SPOTIFY_STATUS } from '@/constants'
 String.prototype.capitalize = function () {
 	return this.charAt(0).toUpperCase() + this.slice(1)
 }
+// Reset if ejs fails
+if (location.base == "<%= locationBase %>") location.base = "/"
 
 /* ===== App initialization ===== */
 async function startApp() {
@@ -44,7 +46,7 @@ async function startApp() {
 		render: h => h(App)
 	}).$mount('#app')
 
-	const connectResponse = await (await fetch('connect')).json()
+	const connectResponse = await fetchData('connect')
 	const spotifyStatus = connectResponse.spotifyEnabled ? SPOTIFY_STATUS.ENABLED : SPOTIFY_STATUS.DISABLED
 
 	if (connectResponse.deezerAvailable === 'no-network') {

src/components/TheSidebar.vue

@@ -73,8 +73,10 @@ import deemixIcon from '@/assets/deemix-icon.svg'
 
 export default defineComponent({
 	setup(_, ctx) {
+		const activeTab = links.find(link => link.routerName === ctx.root.$route.name)
+
 		const state = reactive({
-			activeTablink: 'home',
+			activeTablink: activeTab ? activeTab.name : 'home',
 			links
 		})
 		const { THEMES, currentTheme } = useTheme()

src/router.js

@@ -22,7 +22,7 @@ Vue.use(VueRouter)
 
 const routes = [
 	{
-		path: window.location.pathname,
+		path: '/',
 		name: 'Home',
 		component: Home,
 		meta: {
@@ -120,6 +120,7 @@ const routes = [
 
 const router = new VueRouter({
 	mode: 'history',
+	base: location.base,
 	routes,
 	scrollBehavior() {
 		return { x: 0, y: 0 }

src/utils/api.js

@@ -1,5 +1,5 @@
 export function fetchData(key, data = {}, method = 'GET') {
-	const url = new URL(`${window.location.origin}/api/${key}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${key}`)
 
 	Object.keys(data).forEach(key => {
 		url.searchParams.append(key, data[key])
@@ -14,7 +14,7 @@ export function fetchData(key, data = {}, method = 'GET') {
 }
 
 export function sendToServer(key, data) {
-	const url = new URL(`${window.location.origin}/api/${key}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${key}`)
 
 	Object.keys(data).forEach(key => {
 		url.searchParams.append(key, data[key])
@@ -26,7 +26,7 @@ export function sendToServer(key, data) {
 }
 
 export function postToServer(endpoint, data) {
-	const url = new URL(`${window.location.origin}/api/${endpoint}`)
+	const url = new URL(`${window.location.origin}${location.base}api/${endpoint}`)
 
 	return fetch(url, {
 		body: JSON.stringify(data),

src/utils/socket.js

@@ -34,4 +34,4 @@ class CustomSocket extends WebSocket {
 	}
 }
 
-export const socket = new CustomSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/')
+export const socket = new CustomSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + location.base)