Setting Up React & Rails Has Never Been Easier

The release also brought along Yarn, a dependency manager for your Node packages. These two tools make it decidedly easier to handle a Rails app using React (all the rage these days), Angular or some other JavaScript framework. There are also some other notable changes, such as jQuery no longer being part of Rails by default.

I’ll go and demonstrate a very basic Rails + React project setup.

To start off we need to fetch the latest and greatest Rails release. Luckily, there’s a very simple way of doing that. Rather than having to manually pick a version and/or mess with Gemfiles, all we need to do is

    gem install rails --pre

Once that’s done, we’ll set up a new Rails project using the following. In this particular case we’ll skip over CoffeeScript and Turbolinks as we don’t have any use for them.

    rails new test_app - dev - force --webpack --skip-coffee --skip-turbolinks

Yarn will be included too. Next thing we do is use Yarn to fetch the webpack-dev-server, like so

    yarn add --dev webpack webpack-dev-server

Yarn will pull all the required packages and save the state in a lock file. Then we’ll install React using our local Rails binary and the new webpacker command-line tool.

    bin/rails webpacker:install:react

This will automatically pull everything that’s needed to start using React. You’ll notice some new folders/files, among them the addition of webpack, webpack-dev-server and yarn inside of /bin as well as a host of other configuration files you’ll need to get to know in the future if you intend on using these features.

The new folder structure includes a javascript/ folder inside of app/ as well as a packs/ folder within. This is where the “packs” will be put. The convention as of right now seems to be to include your “packs” inside of the main/default application.js (app/javascript/packs.application.js). By including your JavaScript code inside there, Webpack will be made aware of its existence.

I.e.

    require('./my_react_app.js')

Now onto the Rails side of things. To consolidate Rails and React into one whole, we include it using the new webpack tag inside of our template (if you’re doing this on an empty project, obviously you’ll want to do something like rails g controller Main index first).

Inside of our template (index.html.erb or whatever it is), we add this

<%= javascript_pack_tag 'hello_react' %>

helloreact actually already exists - your project _will actually have it - thanks to Webpack’s React generator. However, our Rails app is still at this moment unaware of there being a Webpack running and hosting the app. So what we’ll do now is head over to

config/environments/development.rb

and uncomment the third line

    config.x.webpacker[:dev_server_host] = "http://localhost:8080"

This is basically it as far as setting up React w/ Rails goes these days (and likely in the future), however since this requires us to run two separate servers at the same time, we might want to make use of the convenient and almost indispensable tool called foreman.

Add

foreman

to your Gemfile, run bundle and create a file named Procfile in your project’s root folder with the following content:

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

This way you’ll be able to run

    foreman s

with both the Rails and Webpack servers running inside of one tab. Granted, there are some downsides to it like debugging tools not working straight out of the box nor with all of their features available.

The boilerplate app is availble here.