Laravel Mix & browserSync | change socketURL parameter

Question

• Laravel Mix Version: [email protected]
• Node Version: v14.17.4
• NPM Version: 6.14.14
• OS: Docker pod build from hp:8.1.12RC1-fpm-alpine3.16, node:14.17.4 and nginx:1.19.2-alpine-perl

Description:

I am running laravel in a docker pod which sits behind an nginx of the host system. Part of that docker pod is another nginx proxy server. That way i can run mutliply instances of that docker pod on the same host sytem an each of them uses its specific port range.

Because all of that happens on the same host i cannot use port 3000 (inside the docker pod i am using that port but websocket connection and retrival of the client script have to use external port) for each of the browsersync/node instances. I am able to get browser-sync-client.js by using my custom proxy ports but in that script the standard port 3000 seems to be hardcorded? And this results in a websocket connection to that port - which wont work since i am behind my proxied custom port.

How to change the socketUrl by setting any of the mix options in my webpack config?

    mix.browserSync({
        proxy: "http://node:3000", // name of the service in docker-compose.yml, running on http cause webservers handels encryption
        host: "node", // ip of the service container
        open: false,
        port: 3000,
        logConnections: true, // not needed, debugging stuff
        logLevel: "info", // not needed, debugging stuff debug/info/silent
        // browsersync features to transfer clicks, scroll and form inputs via websocket
        ghostMode: {
            clicks: false,
            forms: false,
            scroll: false,
        },
    });

Answer 1

Got it working by passing an object "socket" and a property "domain" in there which has a custom port in it. There should be property "port" too but it doest seem to be used? This is the relevant method in browser-sync sources

    mix.browserSync({
    proxy: "http://node:3000", // name of the service in docker-compose.yml, running on http cause webservers handels encryption
    host: "node", // ip of the service container
    open: false,
    port: 3000,
    socket: {
        domain: 'mycustomdomain:18208',
        //port : 18208
    },
    logConnections: true, // not needed, debugging stuff
    logLevel: "info", // not needed, debugging stuff debug/info/silent
    // browsersync features to transfer clicks, scroll and form inputs via websocket
    ghostMode: {
        clicks: false,
        forms: false,
        scroll: false,
    },
});