【Laravel】Homestead + Laravel Mix + ReactでBrowsersyncする

公式ドキュメントの情報が薄くて役に立たないため、他の方の記事を参考にした。
しかしうまくいかなかったため、試行錯誤してうまくいった結果だけ残しておく。

環境

• MacBook Pro
• Vagrant 2.2.10
• Laravel Homestead 9.5.1
• Laravel Framework 6.20.7
• Laravel Mix 5.0.9
• React 16.14.0

設定

watchOptionsとか要らない。

/webpack.mix.js

...
mix.browserSync({
    host: 'hoge.test', // proxy.targetと合わせる
    proxy: {
        target: 'http://hoge.test', // /etc/hostsで設定しているドメインのURL
    },
    files: [ // 変更検知してほしいファイルを列挙する
        './resources/**/*',
        './public/**/*',
    ]
});

起動

watchだと変更検知されないためwatch-pollする。

$ npm run watch-poll

...
[Browsersync] Proxying: http://hoge.test
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://hoge.test:3000 # ブラウザでこれを開く
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------
[Browsersync] Watching files...

画面右上にBrowsersync: connectedと出るため、ファイルを変更してホットリロードされればOK。

参考