Ruby/React Project: All in One Place

I’m beginning a new project this week that has the potential to be a profitable product (no pressure at all). I’ve built and worked on plenty of projects for the past two years, but this will be the first for a client and that could be potentially marketed if all goes well. It’s all very exciting and scary at the same time.

One of my first decisions as lead developer was how to set-up the project, wondering if a Ruby on Rails backend and a React-Redux frontend would be viable for this website. After learning that plenty of major websites and applications were built with the same stack, I felt more confident moving forward with my skills.

Still, I wanted to explore the best techniques for planning and beginning the project, including reading some tutorials. This particular walkthrough had enlightened me to a few things that seemed very helpful for my website, including a React gem built specifically to work alongside Ruby on Rails. I was caught off guard considering I’ve worked exclusively with these coding languages and had no idea that the gem existed. It was also incredibly easy to set up as well.

rails new rails-react-project -d=postgresql --webpack=react

What I also discovered was it was possible to build a React frontend through Ruby as well. I built an application exclusively with RoR but primarily with vanillaJS and erb files. My previous projects had separated the frontend directory from the backend, which meant two different hosts had to be launched to preview my project. Plus every time I went to deploy my project on Heroku, I had to create separate Github repositories, which frankly became frustrating.

I was happy to make this discovery, as the amount of files to work with had shrunk by almost half and I was only required to initialize one server on Ruby rather than two separate. There were some minor changes needed to configure this set-up and allow React components to yield in Ruby compatible files. First, there is a file located under views/layouts directory labeled application.html.erb that already has some generated code in it. These two lines need to be added in the header section.

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= javascript_pack_tag 'Index' %>

As you may have noticed before, the second line of the code inserted into the application references this index file. It is also necessary to specify the root page in routes to register where React components should be rendered. Based on the advice of the tutorial, I generated a homepage controller to act as the root for the project, which manifested a homepage directory in views along with a basic erb file. I cleared out the contents of the file, making it a blank file, and renamed it index.html.erb. Finally, I specified this as the root landing page in the routes file.

Rails.application.routes.draw do
    root ‘homepage#index’
end

After setting this up, I was a little hesitant to continue on this path as I was out of my comfort zone. Eventually I realized that I could still include multiple directories including containers, actions and reducers. I will still be taking an alternate approach as I will attempt to use Redux and associated packages while working in Ruby, and so far it is working fine. We’ll see what trouble I run into next week. In the meantime, cross your fingers and say a prayer for me!