diff --git a/packages/master/web/index.html b/packages/master/web/index.html
index 61d74ee8..372cf1fe 100644
--- a/packages/master/web/index.html
+++ b/packages/master/web/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Clusterio</title>
     <script>
-        window.webRoot = "__WEB_ROOT__";
+        window.webRoot = new URL("__WEB_ROOT__", document.location).pathname;
     </script>
   </head>
   <body>
diff --git a/packages/web_ui/src/basename.jsx b/packages/web_ui/src/basename.jsx
deleted file mode 100644
index 0e7e3de4..00000000
--- a/packages/web_ui/src/basename.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Calculate basedir of application based on current location and
-// the provided web_root from master server.
-const location = new URL(window.webRoot, document.location);
-const basename = location.pathname !== "/" ? location.pathname : "";
-
-export default basename;
diff --git a/packages/web_ui/src/bootstrap.jsx b/packages/web_ui/src/bootstrap.jsx
index 0e37a489..6acef556 100644
--- a/packages/web_ui/src/bootstrap.jsx
+++ b/packages/web_ui/src/bootstrap.jsx
@@ -7,7 +7,6 @@ import libConfig from "@clusterio/lib/config";
 import libPlugin from "@clusterio/lib/plugin";
 import { ConsoleTransport, WebConsoleFormat, logger } from "@clusterio/lib/logging";
 
-import basename from "./basename";
 import App from "./components/App";
 import { Control, ControlConnector } from "./util/websocket";
 
@@ -28,7 +27,7 @@ async function loadScript(url) {
 }
 
 async function loadPlugins() {
-	let response = await fetch(`${basename}/api/plugins`);
+	let response = await fetch(`${webRoot}api/plugins`);
 	let pluginList;
 	if (response.ok) {
 		pluginList = await response.json();
@@ -42,7 +41,7 @@ async function loadPlugins() {
 	await __webpack_init_sharing__("default");
 	for (let meta of pluginList) {
 		try {
-			await loadScript(`${basename}/plugins/${meta.name}/remoteEntry.js`);
+			await loadScript(`${webRoot}plugins/${meta.name}/remoteEntry.js`);
 			let container = window[`plugin_${meta.name}`];
 			if (!container) {
 				throw new Error(`Plugin did not expose its container via plugin_${meta.name}`);
diff --git a/packages/web_ui/src/components/App.jsx b/packages/web_ui/src/components/App.jsx
index c326d014..7532d7c8 100644
--- a/packages/web_ui/src/components/App.jsx
+++ b/packages/web_ui/src/components/App.jsx
@@ -4,7 +4,6 @@ import { BrowserRouter } from "react-router-dom";
 
 import { logger } from "@clusterio/lib/logging";
 
-import basename from "../basename";
 import ErrorBoundary from "./ErrorBoundary";
 import SiteLayout from "./SiteLayout";
 import ControlContext from "./ControlContext";
@@ -89,7 +88,7 @@ export default function App(props) {
 		<ErrorBoundary Component={ErrorCard}>
 			<ControlContext.Provider value={props.control}>
 				<PluginsContext.Provider value={props.plugins}>
-					<BrowserRouter basename={basename}>
+					<BrowserRouter basename={webRoot}>
 						{page}
 					</BrowserRouter>
 				</PluginsContext.Provider>
diff --git a/packages/web_ui/src/components/PluginViewPage.jsx b/packages/web_ui/src/components/PluginViewPage.jsx
index dbca70c8..4ab2955f 100644
--- a/packages/web_ui/src/components/PluginViewPage.jsx
+++ b/packages/web_ui/src/components/PluginViewPage.jsx
@@ -2,7 +2,6 @@ import React, { useEffect, useContext, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 import { Alert, Descriptions, Spin } from "antd";
 
-import basename from "../basename";
 import PluginsContext from "./PluginsContext";
 import PageLayout from "./PageLayout";
 import { notifyErrorHandler } from "../util/notify";
@@ -16,7 +15,7 @@ export default function PluginViewPage() {
 
 	useEffect(() => {
 		(async () => {
-			let response = await fetch(`${basename}/api/plugins`);
+			let response = await fetch(`${webRoot}api/plugins`);
 			if (response.ok) {
 				setPluginList(await response.json());
 			} else {
diff --git a/packages/web_ui/src/components/PluginsPage.jsx b/packages/web_ui/src/components/PluginsPage.jsx
index 42b4a7e4..6c9390f2 100644
--- a/packages/web_ui/src/components/PluginsPage.jsx
+++ b/packages/web_ui/src/components/PluginsPage.jsx
@@ -3,7 +3,6 @@ import { useHistory } from "react-router-dom";
 import { Table } from "antd";
 
 import notify from "../util/notify";
-import basename from "../basename";
 import PluginsContext from "./PluginsContext";
 import PageLayout from "./PageLayout";
 
@@ -15,7 +14,7 @@ export default function PluginsPage() {
 
 	useEffect(() => {
 		(async () => {
-			let response = await fetch(`${basename}/api/plugins`);
+			let response = await fetch(`${webRoot}api/plugins`);
 			if (response.ok) {
 				setPluginList(await response.json());
 			} else {
diff --git a/packages/web_ui/src/index.jsx b/packages/web_ui/src/index.jsx
index dc3e9887..9761a022 100644
--- a/packages/web_ui/src/index.jsx
+++ b/packages/web_ui/src/index.jsx
@@ -1,4 +1,3 @@
-export { default as basename } from "./basename.jsx";
 export { default as bootstrap } from "./bootstrap.jsx";
 export { default as notify, notifyErrorHandler } from "./util/notify.jsx";