Okay, let's discuss automatic browser reloading. So maybe we're going to have a standard entry file, and I will export that to the public/js folder. Actually a quick note on that. The public folder is the default that Laravel Mix uses within a Laravel project. You can even override that by saying mix.setPublicPath to, you know, whatever it may happen to be for your project. But anyways, by default it's set to public, which means we're actually going to strip this off. So you could leave it at that if you want.

this off. So you could leave it at that if you want. Sometimes I'll keep the public directory just to make it that much more explicit about where this directory is located, but entirely up to you. Anyways, let's clear this out. Okay, next I'm going to have, how about sass in this case. And we'll put that in the public css directory, where once again, you can just say css. And then the default of the public directory will take precedence there. Alright, so let's go ahead and compile that down. Next, we'll go to our welcome file.

Alright, so let's go ahead and compile that down. Next, we'll go to our welcome.blade.php file. This is just the default view that loads with Laravel. And we'll say right up here that we want this file. And then down here we'll have the same for a script. Like so. Okay, let's view this in the browser. So if we take a look at this, we can see a yellow background. And that's specifically because I set that within our main Sass file. But now if I want to change it to red, well, if I give it a refresh, it won't take effect.

But that still doesn't change the fact that I have to manually refresh the browser. So that's where BrowserSync comes into play. Let's come back to code. And right here, we're going to say mix.browserSync. And we need to give it our custom domain name. Often this will be something like app.dev, whatever local domain you use to preview your site. Now if we switch over, in this case, I'm just actually using php artisan serve here. Let's switch that. And now we're going to give it another run.

Let's switch that. And now we're going to give it another run. npm run watch. Now mix will detect, ah, you want browser sync. Let's pull in a few things this first time. And then after that, anytime you run npm run watch, it will detect, okay, you probably want to automatically refresh the browser each time you make a change. So we'll take care of that for you. Here we go. So let's make a change now.

Here we go. So let's make a change now. And we'll do this to the side so that you can see. So right here, we'll do yellow again. And if I save it, you'll immediately see it take effect over here. So we'll say color is green, background is red. You get the basic idea. Now let's just bring this to black and white. And if we were to switch, of course, this will take effect for your HTML as well, as you see there.