diff --git a/frontend/src/components/screencast.ts b/frontend/src/components/screencast.ts
index 969890a9..9fd4dd04 100644
--- a/frontend/src/components/screencast.ts
+++ b/frontend/src/components/screencast.ts
@@ -233,7 +233,7 @@ export class Screencast extends LitElement {
     }
 
     const baseURL = `${window.location.protocol === "https:" ? "wss" : "ws"}:${
-      window.location.host
+      process.env.WEBSOCKET_HOST || window.location.host
     }/watch/${this.archiveId}/${this.crawlId}`;
 
     this.watchIPs.forEach((ip: string) => {
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 66b3ee7e..8d18bd84 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -1,5 +1,6 @@
 // webpack.config.js
 const path = require("path");
+const webpack = require("webpack");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
@@ -7,9 +8,22 @@ const childProcess = require("child_process");
 
 const isDevServer = process.env.WEBPACK_SERVE;
 
+const dotEnvPath = path.resolve(
+  process.cwd(),
+  `.env${isDevServer ? `.local` : ""}`
+);
+require("dotenv").config({
+  path: dotEnvPath,
+});
+
 // for testing: for prod, the Dockerfile should have the official prod version used
 const RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
 
+const WEBSOCKET_HOST =
+  isDevServer && process.env.API_BASE_URL
+    ? new URL(process.env.API_BASE_URL).host
+    : process.env.WEBSOCKET_HOST || "";
+
 // Get git info to use as Glitchtip release version
 
 const execCommand = (cmd, defValue) => {
@@ -30,14 +44,6 @@ const commitHash =
   process.env.GIT_COMMIT_HASH ||
   execCommand("git rev-parse --short HEAD", "unknown");
 
-const dotEnvPath = path.resolve(
-  process.cwd(),
-  `.env${isDevServer ? `.local` : ""}`
-);
-require("dotenv").config({
-  path: dotEnvPath,
-});
-
 const shoelaceAssetsSrcPath = path.resolve(
   __dirname,
   "node_modules/@shoelace-style/shoelace/dist/assets"
@@ -81,6 +87,10 @@ module.exports = {
   },
 
   plugins: [
+    new webpack.DefinePlugin({
+      "process.env.WEBSOCKET_HOST": JSON.stringify(WEBSOCKET_HOST),
+    }),
+
     new HtmlWebpackPlugin({
       template: "src/index.ejs",
       templateParameters: {
diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js
index 5b8ad8fd..3a4cd6aa 100644
--- a/frontend/webpack.dev.js
+++ b/frontend/webpack.dev.js
@@ -1,5 +1,4 @@
 const path = require("path");
-const webpack = require("webpack");
 const { merge } = require("webpack-merge");
 
 const common = require("./webpack.config.js");
@@ -8,7 +7,9 @@ const common = require("./webpack.config.js");
 const RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
 
 if (!process.env.API_BASE_URL) {
-  throw new Error("To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'")
+  throw new Error(
+    "To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'"
+  );
 }
 
 const devBackendUrl = new URL(process.env.API_BASE_URL);
@@ -55,10 +56,4 @@ module.exports = merge(common, {
     },
     port: 9870,
   },
-
-  plugins: [
-    new webpack.DefinePlugin({
-      "process.env.WEBSOCKET_HOST": JSON.stringify(devBackendUrl.host),
-    }),
-  ],
 });