diff --git a/theia-extensions/viewer-prototype/src/browser/preferences-frontend-contribution.ts b/theia-extensions/viewer-prototype/src/browser/preferences-frontend-contribution.ts
index df10de5b8..bbc95f421 100644
--- a/theia-extensions/viewer-prototype/src/browser/preferences-frontend-contribution.ts
+++ b/theia-extensions/viewer-prototype/src/browser/preferences-frontend-contribution.ts
@@ -1,6 +1,6 @@
 import { FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { inject, injectable } from 'inversify';
-import { PortPreferenceProxy } from '../common/trace-server-url-provider';
+import { PortPreferenceProxy, TRACE_VIEWER_DEFAULT_PORT } from '../common/trace-server-url-provider';
 import { TracePreferences, TRACE_PORT } from './trace-server-preference';
 
 @injectable()
@@ -12,7 +12,15 @@ export class PreferencesFrontendContribution implements FrontendApplicationContr
 
     async initialize(): Promise<void> {
         this.tracePreferences.ready.then(() => {
-            this.portPreferenceProxy.onPortPreferenceChanged(this.tracePreferences[TRACE_PORT]);
+            // assume the backend starts with the default server port - if the user configured
+            // a different port in the preferences, tell backend to change it
+            const tracePortPref = this.tracePreferences[TRACE_PORT];
+            if (tracePortPref === TRACE_VIEWER_DEFAULT_PORT) {
+                this.portPreferenceProxy.onPortPreferenceChanged(tracePortPref);
+            } else {
+                this.portPreferenceProxy.onPortPreferenceChanged(tracePortPref, TRACE_VIEWER_DEFAULT_PORT, true);
+            }
+
             this.tracePreferences.onPreferenceChanged(async event => {
                 if (event.preferenceName === TRACE_PORT) {
                     const newValue = typeof event.newValue === 'string' ? parseInt(event.newValue) : event.newValue;
diff --git a/theia-extensions/viewer-prototype/src/node/trace-server-url-provider-impl.ts b/theia-extensions/viewer-prototype/src/node/trace-server-url-provider-impl.ts
index 017e56750..953ef6a85 100644
--- a/theia-extensions/viewer-prototype/src/node/trace-server-url-provider-impl.ts
+++ b/theia-extensions/viewer-prototype/src/node/trace-server-url-provider-impl.ts
@@ -3,6 +3,7 @@ import { TraceServerConfigService } from '../common/trace-server-config';
 import {
     TraceServerUrlProvider,
     TRACE_SERVER_DEFAULT_URL,
+    TRACE_VIEWER_DEFAULT_PORT,
     PortPreferenceProxy
 } from '../common/trace-server-url-provider';
 import { Event, Emitter } from '@theia/core';
@@ -59,6 +60,7 @@ export class TraceServerUrlProviderImpl
         // Get the URL template from the remote environment.
         const variable = process.env['TRACE_SERVER_URL'];
         this._traceServerUrlTemplate = variable ? this.normalizeUrl(variable) : TRACE_SERVER_DEFAULT_URL;
+        this._traceServerPort = TRACE_VIEWER_DEFAULT_PORT;
         this.updateTraceServerUrl();
     }
 
@@ -69,7 +71,8 @@ export class TraceServerUrlProviderImpl
     ): Promise<void> {
         this._traceServerPort = newPort;
         this.updateTraceServerUrl();
-        if (preferenceChanged) {
+
+        if (preferenceChanged || this._traceServerPort !== newPort) {
             try {
                 await this.traceServerConfigService.stopTraceServer();
                 if (oldValue) {
@@ -82,7 +85,8 @@ export class TraceServerUrlProviderImpl
     }
 
     async initialize(): Promise<void> {
-        // Don't start the application until the Trace Server URL is initialized.
+        // Don't conclude the initialization life-cycle phase of this contribution
+        // until the Trace Server URL is initialized.
         await this._traceServerUrlPromise;
     }