3 of the Best Ways To Use React with Rails

If you’re a Ruby on Rails developer and you like using the React Framework for your front-end apps, but always encounter issues integrating both, then this article is for you.

Before I dive in, I need to be clear about something - Ruby on Rails is a very powerful tool that helps us set up amazing web applications in no time.

Not only that, but it’s great as it prioritizes Convention over Configuration. If you are wondering about what ‘Convention over Configuration’ is, then don't hesitate to review that here as I won't cover that in this article. In addition to Ruby on Rails prioritizing Convention over Configuration, it is also an open source software with more than 5,000 people already contributing to it. 

As programmers, we always like to find simple, effective, and fast ways to achieve our tasks. That’s why we tend to experiment with different types of frameworks, it’s often easier and faster to combine frameworks.  

Let’s focus on the issue at hand though - integrating the React framework with Ruby on Rails. This was not an easy task until the release of Ruby on Rails 5, which added an API configuration to it. With the latest release of Ruby on Rails 6, it has given us a way to build with Webpack which you can find more info about here. Let’s take a closer look at this.

1. The API Way 

Personally, I think this is the best way to do this. That’s because it creates a strong foundation to develop a mobile application. Let’s face it, everyone who develops a good web app will want, at some point, to create a mobile application out of it. This could be easily done by just making a JSON or XML request to our server. So, we’ll want to do this at the beginning of a project to make our life easier when the time comes.

Despite that I believe this is the best way to do it, it’s also the hardest way to do it but makes it much easier to scale. Now, let’s go over the main idea... 

We essentially want to create a completely separate application. The first application will be the one that handles all the back end functionalities, which is a normal Ruby on Rails application. You might be thinking, ‘Why not a Ruby on Rails API application? Isn’t that what we’re going to end up doing?’ The issue with that is it will ignore many libraries that in the long run we will end up setting up by ourselves. 

After setting up this Ruby on Rails application, we will want to create a completely separate application. Both of these applications should be located under the same root folder, for example: 

→ my_application 

→ back_end

→ front_end. 

Here we will end up setting up a completely functional React Web Application, which is going to retrieve all its data through a server request. 

So, when developing our application, we will end up having our web app running under the same address but through different ports.

For example; the Ruby on Rails app will be hosted under 127.0.0.1:3001 and the React app will be running under 127.0.0.1:3000. This means that the requests will be done by the same address, helping us achieve a faster response. 

2. The Inner API Way

This method, at its core, is very similar to the one mentioned above. However, instead of creating a completely separate folder for the React app, we will be nesting it into our Ruby on Rails app. This can be achieved by running the ‘create-react-app’ command or by dragging the folder into it. 

For this example, let’s refer to the React app as the ‘client’ and the Ruby on Rails app as ‘my-ror-app’. We will end up having it as follows; 

→ ‘my-ror-app’ 

→ ‘app’ 

→ ‘client’

When this method is done, I strongly recommend ignoring the Webpack installation when creating the RoR app since it can have some negative repercussions in our React application.

For both of these methods, we want to create a special rake task so that when we run our server, it will end up launching both applications. It will first launch the Front End and then the Back End, to ensure that our Front End will be able to retrieve the necessary information from the server.  

3. The React Gem Way

After the release of the React Gem we can now easily integrate any React component into our views. For more information on how to do this, check out this doc, where you’ll be able to find the manufacturing information regarding the gem. 

In my experience with it, it has helped me save a lot of time in the setup.

The downside of it is that your source code will display the props given to the element. Also, when you want to develop a mobile application, you will end up creating a separate API version of your current controller, thus creating some code duplication.

It has never been an easy task to set up an environment with different frameworks and languages, but thanks to the many users that have contributed to Ruby on Rails, each day it seems easier. I hope this article helps you understand how you can best use React with Rails.

Good luck, and happy coding!

To learn more about Microverse, and joining our supportive community of remote software developers, get started below!

Photo by ThisIsEngineering from Pexels.