'Cannot get Browsersync working properly with Laravel Sail with Laravel Mix

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:

Browsersync XMLHttpRequest error

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.

laravel-mixbrowser-syncinertiajslaravel-saillaravel-mix-vue3


Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matthew Knill

Related Questions