diff --git a/layouts/index.hbs b/layouts/index.hbs
index 2c38479..ffcffcb 100644
--- a/layouts/index.hbs
+++ b/layouts/index.hbs
@@ -13,10 +13,10 @@
 
 <script>
   window.devTool = {
-    previewFrameUrl: 'http://localhost:{{ port }}/view/{{ baseView }}',
+    previewFrameUrl: '{{ previewFrameUrl }}',
   };
 </script>
-<iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
+<iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe>
 
 <script src="/scripts/dist/index.min.js"></script>
 </body>
diff --git a/server.js b/server.js
index 65d1593..51db2dd 100755
--- a/server.js
+++ b/server.js
@@ -40,6 +40,7 @@ buildScriptFiles()
 
 let port = 3000;
 let externalUrl = '';
+let previewFrameUrl = `http://localhost:${port}`;
 const app = express();
 
 const hbs = create({
@@ -71,13 +72,14 @@ app.get('/', async (req, res) => {
   }
 
   const baseView = config.has('baseView') ? config.get('baseView') : 'container';
+  const baseViewUrl = `view/${baseView}`;
 
   data.helpers = {
     port,
     include_partial: (path) => projectDir + path,
-    baseView: baseView,
-    externalUrl: `${externalUrl}/view/${baseView}`,
-    previewFrameUrl: `http://localhost:${port}/view/${baseView}`,
+    baseView,
+    externalUrl: `${externalUrl}/${baseViewUrl}`,
+    previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
 
   res.render('index', data);
@@ -210,8 +212,10 @@ const listener = app.listen(0, async () => {
     proxy: `http://localhost:${PORT}`,
     open: false
   }, (err, bs) => {
-    externalUrl = bs.getOptionIn(["urls"]).get('external');
-    port = bs.server._connectionKey.split(':').pop();
+    const options = bs.getOptions().toJS();
+    previewFrameUrl = options.urls.external;
+    externalUrl = previewFrameUrl.replace(options.port, options.proxy.url.port);
+    port = options.port;
   });
 
 });