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.

score 1 · Accepted Answer · answered Jun 02 '22 at 00:39

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.

Cannot get Browsersync working properly with Laravel Sail with Laravel Mix

1 Answers1