Windows10HomeのHomestead(Laravel)でHMRをやってみる

以前に「Windows10HomeのLaradockでHMRをやってみる」という記事を書きましたが、それのHomesteadのLaravel版です。

設定としてはこちらの方が簡単です。

環境構成

開発
・Windows10 Home
・Oracle Virtual Box

サーバーサイド
・Laravel 5.6 Homestead

フロントエンド
・React 16.2

ローカルドメイン
test-app.local

Homesteadの基本的な環境構成は既に完了しているものとします。
参考：https://readouble.com/laravel/5.6/ja/homestead.html

webpack-dev-serverの設定

内容はDockerのLaradockのものと大部分は同じですが、プロキシの部分だけ少し変わります。
Homesteadではnginx実行環境が自身のサーバーと同じなのでlocalhostになります。
またポート8080も特別なことはしなくてもそのまま参照できるようです。

/testProject/webpack.mix.js

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.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
    output: {
      publicPath: "http://test-app.local:8080/"
    },
    devServer: {
      disableHostCheck: true,
      contentBase: path.join(__dirname, "public"),
      publicPath: '/',
      host: '0.0.0.0',
      port: 8080,
      proxy: {
        '/': {
          target : 'http://localhost'
        }
      },
      stats: { colors: true },
    },
    watchOptions: {
      poll: 2000,
      ignored: /node_modules/
    }
  });

Reactの変更

Reactの設定はDockerのLaradockのものと全く同じです。

パッケージを追加して、

# npm install -D  --no-bin-links --no-optional react-hot-loader

下記のようにAppContainerのコンポーネントで囲む形にします。

/testProject/resources/assets/js/app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

ReactDOM.render(
  <AppContainer>
    <div>
      <p>hello! World.</p>
    </div>
  </AppContainer>
  ,document.getElementById("content")
)

if(module.hot) {
  module.hot.accept();
}

実行確認

hot環境を実行して、

# npm run hot

ブラウザで以下URLを開いて確認します。
http://test-app.local:8080

コンポーネントを変更してみて、ダイレクトに変更されたら成功です。

---

以上になります。Homesteadは簡単でよいですね。