react_on_railsにHMRを導入する

はじめに

RailsでRactを導入したい時の選択肢の一つとしてreact_on_railsがあると思います。

今回はそのreact_on_railsでのHMR (Hot Module Replacement)を導入する方法をご紹介します。

HMRを有効化することで、Reactコードを変更するごとにブラウザをリロードせずに変更箇所だけ更新されるのでより効率良く開発が進められます。

パッケージのインストール

まずは必要なパッケージをインストールします。

$ yarn add -D react-refresh @pmmmwh/react-refresh-webpack-plugin

Babel設定

次にBabelの設定です。

dev serverを利用中の時だけ、先ほどインストールしたreact-refreshを利用するようにします。

// babel.config.js

module.exports = function(api) {
    // 省略
    return {
        //省略
        plugins: [
            //省略
            process.env.WEBPACK_DEV_SERVER && 'react-refresh/babel',
        ]
    }
}

Webpack設定

最後にWebpackの設定です。

こちらもdev serverを利用中の時だけ、ReactRefreshWebpackPluginを利用するようにします。

// config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const environment = require('./environment')

const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER;

//plugins
if (isWebpackDevServer) {
    environment.plugins.append(
        'ReactRefreshWebpackPlugin',
        new ReactRefreshWebpackPlugin({
            overlay: {
                sockPort: 3035
            }
        })
    );
}

module.exports = environment.toWebpackConfig()

WebpackerのHMRオプションも忘れずにtrueにしてください。

# webpacker.yml

# 省略

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true # <- ここをtrueにする

# 省略

開発サーバー起動用ファイルの用意

こちらはやらなくても良いですが、railsとwebpack-dev-server、webpackそれぞれ立ち上げるのが面倒なので、Procfile.devのようなファイルを用意して一度に立ち上げるようにします。

web: bin/rails server -p 3000
wp-client: bin/webpack-dev-server
wp-server: SERVER_BUNDLE_ONLY=yes bin/webpack --watch

これで以下コマンドで全てのサーバーが立ち上がります。

$ foreman start -f Procfile.dev

foremanがインストールされてない場合は gem install foreman でインストールしてください。

これでブラウザコンソールで[HMR] Waiting for update signal from WDS... のようなメッセージが出力されていたら成功です。

Reactコードを編集してもブラウザのリロードがされないはずです。

おわりに

これで一部のReactコンポーネントを編集するだけで全てのビューを読み込み直すような無駄な処理が発生せず、より効率的にフロントエンドの開発を進めることができるようになりました。

react_on_railsを使っている方はぜひHMRを導入してみてはいかがでしょうか。