Developing with React.js and a Node.js based server is a dream! When your stack isn't full JavaScript, taking advantage of the latest dev tools can be a challenge.

I faced a similar situation with the wish to use the awesome React Hot Loader with Webpack in a recent Ruby on Rails project.

React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.

While the syntax make be less than desirable and a bit confusing at times, I was able to get everything working with the Webpack Dev Server alongside Ruby on Rails and step through the process below.

Before we begin

If you're new to installing and working with webpack, I recommend Pete Hunt's awesome webpack-howto. I also recommend reading through Justin Gordon's Fast Rich Client Rails Development With Webpack and the ES6 Transpiler for an initial integration of Webpack and Ruby on Rails.

Installation

Install webpack, webpack-dev-server and react-hot-loader via npm:

npm install --save-dev webpack webpack-dev-server react-hot-loader

Webpack, Webpack Dev Server and HotModuleReplacementPlugin

A separate "hot" version of the configuration is recommended, based off of an original development webpack configuration file.

Add the webpack-dev-server and the hot reloading server in the array before your app's entry point file. Note that we add a client url to the webpack-dev-server entry.

We will output a file with wp_bundle.js as the suffix to help identify files that were generated by Webpack and saved to the Asset Pipeline directories for further processing. It is also important to specify a publicPath that matches the client url set above with the webpack-dev-server.

Add a section for plugins and require the HotModuleReplacementPlugin(). Optionally, but recommended, add the NoErrorsPlugin() that will pause when it encounters a syntax error. Once you fix the error it will automatically resume hot loading.

Finally, add the react-hot loader to your loaders block.

The complete webpack.hot.config.js:

Rails config/environments/development.rb

In development we will instruct the Asset Pipeline to send requests for files with the suffix of wp-bundle.js to the webpack-dev-server, which we have running on 8080. This will update the URI to be fully qualified (e.g. http://localhost:8080/assets/App_wp_bundle.js). All other assets will be served as normal from Ruby on Rails.

Add a block to configure the asset_host:

Development

With configuration complete, it's time to run the setup. During development you can manually start the webpack-dev-server separate from your rails s command.

From the Rails Root:

webpack-dev-server --config webpack.hot.config.js --hot --progress --inline

Note: The --inline flag is required for this to inject the hot loader script into Rails

An alternative would be to start both Rails and webpack-dev-server with a single command using foreman:

To run:

foreman start -f Procfile.dev

Summary

You now have a working Webpack configuration with React Hot Loader, served by webpack-dev-server via port 8080. Rails has also been modified to serve assets with the suffix of wp_bundle.js from Webpack Dev Server when in development mode.

Configure Webpack Dev Server and React Hot Loader with Ruby on Rails