Laravel Mix with Browser Sync

Being an old fogey, I tend to be Perl-lazy as much as possible across all of my code. This tends to result in either a bit of code that is as small as practicable, or a large and/or sufficiently complex stack of code that I am likely to never have to look at again once it is done.

Which is why when it comes to front-end development, the more I can automate, the better. Which is why I fell in love with Grunt, then Gulp, and, finally webpack.

Imagine my joy when I started to learn Laravel and discovered Laravel Mix!

As I delved into Laravel, I quickly got tired of reloading the web browser every time I made a change to the front end. Laravel Mix to the rescue!

Here is my current webpack.mix.js file:

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.autoload({
        jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
    })
    .js('resources/assets/js/bootstrap.js', 'public/js/libs.js')
    .version()
    .js('resources/assets/js/app.js', 'public/js')
    .version()
    .js('resources/assets/js/dbrd.js', 'public/js')
    .version()
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version()
    .browserSync({
        host: "<dev.example.com>",
        proxy: "<dev.example.com>",
    });

NOTE: Remember to replace “<dev.example.com>” with the domain you wish to use for local development, and keep the quotes.

Now, in a terminal, run npm run watch. Let Laravel Mix compile your front end code, and, if all goes well, a new browser window will open on port 3000.

From here, if you change almost any code in your front end, your browser will automatically reload and display your changes.

It can be good to be lazy in the right way!

Leave a Reply

Your email address will not be published.