How to Integrate React into Rails using Webpacker

June 26, 2017

If you're a Rails developer then you've heard the Rail's mantra "Convention over Configuration" many times. Some can argue it's a weakness but we've embraced it wholeheartedly. The problem is that sometimes it makes the Rail's framework feel too rigid to adapt new trends. Specifically, interactive UIs built using JavaScript frameworks.

The popularity of JS frameworks like Angular and React have spiked and outpaced Rails in recent years. Keep in mind that comparing these JS frameworks to Rails is an apples to oranges situation. Rails is a fully featured web framework while Angular and React are just used on the front-end. It's undeniable that they've got their strengths though and people want to take advantage of those features. Luckily, we have the option built in now. Rail's has officially enabled integration with these frameworks with the release of Rails 5.1. In this post, I'll show you how to get started by integrating React using Webpacker.

Getting Started

Before getting started you'll need the following things...

I'll assume you have the first two installed and just show you how I installed Node and Yarn. I found the easiest solution was to use homebrew since I'm on a Mac. You can check if you have them installed easily by typing...

Node --version
Yarn --version

If those both return results and are above the required versions then you're good to go. Otherwise, use the following homebrew instructions to install them.

brew install node
brew install yarn

After doing that you might need to close the terminal and open it up again. When you've done that and successfully gotten back the versions of Node and Yarn then you can move on.

Creating the Rails Project

In classic Rails fashion, you'll see it's just as easy as always to create the project with integration built in. Just type in.

rails new my-project --webpack=react

Your project will be created with all the necessary dependencies for you ready to go. Alternatively, webpack offers integration with Angular, Vue, and Elm as well. That's it for setting up the project. We'll render the pre-built hello_react.jsx file next.

Rendering React

You can make sure your project is working via the rails command bin/rails server and get the normal welcome page. To view the hello_react module we'll generate a controller with a single page and then render it on there.

bin/rails generate controller Pages HelloReact

This will give us a place to view our hello_react.jsx module. With those built, you'll wanna update the root to render that page.

root 'Pages#helloReact'

Next, you can find our react module inside app > javascript > packs and then click on hello_react.jsx. At the top, you'll see we have instructions on how to render the module via a Rails tag. Copy and paste that into the helloReact.html.erb view.

<%= javascript_pack_tag 'hello_react' %>

Finally, to render the view you'll need to open up a second terminal. I just press command-t to open up the second tab. In the first terminal, you'll start the Rails server like normal. In the second terminal, you'll type.

./bin/webpack-dev-server

This will compile the JavaScript files and if you have it running while making changes it'll auto update your view. When you get both of those running you can visit your website on the localhost:3000 and you should see this.

Hello React

Simple but admittedly easy right? Rails has made it incredibly easy to get up and running with these JavaScript frameworks in no time! If you'd like we can make it just a little easier and reduce our workflow down to one terminal.

First, add the foreman gem to your Gemfile.

gem 'foreman'

After that install the gem through the terminal.

gem install foreman

Lastly, create a Procfile in the top directory of your project. This file will tell foreman how to start your project when we tell it to. You can add the file however you want but I usually do it via the terminal like this.

touch Procfile

That'll only work if you're in the highest directory. When you've done that just copy and paste this into the file.

[x_code]web: bundle exec rails s

webpacker: ./bin/webpack-dev-server[/x_code]

With that saved, we can start the whole project with the one command foreman start. Just note that the project has changed to localhost:5000 so you'll no longer be using the traditional 3000 address.

Where from here?

For me, I'll be spending a lot of time reading up on React. I've already been digging through the documentation and it's very thorough. If you'd like to learn more about Webpacker you can checkout the Repo here on GitHub. It also has great documentation and walkthroughs on getting started with all of the integrated JavaScript frameworks.

Here are the sources I used to create this post if you'd like to go deeper.

I hope this has been helpful! I've really enjoyed using React with Rails and hope you will too! If you have any questions just leave them here or hit up me up twitter @josh_qn.

Thanks! Auf wiedersehen!