Laravel Mix Browsersync Docker

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'
});
Copy Code

Then, start the development server by running:

npm run watchCopy Code

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
Copy Code

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,
});
Copy Code

Now restart the application to expose the new ports:

docker-compose down
docker-compose up -d
Copy Code

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

docker-compose run --rm --service-ports npm run watchCopy Code

Alternatively, with aliases:

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

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
Copy Code

[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.