From ff33974b78fd2fa29c633bf731c0917c45f23cfb Mon Sep 17 00:00:00 2001
From: Roman Axelrod <roman@axe-web.com>
Date: Fri, 21 Oct 2022 11:13:41 +0300
Subject: [PATCH] Open devTool only after browserSync is ready.

---
 layouts/partials/toolbar.hbs |  2 +-
 server.js                    | 90 ++++++++++++++++++++----------------
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs
index d07f8df..b6ebf77 100644
--- a/layouts/partials/toolbar.hbs
+++ b/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>
diff --git a/server.js b/server.js
index 7774e23..eaec3fb 100755
--- a/server.js
+++ b/server.js
@@ -38,9 +38,8 @@ buildScriptFiles()
  * Init server
  */
 
-let port = 3000;
-let externalUrl = '';
-let previewFrameUrl = `http://localhost:${port}`;
+let port = 3000; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
+let previewFrameUrl = `http://localhost:${port}`; // This variable is used in *.hbs and it will be updated once BrowserSync is ready.
 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 () => {
-  const PORT = listener.address().port;
-  await open(`http://localhost:${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/**/*.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;
-  });
-
-});
+// 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;
+
+      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);