How to Integrate React into Rails using Webpacker
June 26, 2017
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.
Before getting started you'll need the following things...
- Ruby 2.2+
- Rails 5.1+
- Node.js 6.4.0+
- Yarn 0.20.1+
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...
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.
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.
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.
First, add the foreman gem to your Gemfile.
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.
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
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?
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!