How to setup browser-sync for remote server?

Question

JavaScript

I have a server with Bitrix on the backend, I have set up almost all the tools for comfortable development of the client side, all the work is done on the server. It is necessary to do a hot-reload, but it is not possible to make browser-sync friends with the backend, is it possible, and how? Building the whole front on gulp.

Answer 1

The solution to the problem lay elsewhere. It turned out that the firewall was cutting port 3000, in our company security is the first thing. After the port was opened to me, I was able to set up browser-sync without much effort.

'use strict';
const browserSync = require('browser-sync').create();

gulp.task('bs', function(){
    browserSync.init({
        proxy: "http://example.com/", // проксирование вашего удаленного сервера, не важно на чем back-end 
        logPrefix: 'example.com', // префикс для лога bs, маловажная настройка 
        host:      'example.com', // можно использовать ip сервера
        port:      3000, // порт через который будет проксироваться сервер
        open: 'external', // указываем, что наш url внешний 
        notify:    true,
        ghost:     true,
        files:     [/*массив с путями к файлам и папкам за которыми вам нужно следить*/]
    });
    browserSync.watch([/*массив с путями к файлам и папкам за которыми вам нужно следить*/]).on('change', browserSync.reload); //вотчер для команды перезагрузки bs
});

gulp.task('build', gulp.series('compile', gulp.parallel('watch', 'bs')));

We go via ssh to our server and start the build.
Open http://example.com:3000/and enjoy all the features of browser-sync.

Answer 2

Based on this video, try https://www.youtube.com/watch?v=wE-Oi84UJXE and then be sure to write if you succeeded)

Answer 3

Maybe my solution will be useful to someone, I'll leave it here.
Based on the comment https://stackoverflow.com/a/35822444/8400413, configured as follows.
gulp

browserSync.init({
    socket: {
      domain: "localhost:3000"
    }
  });

Before </body> on a remote server

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