Integrate Rails Application with React Using Webpacker Gem

Rails app is going to be treated as an API which communicates with the front-end side. Rails API leaves React to handle the UI.

In this article, we’re going to use webpacker gem to integrate Rails with React. However, there are other ways to create React applications. One of the most popular is to use create-react-app tool backed by Facebook. It provides a rich set of options and customizations.

Let’s get started. First, generate a new Rails app by running:

rails new app_name --webpack=react

At this point, Rails has created a javascript friendly app for us. Rails 5.1 comes with out-of-the-box support for SPA frameworks like React/Angular/Vue.js. It includes a webpacker gem which makes it easy to use Webpack to manage JavaScript modules within Rails app. You should have a webpacker now in your Gemfile.

The installer adds all required dependencies using yarn and creates a new app/javascript/packs directory with two additional files: application.js and hello_react.js. The application.js file is going to be an entry point for the front-end app. However, hello_react.js is an example created by Rails generator.

Webpack automatically compiles any Javascript or CSS, including React components inside/packs directory. If you want to change the directory destination, you can replace paths in webpacker.yml config file.

One more thing worth the mention is that webpacker coexists with Rails asset pipeline. You still can serve things from there if you need to.

Hello React

Let’s use the hello_react.js example right away and test our first React component.

Webpacker delivers a helper method javascript_pack_tag that allows embedding React components into Rails views. So first, let’s create home_controller.rb with empty index method and corresponding view to display our example.

rails g controller Home index

Set home#index as a root path to the routes file:

root to: 'home#index'

Use Webpacker helper method and add it to the head of the layout file:

application.html.erb.

<%= javascript_pack_tag 'hello_react' %>

Process manager

To make our life easier and prevent us by running commands manually, we’re going to create Procfile.dev file in the root directory of our project. The file is going to be an instruction for a process manager to run processes simultaneously. In our case, it will run the rails server and webpack-dev-server.

[ webpack-dev-server tracks changes within app/javascript directory and rebuild the front end on the fly ]

We’re going to use Node Foreman so make sure you have it installed.

Fill the file with the following:

rails: bundle exec rails s
webpack: ./bin/webpack-dev-server

Then run:

foreman start -f Procfile.dev

If you need, you can run a single process as well by giving a process name at the end of the command for example:

foreman start -f Procfile.dev webpack

Great, we’re ready to start our server!
Hit http://localhost:3000/,and you should see “Hello React” rendered.