- Published on
Configure Webpack Dev Server and React Hot Loader with Ruby on Rails
- Kevin Old
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.
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.
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:
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
--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:
foreman start -f Procfile.dev
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.