Configure browserSync using nodejs server

Question

I need help understanding the port settings for the node server and browser synchronization.

In the serevr.js file, the HTTP server listens on port 3006;   server.listen(3006);

I would like browsers to open a browser and indicate the address on the server port 3006. This is the port that the HTTP server is listening on. So the address will belocalhost:3006

gulpfile.js

gulp.task('serve', function() {
browserSync.init({
    server: {
        baseDir: './dist/'
    },
    port: 3006
 });
});

• In mac terminal I run gulp. A browser will open localhost:3006. Good.

• In another terminal window, I start the node server, nodemon dist/serevr.js

I cannot make them be the same. Either the server will not start, because something is already running on port 3006 (step 1), or the following will happen if I first started the server.

---

Local: http://localhost:3007
External: http://192.168.1.63:3007

---

How can I make them work together?

The solution was found using the answers below:

gulp.task('serve', function() {
    browserSync.init({
        port: 3007,
        proxy: {
            target: "localhost:3006",
            ws: true
        }
    });
});

Answer 1

, . , nodemon, , browser-sync . .

, nodemon, gulp. , node, .

-, , ws: true.

:

gulp.task('browserSync', function () {
    browserSync.init({
        port: 3007, // you can specify the port here
              // can't use the same port that nodemon uses.
        proxy: {
            target: 'localhost:3006', // original port
            ws: true // enables websockets
        }
    });
});

Answer 2

browserSync.init . . , .