Introducing React on Rails v9 with Webpacker Support

React on Rails v9 completes the update to using Webpacker for publishing assets to Rails views, rather than the legacy “asset pipeline.”

The integration of Webpacker solves two problems for React on Rails users:

1. Webpacker provides standard view helpers to enable direct publishing from Webpack output to a Rails view. Previously, React on Rails apps would typically put the Webpack output into the asset pipeline. Webpack evolved to fully and better handle many of the Asset Pipeline’s responsibilities, including minification and fingerprinting.
2. Webpacker provides a great starter Webpack configuration. While the prior versions of the React on Rails installation generator had provided a very simple starter Webpack configuration, this was not an area of focus of React on Rails. New installations of React on Rails via the generator default to using the Webpack configuration from Webpacker.

Before Webpacker v3, React on Rails could not utilize the official rails/webpacker with React on Rails. That led to the creation of shakacode/webpacker_lite and React on Rails v8. I documented the details of in the article Webpacker Lite: Why Fork Webpacker? The major benefit of this fork of Webpacker was that it allowed us to figure out the gaps in Webpacker to support a project like React on Rails. The fork led to detailed discussions resulting in a merge of webpacker_lite into webpacker. You can find the details in Webpacker issue 464 and PR 601. The details are only relevant so far as to demonstrate the level of work involved in making this as simple as it is now with React on Rails V9 and Webpacker V3.

Why use React on Rails in addition to Webpacker?

Given that Webpacker already provides React integration, why would you add React on Rails? Additional features of React on Rails include:

1. Server rendering, often for SEO optimization.
2. Direct passing of props from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
3. Redux and React-Router integration
4. Localization support
5. RSpec test helpers to ensure your Webpack bundles are ready for tests

Additionally, we have a vibrant community of production projects using React on Rails.

Here’s a quick video walkthrough of creating a new Rails app with Webpacker and adding React on Rails.

With the Webpacker integration and the default Webpack setup, there’s not much complexity with adding React on Rails to a Rails app for server rendering with React + Redux + React Router.

My next article will document migration details of moving from v7 or earlier to v9.