How to use Browsersync with Laravel Valet (2021)

If you're a developer in the PHP world, it's likely that you've come across Laravel Valet. Laravel Valet is a very easy way to spin up multiple local development environments, by linking a folder name to a {folderName}.test domain.

Browsersync is a tool to make developing easier. It offers handy tools, of which the most important is automatic browser reloading on file change. Unfortunately Browsersync doesn't work out-of-the-box with Laravel Valet, but luckily it requires only a little configuration.

There are roughly two ways to install Browsersync: install it via Laravel Mix in a Laravel project (or in an other PHP-project if you required Laravel Mix as a package) or install Browsersync without Laravel Mix, but with npm.

Installing Browsersync with Laravel Mix

A very handy feature of Laravel Mix is that it supports Browsersync straight out-of-the-box. Open up your webpack.mix.js file, paste the below code in and edit the first line, so that it contains the correct url.

const domain = 'yourdomain.test'; // <= EDIT THIS
const homedir = require('os').homedir();
 
// The mix script:
mix.browserSync({
      proxy: 'https://' + domain,
      host: domain,
      open: 'external',
      https: {
        key: homedir + '/.config/valet/Certificates/' + domain + '.key',
        cert: homedir + '/.config/valet/Certificates/' + domain + '.crt'
      },
      notify: true, //Enable or disable notifications
  })

This setup assumes an https:// configuration, so you might need to run the following command in order to create an SSL certificate and allow to run the website on https://:

valet secure

To start using Browsersync, just run npm run watch and your browser will automatically open the following url: https://yourdomain.test:3000.

npm run watch

As long as the above command keeps running, your browser will automatically refresh when it detects a file change.

Installing Browsersync without Laravel Mix

The other way to install Browsersync is without Laravel Mix. This means that it can be installed in almost any project. For example, you could use it to reload your local WordPress website when you make a change to a theme file.

Install Browsersync via npm

First, you need to install Browsersync. Installation is global and done via npm.

npm install -g browser-sync

Create a Browsersync configuration file

Next, navigate to the folder with your website files. When using Laravel Valet, this is the folder that is linked to the domain you visit in your browser, like so: {folderName}.test.

Run the following command to create a configuration file. This will create a bs-config.js configuration file in your directory.

browser-sync init

Use Browsersync with npm

Open the Browsersync configuration file and add the following code at the top of the file (below the first comment block):

const domain = 'yourdomain.test'; // <= EDIT THIS
const homedir = require('os').homedir();

Next, make sure that the following lines look like this:

"files": "**/*", //Change this line. It means that it watches for file changes in this everywhere.
"proxy": 'https://' + domain, //Change this line
 
    // Add these lines:
"https": {
    "key": homedir + '/.config/valet/Certificates/' + domain + '.key',
    "cert": homedir + '/.config/valet/Certificates/' + domain + '.crt'
},
 
 
"host": domain, // Change this line

Again, this setup assumes an https:// configuration, so you might need to run the following command in order to create an SSL certificate and allow to run the website on https://:

valet secure

And.. you're done!🎉 Now, run the following command and enjoy✨ Your browser will automatically open after running this command and will automatically reload when you a file is changed. Pure magix

browser-sync start --config bs-config.js

Conclusion

As you can see, installing Browsersync with Laravel Valet is not difficult: you just need the right configuration. Once properly installed, it can save you hours of time.

And did you know that there are many more options to configure, like disabling the Browsersync notification every time the page reloads? Make sure to check out all the available configuration options on the Browsersync website.