diff --git a/web/app/package.json b/web/app/package.json
index be3bcd85..0d1d6bab 100644
--- a/web/app/package.json
+++ b/web/app/package.json
@@ -12,7 +12,7 @@
     }
   ],
   "scripts": {
-    "dev": "vite --port 8081 --base /app/",
+    "dev": "vite --port 8081 --base /app/ --mode development",
     "build": "vite build",
     "preview": "vite preview --port 5050",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
diff --git a/web/app/src/urls.js b/web/app/src/urls.js
index 9f15d7e0..9ac3b689 100644
--- a/web/app/src/urls.js
+++ b/web/app/src/urls.js
@@ -1,18 +1,15 @@
 let url = new URL(window.location.href);
-// Uncomment this when the web interface is running on a different port than the
-// API, for example when using the Vite devserver. Set the API port here.
-if (url.port == '8081') {
+
+// When the web interface is running on a different port than the API, for
+// example when using the Vite devserver, setting the Vite --mode flag to
+// "development" will force port 8080 for the API.
+if (import.meta.env.MODE == 'development') {
   url.port = '8080';
 }
-url.pathname = '/';
-const flamencoAPIURL = url.href;
-
-url.protocol = 'ws:';
-const websocketURL = url.href;
 
 const URLs = {
-  api: flamencoAPIURL,
-  ws: websocketURL,
+  api: `${url.protocol}//${url.hostname}:${url.port}/`,
+  ws: `${url.protocol.replace('http', 'ws')}//${url.hostname}:${url.port}/`,
 };
 
 // console.log("Flamenco API:", URLs.api);