Learn how to use Laravel Mix & Browsersync Docker. Our Laravel Support team is here to help you with your questions and concerns.

Laravel Mix Browsersync Docker

Did you know integrating tools like Browsersync with Laravel Mix improves the developer experience?

Today, we are going to take a look at how to use Browsersync in the Dockerized Laravel Mix environment.

How to Set Up Browsersync in Laravel Mix

To enable Browsersync support in Laravel Mix, we have to call the `mix.browserSync()` command. We can pass either a string or an object to this method. The proxy represents the domain name for proxying output from the webpack Dev Server through Browsersync.


mix.browserSync('my-domain.test');
// Or using Browsersync settings:
mix.browserSync({
proxy: 'my-domain.test'
});


Then, start the development server by running:

npm run watch

Docker Compose Configuration

To make npm commands available in a Docker container, we can use the Docker Compose configuration. Ensure that the container exposes Browsersync’s default port (3000) and its UI (3001):

npm:
image: node:14-alpine
container_name: my-app-npm
volumes:
- .:/var/www/html
working_dir: /var/www/html
entrypoint: [ 'npm' ]
networks:
- default
ports:
- 3000:3000
- 3001:3001


Laravel Mix Configuration

In the Laravel Mix configuration, add Browsersync settings within the `mix.browserSync()` method:


mix.browserSync({
host: 'localhost',
proxy: 'my-app-api',
port: 3000,
open: false,
});


Now restart the application to expose the new ports:

docker-compose down
docker-compose up -d


We can use the following command to run npm with service ports:

docker-compose run --rm --service-ports npm run watch

Alternatively, with aliases:

dc up -d
dcr --service-ports npm run watch


Laravel Mix Hot-Reloading in Sail with Browsersync

For Sail users, port 3000 has to be exposed. Then run these commands:

sail artisan sail:publish
sail down
sail up -d
sail npm install
sail npm run watch-poll


[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

In brief, our Support Experts demonstrated how to use Laravel Mix & Browsersync Docker.