Fix sharable link issues. Browsersync works with ngrok now.

layouts/index.hbs

@@ -14,6 +14,9 @@
 <script>
   window.devTool = {
     previewFrameUrl: '{{ previewFrameUrl }}',
+    {{#if publicUrl}}
+      publicUrl: true,
+    {{/if}}
   };
 </script>
 

layouts/scripts/dist/index.min.js

@@ -9513,6 +9513,9 @@ function Publish(props = {}) {
     loading: false
   });
   const updateState = update => setState(Object.assign({}, state, update));
+  if (window.devTool.publicUrl) {
+    return;
+  }
   return /*#__PURE__*/React.createElement("div", null, state.loading && /*#__PURE__*/React.createElement("div", {
     className: "overlay overlay--loading"
   }, "Loading, Please wait..."), /*#__PURE__*/React.createElement("button", {

layouts/scripts/toolbar/publish.jsx

@@ -5,6 +5,10 @@ function Publish(props = {}) {
   const [state, setState] = useState({loading: false});
   const updateState = (update) => setState(Object.assign({}, state, update));
 
+  if (window.devTool.publicUrl) {
+    return;
+  }
+
   return <div>
     {state.loading &&
       <div className="overlay overlay--loading">Loading, Please wait...</div>

server.js

@@ -92,9 +92,17 @@ app.get('/', (req, res) => {
 
   data.baseView = baseView;
   data.port = `/${baseViewUrl}`;
-  data.previewFrameUrl = `/${baseViewUrl}`;
+  data.previewFrameUrl = `${previewFrameUrl}/${baseViewUrl}`;
+  // data.previewFrameUrl = `/${baseViewUrl}`;
   data.shareUrl = shareUrl;
 
+  if (req.headers.referer) {
+    // NGROK, public URL
+    data.shareUrl = undefined; // Link already shared.
+    data.previewFrameUrl = `/${baseViewUrl}`;
+    data.publicUrl = true;
+  }
+
   res.render('index', data);
 });
 
@@ -193,10 +201,10 @@ app.use(setHeaders);
 await buildAssetFiles();
 
 // BrowserSync
+shareUrl = await getShareableUrl();
 const bsOptions = await startBrowserSync();
 port = bsOptions.port;
 previewFrameUrl = bsOptions.previewFrameUrl;
-shareUrl = await getShareableUrl();
 await open(bsOptions.devToolUrl);
 
 
@@ -246,10 +254,18 @@ function startBrowserSync() {
         return syncTemplate(sessions);
       });
 
-      bs.init({
+      const args = {
         proxy: `http://localhost:${PORT}`,
         open: false
-      }, (err, bs) => {
+      };
+
+      if (shareUrl) {
+        args.socket = {
+          domain: shareUrl
+        };
+      }
+
+      bs.init(args, (err, bs) => {
         if (err) {
           return reject(err);
         }