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,47 +185,59 @@ app.use(express.static('src'));
 app.use(express.static('design'));
 app.use(express.static(projectDir + 'layouts'));
 
-const listener = app.listen(0, async () => {
+// BrowserSync
-  const PORT = listener.address().port;
+const bsOptions = await startBrowserSync();
-  await open(`http://localhost:${PORT}`);
+port = bsOptions.port;
-
+previewFrameUrl = bsOptions.previewFrameUrl;
-  console.log(`The web server has started on port ${PORT}`);
+await open(bsOptions.devToolUrl);
-
-  const bs = browserSync.create();
-
-  gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
-    browserSyncReload(bs, 'js', 'Script Files Change');
-    return cb();
-  }]));
-
-  gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
-    browserSyncReload(bs, 'css', 'Style Files Change');
-    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)
-  });
-
-  bs.init({
-    proxy: `http://localhost:${PORT}`,
-    open: false
-  }, (err, bs) => {
-    const options = bs.getOptions().toJS();
-    previewFrameUrl = options.urls.external;
-    externalUrl = previewFrameUrl.replace(options.port, options.proxy.url.port);
-    port = options.port;
-  });
-
-});
 
 /**
  * Functions
  */
 
+function startBrowserSync() {
+  return new Promise((resolve, reject) => {
+    const listener = app.listen(0, async () => {
+      const PORT = listener.address().port;
+
+      console.log(`The web server has started on port ${PORT}`);
+
+      const bs = browserSync.create();
+
+      gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
+        browserSyncReload(bs, 'js', 'Script Files Change');
+        return cb();
+      }]));
+
+      gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
+        browserSyncReload(bs, 'css', 'Style Files Change');
+        return cb();
+      }]));
+
+      bs.watch("src/**/*.hbs", function (event, file) {
+        browserSyncReload(bs, '', 'Template File Change: ' + file)
+      });
+
+      bs.init({
+        proxy: `http://localhost:${PORT}`,
+        open: false
+      }, (err, bs) => {
+        if (err) {
+          return reject(err);
+        }
+
+        const options = bs.getOptions().toJS();
+
+        resolve({
+          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) {
     // console.log(event, file);