How to serve React app with Ruby on Rails 4 backend

Question

We have a Ruby on Rails fullstack application, and we would like to turn it into a ReactJS application while keeping the backend code, and redoing the frontend code.

Our gemfile looks like this:

ruby '2.2.1'
source 'https://rubygems.org' do
  gem 'rails', '4.1.14'
  gem 'uglifier', '>= 1.3.0'
  gem 'coffee-rails', '~> 4.0.0'
  gem 'jquery-rails'
  gem 'jquery-ui-rails'
  gem 'jbuilder', '~> 2.0'
  gem 'sdoc', '~> 0.4.0', group: :doc
  gem 'bootstrap-sass'
  gem 'sass-rails', '>= 3.2'
  gem 'autoprefixer-rails'
  gem 'devise'
  gem 'devise_invitable'
  gem 'devise-token_authenticatable'
  gem 'omniauth'
  gem 'omniauth-facebook'
  gem 'omniauth-google-oauth2'
  gem 'figaro'
  gem 'haml-rails'
  gem 'mysql2', '~> 0.3.18'
  gem 'pundit'
  gem 'rolify'
  gem 'simple_form'
  gem 'wicked_pdf'
  gem 'wkhtmltopdf-binary'
  gem 'axlsx', '2.1.0.pre'
  gem 'axlsx_rails'
  gem 'axlsx_styler'
  group :development do
    gem 'better_errors'
    gem 'binding_of_caller', :platforms => [:mri_21]
    gem 'capistrano'
    gem 'capistrano-bundler'
    gem 'capistrano-rails'
    gem 'capistrano-rails-console'
    gem 'capistrano-rvm'
    gem 'capistrano-pending', :require => false
    gem 'capistrano-sidekiq'
    gem 'html2haml'
    gem 'quiet_assets'
    gem 'rails_layout'
    gem 'magic_encoding'
    gem 'annotate'
  end
  group :development, :test do
    gem 'factory_girl_rails'
    gem 'rspec-rails'
    gem 'letter_opener'
    gem 'bullet'
    gem 'timecop'
  end

  group :test do
    gem 'capybara'
    gem 'database_cleaner'
    gem 'faker'
    gem 'launchy'
    gem 'selenium-webdriver'
    gem 'simplecov'
    gem 'codeclimate-test-reporter', '~> 1.0.0'
  end

  gem 'passenger'
  gem 'passenger-rails'
  gem 'execjs'
  gem 'therubyracer', :platforms => :ruby
  gem 'newrelic_rpm'
  gem 'redis-rails'
  gem 'redis-session-store'
  gem 'redis-rack-cache'
  gem 'rack-cache'
  gem 'actionpack-page_caching'
  gem 'lograge'
  gem 'rocket_pants'
  gem 'active_model_serializers', '~>0.8.1'
  gem 'will_paginate'
  gem 'delocalize'
  gem 'phone'
  gem 'paranoia', '~> 2.0'
  gem 'bh', '~> 1.0'
  gem 'sidekiq'
  gem 'counter_culture'
  gem 'rollbar'
  gem 'oj', '~> 2.12.14'
  gem 'sidetiq'
  gem 'enum_help'
  gem 'sinatra', '>= 1.3.0', :require => nil
  gem 'awesome_print', require: 'ap'
  gem 'ngannotate-rails'
end
source 'https://rails-assets.org' do
  gem 'rails-assets-angular', '1.3.12'
  gem 'rails-assets-leaflet'
  gem 'rails-assets-angular-animate'
  gem 'rails-assets-angular-cookies'
  gem 'rails-assets-angular-resource'
  gem 'rails-assets-angular-sanitize'
  gem 'rails-assets-angular-touch'
  gem 'rails-assets-angular-route'
  gem 'rails-assets-angular-moment'
  gem 'rails-assets-angular-ui-date'
  gem 'rails-assets-angular-xeditable'
  gem 'rails-assets-components-font-awesome', '4.2.0'
  gem 'rails-assets-angular-loading-bar'
  gem 'rails-assets-angular-confirm-click'
  gem 'rails-assets-angular-strap'
  gem 'rails-assets-angular-dialog-service'
  gem 'rails-assets-angular-bootstrap'
  gem 'rails-assets-angular-translate'
  gem 'rails-assets-trNgGrid'
  gem 'rails-assets-accounting.js'
  gem 'rails-assets-angular-ui-notification'
end

Is this a realistic thing to attempt? I am not familiar with Ruby on Rails, and neither is anyone on our team. There seems to be a lot of under the hood logic, and I am wondering if some of this logic would prevent this from working 100%.

Answer 1

You just shared the Gem file, but nothing how this app is developed, so it is insufficient information to give you an accurate response. But usually, two different methods are followed.

First Method

Two separate application, as your ruby on rails application working, can create another react application, and consume all endpoints present in your Ruby on Rails application, if you could not find some require endpoint, you can check already made endpoints and make few new one following the way. Hopefully, it would be easier to do.

Using Gem of Ruby on Rails

In this method, you have to break apart your project and removing all Angular Gems already present in your project and start with fresh frontend with ReactJS. In my opinion, it requires much more Ruby on Rails knowledge to do it, but in the end, you will get just one project.

Your project

As from Gem file seem it is heavily using Angular, so probably you have run it and check if it has most of the Endpoints made Restful. If yes then I suggest to go on method one and create new ReactJS app, which will consume all endpoint made in Ruby on rails, that would be more work on React side app and less on Ruby on Rails. Even if you found that some endpoints are not present you can follow already created endpoints coding and action, where you will complete details. I understand there will be two different projects, but the learning curve to learn Ruby on Rails and integrating it with React would be more than having two different projects.