Docker x Laravel Browser Auto Reload (Hot Module Replacement)

It will be much easier to develop if the browser reloads automatically when the css or js file is changed. So, set the browser automatic reload setting with Laravel-mix.

Target person

For those who write Laravel Blade

Premise

-Build the strongest Laravel development environment using Docker [new edition]

• https://github.com/ucan-lab/docker-laravel

This article is a supplement to the above article.

environment

• PHP: 7.4.6
• Laravel: 8.5.0
• Node: 14.2.0
• yarn: 1.22.4
• browser-sync: 2.26.12
• browser-sync-webpack-plugin: 2.2.2
• vue-template-compiler: 2.6.12

Preparation: When using yarn

{
    // ...
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

Replace npm run with yarn.

{
    // ...
    "scripts": {
        "dev": "yarn development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "yarn development -- --watch",
        "watch-poll": "yarn watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "yarn production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    // ...
}

Modify webpack.min.js

js:webpack.min.js

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

mix.js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: {
            target: 'http://app:9000',
        },
        files: [
            './resources/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    });
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Build

$ make web
$ yarn install

#I'm going to install it with the npm command, so add it manually.
$ yarn add -D vue-template-compiler browser-sync browser-sync-webpack-plugin

$ yarn hot

http://127.0.0.1

If the files under resources or public are changed, the browser will be reloaded automatically. This is ok, but it's really slow when I build it in a container ...

Write the settings when using Node locally.

When using a local Node

js:webpack.min.js

        proxy: {
            target: 'http://127.0.0.1', //Rewrite(Specifying a web container)
        },

Start the Webpack server.

$ cd backend
$ yarn hot

http://127.0.0.1:3000

reference

https://browsersync.io/docs/options