Why the gulp browsersync() does not work with Laragon?

Question

Some times ago I created the simple gulp file for to automate development a bit. At the time, I was just working with XAMPP and my gulpfile worked well. But for the last time I started using the Laragon and I have the issue. After gulp command in the terminal the gulp start but the project does not load I just see the loading page: https://gyazo.com/70527323ee7f18104727badf422ed228 I does not understand why? Here is my browsersync function I use in gulpfile.js

function browsersync() {
browserSync.init({
    proxy: {
        target: "http://starter.test",
        ws: true
    },
    notify: false, 
    online: true
   })
 } 

Please help to solve this issue.

Answer 1

I found the solution to this problem by adding an SSL certificate in browserSync.init like this:

browserSync.init({
        injectChanges: true,
        open: false,
        proxy: "https://datavis.test",
        https: {
            key: 'D:/laragon/etc/ssl/laragon.key',
            cert: 'D:/laragon/etc/ssl/laragon.crt'
        }
    });

Then in your HTML file, you should add this code right before closing tag:

<script id="__bs_script__">//<![CDATA[
          document.write("<script async src='https://HOST:3000/browser-sync/browser-sync-client.js?v=2.27.10'><\/script>".replace("HOST", location.hostname));
      //]]></script>

I was following the guidance from this youtube video: https://www.youtube.com/watch?v=NDjE_LCHbuI

This guy explained step by step how the browserSync should be installed in a similar case.