If you're like me, clicking the refresh page button in your browser for the 200th time while working on a local project eventually gets to be too much. After searching a variety of different combinations of "live reload laravel", "laravel browsersync" and the like, I was finally able to piece together how to get automatic page refresh working locally within my Laravel project. The official documentation is mostly great and informative but, especially for developers new to the framework, getting live reload working isn't exactly spelled out for you.

This is the quickest way to get Browsersync working on your local Laravel project. This framework offers loads of customization, so this post is tailored to new developers and students just looking for a much needed break from that refresh page button.

I'm assuming since you've found this post that you have a basic understanding of the framework and of package managers and installing development software on your Mac. For this example we'll be making use of Homebrew, npm, and obviously Laravel.

Web devlopers just love our package managers, so if you don't have Yarn, you'll need it (Laravel makes use of it anyway, so now is a good time to install it).

We will take care of global installation of Yarn so you won't have any trouble with new projects in the future. Open terminal and use Homebrew to install it:

Whether you have an existing Laravel project or need to create a new one, these steps will not change (other than installing the prerequisite applications that we're covering now). Assuming you have an existing project and you haven't done so already, navigate to your project root directory in terminal and enter:

This will install the dependencies that Laravel needs to serve your page with Browsersync and doesn't install automatically on creating a new project as with Composer packages.

Now, with your favorite text editor, open the webpack.mix.js file located in your Laravel project root directory. We will need to edit one of these lines to include browsersync in a way that will work for us. Below is what the lines we need to modify should look like (at least for version 5.5 of Laravel) after a fresh new project has been started:

mix.js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/app.scss', 'public/css');
 

Edit it to now look like this:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync('http://localhost:8000');

You will notice that the URL in the line we added is the exact URL (and port) that php artisan serve utilizes for working on our application locally by default. We won't need to use that URL anymore in our browser for working locally!

Now open your local server like you would normally with artisan by entering into terminal:

You'll need to open another terminal tab at this point, as we'll actually be utilizing two seperate local servers (which is what we require for live reload!)

Now you'll need to run another command in terminal. Note that this command may have to be run twice, as the first time you run it may just install dependencies required for the Mix to compile. So if you get errors, just run the same command once more before Googling error messages. In terminal:

Once this command runs successfully it should automagically open a new browser tab of a localhost server in your browser that will update any time you save a file within your Laravel project! Now that refresh page button can rest, finally.