Open devTool only after browserSync is ready.

layouts/partials/toolbar.hbs

@@ -9,6 +9,6 @@
   </div>
 
   <div class="page_toolbar__right">
-    <a href="{{ externalUrl }}" target="_blank" class="open_in_new_tab"></a>
+    <a href="{{ previewFrameUrl }}" target="_blank" class="open_in_new_tab"></a>
   </div>
 </header>

server.js

@@ -38,9 +38,8 @@ buildScriptFiles()
  * Init server
  */
 
-let port = 3000;
+let port = 3000; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
-let externalUrl = '';
+let previewFrameUrl = `http://localhost:${port}`; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
-let previewFrameUrl = `http://localhost:${port}`;
 const app = express();
 
 const hbs = create({
@@ -78,7 +77,6 @@ app.get('/', async (req, res) => {
     port,
     include_partial: (path) => projectDir + path,
     baseView,
-    externalUrl: `${externalUrl}/${baseViewUrl}`,
     previewFrameUrl: `${previewFrameUrl}/${baseViewUrl}`,
   }
 
@@ -187,9 +185,20 @@ app.use(express.static('src'));
 app.use(express.static('design'));
 app.use(express.static(projectDir + 'layouts'));
 
-const listener = app.listen(0, async () => {
+// BrowserSync
+const bsOptions = await startBrowserSync();
+port = bsOptions.port;
+previewFrameUrl = bsOptions.previewFrameUrl;
+await open(bsOptions.devToolUrl);
+
+/**
+ * Functions
+ */
+
+function startBrowserSync() {
+  return new Promise((resolve, reject) => {
+    const listener = app.listen(0, async () => {
       const PORT = listener.address().port;
-  await open(`http://localhost:${PORT}`);
 
       console.log(`The web server has started on port ${PORT}`);
 
@@ -205,9 +214,6 @@ const listener = app.listen(0, async () => {
         return cb();
       }]));
 
-  // bs.watch("src/**/*.js", function (event, file) {});
-  // bs.watch("src/**/*.css", function (event, file) {});
-
       bs.watch("src/**/*.hbs", function (event, file) {
         browserSyncReload(bs, '', 'Template File Change: ' + file)
       });
@@ -216,17 +222,21 @@ const listener = app.listen(0, async () => {
         proxy: `http://localhost:${PORT}`,
         open: false
       }, (err, bs) => {
-    const options = bs.getOptions().toJS();
+        if (err) {
-    previewFrameUrl = options.urls.external;
+          return reject(err);
-    externalUrl = previewFrameUrl.replace(options.port, options.proxy.url.port);
+        }
-    port = options.port;
-  });
 
-});
+        const options = bs.getOptions().toJS();
 
-/**
+        resolve({
- * Functions
+          devToolUrl: options.urls.external.replace(options.port, options.proxy.url.port),
- */
+          previewFrameUrl: options.urls.external,
+          port: options.port
+        });
+      });
+    });
+  });
+}
 
 function browserSyncReload(bs, extension = '', message = '') {
   if (isDev) {