Quick Tip💡 Laravel Mix Hot-Reloading in Sail with Browsersync

Surprisingly, it is not well-documented in the Laravel Official Documentation (either on Sail page or Mix page)

It is just a note for myself and hopefully an answer to your search. If you are a beginner, you can check out this post for kick-starting from scratch for Laravel Sail on WSL2 with Docker Desktop.

Publish Docker Files

You must expose port 3000 for Browsersync, publish the docker configuration files for editing.

sail artisan sail:publish

Modify webpack.mix.js

Add the following lines to the webpack.mix.js, for enabling BrowserSync.

mix.browserSync({
    proxy: 'localhost',
    open: false,
});

Modify docker-compose.yml

Edit docker-compose.yml file at the project root.
Add - 3000:3000 at the ports section, for exposing the port 3000

ports:
    - '${APP_PORT:-80}:80'
    - 3000:3000

Stop your container and Restart the container using:

sail down
sail up -d

Running Laravel Mix

You should install all the node components, by executing:

sail npm install

Then you should be able to execute Laravel Mix properly with:

sail npm run watch-poll

Now, you can open your browser with http://localhost:3000 with BrowserSync enabled.

If you like my article, please follow and share my article. You may follow this Github thread for more updates.

Video Demo:

Are you ready to put your sites online with unlimited app hosting for only $14 per month?

Cloudways comes with tons of features that make you easily host your Laravel, WordPress, or any PHP sites without worrying about cyber-securities nightmares.

Now you can extra discount during the BFCM 2023 campaign period!

Link: www.cloudways.com/en/?id=66136

Let’s start trying the Cloudways!