diff --git a/scopes/react/react/apps/web/react.application.ts b/scopes/react/react/apps/web/react.application.ts
index 831c46e36cd..1f1e6172837 100644
--- a/scopes/react/react/apps/web/react.application.ts
+++ b/scopes/react/react/apps/web/react.application.ts
@@ -17,7 +17,7 @@ import { html } from '../../webpack';
 import { ReactDeployContext } from './deploy-context';
 import { computeResults } from './compute-results';
 import { clientConfig, ssrConfig, calcOutputPath, ssrBuildConfig, buildConfig } from './webpack/webpack.app.ssr.config';
-import { addDevServer, setOutput, replaceTerserPlugin } from './webpack/mutators';
+import { addDevServer, setOutput, replaceTerserPlugin, setDevServerClient } from './webpack/mutators';
 import { createExpressSsr, loadSsrApp, parseAssets } from './ssr/ssr-express';
 
 export class ReactApp implements Application {
@@ -60,7 +60,7 @@ export class ReactApp implements Application {
     const devServerContext = await this.getDevServerContext(context);
     const devServer = this.reactEnv.getDevServer(
       devServerContext,
-      [addDevServer, setOutput, ...this.transformers],
+      [addDevServer, setOutput, setDevServerClient, ...this.transformers],
       this.webpackModulePath,
       this.webpackDevServerModulePath
     );
diff --git a/scopes/react/react/apps/web/webpack/mutators.ts b/scopes/react/react/apps/web/webpack/mutators.ts
index 875dacf8439..13a92218820 100644
--- a/scopes/react/react/apps/web/webpack/mutators.ts
+++ b/scopes/react/react/apps/web/webpack/mutators.ts
@@ -22,6 +22,24 @@ export function setOutput(configMutator: WebpackConfigMutator) {
   return configMutator;
 }
 
+/**
+ * Setting the webSocketURL to use port 0
+ * This is will make the dev server to use the same port as the website
+ * This is mainly required for a cases when the port is forwarded to a different port
+ * For example when using online vscode instances
+ * @param configMutator
+ * @returns
+ */
+export function setDevServerClient(configMutator: WebpackConfigMutator) {
+  if (!configMutator.raw.devServer) configMutator.raw.devServer = {};
+
+  configMutator.raw.devServer.client = {
+    webSocketURL: 'ws://0.0.0.0:0/ws',
+  };
+
+  return configMutator;
+}
+
 export function replaceTerserPlugin({ prerender = false }: { prerender: boolean }) {
   return (configMutator: WebpackConfigMutator) => {
     if (!configMutator.raw.optimization?.minimizer) return configMutator;