Easy React Server Rendering with rails/webpacker v4 and React on Rails

I’m excited about the v4 update of Webpacker. This release brings several big updates from the Webpack ecosystem, notably support for Webpack v4 and Babel 7.

In case you haven’t hard, you want to be on Webpack v4! Why? For the official story, see the official release article. To summarize:

1. Much faster build times, so you can see your changes more quickly!
2. Easier configuration, although if you’re using rails/webpacker, you might not see that so much, since you only are customizing beyond the defaults set by rails/webpacker.
3. Better support for code-splitting. If you’re using react-router , you can get a solid performance gain by code-splitting your routes.

While Webpack v4 has been out since February 2018, rails/webpacker has not yet been officially updated.

As of October 14, 2018, I just tested out the pre-release version of rails/webpacker, and it works fine with React on Rails. See the details at the bottom here.

Additionally, I just published React on Rails version 11.1.7, which fixes an issue with server-side-rendering when using the webpack-dev-server, which optionally provides Hot Module Reloading.

In case you want to see how easy it is to set up a live web application leveraging Rails plus React, you really should give React on Rails a try. The React on Rails generator leverages rails/webpacker to enable a zero-config setup of your client-side assets.

Why Use rails/webpacker for Webpack setup?

React on Rails has utilized rails/webpacker since September 2017 for the view helpers and, optionally, for the Webpack configuration. The generator and tutorial utilize the automatic Webpack configuration because it’s awesome for a quick demo. However, many React on Rails applications needing server rendering should consider a custom Webpack setup, as explained below.

Why Have a Custom Webpack Setup?

The main issues I’ve seen with using rails/webpacker for the Webpack configuration are:

1. Do you want the extra layer of abstraction on top of the simplified setup of Webpack v4? Webpack v4 introduced the concept of “modes”. The magic can have its downsides. Not only must you consult the well-written Webpack docs, but you might need to dig into the source code of rails/webpacker to see what it’s doing.
2. rails/webpacker does not support different configurations for server and client rendering. This is recommended (and probably necessary) if you are using server rendering and you need to have different configurations for client and server rendering, such as different entry points. For example, the code for react-router on the client must be different than for server rendering.

My company, ShakaCode, has helped many companies with their Webpack and overall React server-side rendering setup for efficient development and optimized deployments.

Creating a new React on Rails App to Use webpacker v4

I just updated the React on Rails tutorial instructions to include the details of how to use the pre-release version of rails/webpacker. You can find the details here. You can see the basic steps followed here in this GitHub repo.

Upgrading an Existing React on Rails App to Use rails/webpacker v4

The following steps can be followed to update a Webpacker v3.5 app to v4 based on Github’s rails/webpacker master branch. Here is an example commit of these changes. Here is a list of the steps.

1. Update the Gemfile’s webpacker to** gem ‘webpacker’, github: “rails/webpacker"**
2. Update the package.json’s @rails/webpacker to @rails/webpacker”: “rails/webpacker”. Note, this is how you reference the github version.
3. Merge changes from the new the new rails/webpacker default .babelrc to your /.babelrc. If you are using React, you need to add ``"@babel/preset-react", to the list ofpresets`.
4. Copy the file .browserslistrc to /.
5. Merge any differences between the new rails/webpacker config/webpacker.yml and your /config/webpacker.yml.