Add BrowserSync mix package

Author: relliv

src/.gitignore

@@ -1,6 +1,7 @@
 /node_modules
 /public/hot
 /public/storage
+/public/dist
 /storage/*.key
 /vendor
 .env

src/README.md

@@ -2,7 +2,7 @@
 
 Batteries included ready to use development environment for Laravel.
 
-## Preinstalled packages
+## Preinstalled laravel packages
 
 - [clockwork](https://github.com/itsgoingd/clockwork): Modern debugging tool for Laravel. (debugbar alternative)
   - Navigate to `/clockwork` in your browser.
@@ -29,6 +29,11 @@ Batteries included ready to use development environment for Laravel.
   - [pint](https://github.com/laravel/pint): PHP code style fixer (PHP-CS Fixer wrapper).
   - [pest](https://github.com/pestphp/pest): Pest is an elegant PHP Testing Framework with a focus on simplicity.
 
+## Preinstalled mix packages
+
+- [browser-sync](https://github.com/Browsersync/browser-sync): Keep multiple browsers & devices in sync when building apps.
+  - First, you must run `php artisan serve` to start the server. Then run `npm run watch` to watch for changes. Browsersync listens to laravel app 8000 port and exposes it to your browser at `localhost:3000` and Browsersync UI `localhost:3001` ports.
+
 ## Artisan Commands
 
 <details>

src/package-lock.json

@@ -11,8 +11,11 @@
     },
     "devDependencies": {
         "axios": "^0.25",
-        "laravel-mix": "^6.0.6",
+        "browser-sync": "^2.27.10",
+        "browser-sync-webpack-plugin": "^2.3.0",
+        "laravel-mix": "^6.0.49",
         "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+        "postcss": "^8.1.14",
+        "webpack-cli": "^4.10.0"
     }
 }

src/package.json

@@ -0,0 +1,4 @@
+{
+    "/dist/js/app.js": "/dist/js/app.js",
+    "/dist/css/app.css": "/dist/css/app.css"
+}

src/public/mix-manifest.json

@@ -1,4 +1,6 @@
-const mix = require('laravel-mix');
+const mix = require("laravel-mix");
+
+mix.browserSync({ proxy: "localhost:8000" });
 
 /*
  |--------------------------------------------------------------------------
@@ -11,7 +13,8 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
+mix.js("resources/js/app.js", "public/dist/js")
+    .postCss("resources/css/app.css", "public/dist/css", [
         //
-    ]);
+    ])
+    .disableNotifications();