Cannot get Browsersync working properly with Laravel Sail with Laravel Mix

Question

I have managed to get Browsersync partially working, however, whenever I make a request from my app after the page has loaded, the request is sent to the wrong URL.

The following are my Browsersync settings:

mix.browserSync({
    proxy: 'localhost',
    port: 8082,
    injectChanges: false,
    open: false,
    files: [
        './public/css/*.css',
        './public/js/*.js',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './resources/css/**/*.css',
    ],
})

And here is my docker-compose.yml:

version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        working_dir: /var/www/html
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - "9865:22"
            - "8082:8082"
            - "8083:8083"
        # ...

I navigate to http://localhost:8082/ and the page loads fine and Browsersync says it's connected. When I submit my form though, I get the following:

From my understanding, this is an issue with the proxy not having the port, however, I tried changing the proxy to localhost:8082 and then I couldn't even connect anymore. I also tried other suggestions of changing it to 127.0.0.1 which made no difference.

Answer 1

I fixed my issue by setting the following configuration:

mix.browserSync({
    proxy: 'localhost:8081',
    port: 8082,
    ui: {
        port: 8083,
    },
    injectChanges: false,
    open: false,
    files: [
        './public/css/*.css',
        './public/js/*.js',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './resources/css/**/*.css',
    ],
    watchOptions: {
        usePolling: true,
        interval: 500,
    },
    ghostMode: false,
})

Where 8081 is the APP_PORT set in the .env file. In other words, Browsersync needs to be proxied to the same port as your app is running on.