How to use Browsersync with Laravel Valet (2021)

Published August 3, 2021; last updated on September 10, 2021
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.

Stay up to date with all things Laravel, Tailwind, WordPress & PHP

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

Image Ralph J. Smit
Ralph is a designer gone developer. He happily lives in the Netherlands. His passion for good design drove him towards development, because he felt that no-code tools were too limiting. On this blog, Ralph writes the articles he would've wanted to have during his continual developer journey. → Follow on Twitter

Comments

  • Bernard Chisumo

    August 14, 2021

    Thank you for sharing this article . I have tried to follow the instruction but one problem has occurred when I try to access the link . How do I resolve it ? ErrorException include(/Users/os/Documents/projects/shop-express/vendor/composer/../../app/Http/Middleware/HandleInertiaRequests.php): Failed to open stream: No such file or directory

    • Ralph Smit

      August 16, 2021

      Hey Bernard, happy to hear that! That sounds like it is an error in the Laravel application and not in Browsersync. When I look at the path I see that the error happens in the /vendor folder, so the folder with the composer dependencies. Could you try running "composer dump-autoload" and then try again?

Leave a reply

Your email address will not be published. Required fields are marked *

Close
Do you want more articles like this delivered straight to your inbox?

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.