React-Rails Gem Integration for ReactJS frontend

Introduction

This page contains documentation for integrating ReactRails framework to Expertiza application which can be cloned from here. The whole idea was to continue using the existing backend created in Rails and integrate a new ReactJS frontend into the application. The references described in the page can be found here.

The challenge is to migrate front-end functionality incrementally from Rails to Javascript. The ReactRails framework facilitates this by allowing certain functionality to be kept in Rails while other functions are in React that is "mounted on" an .erb file.

Currently, we have a separate code base created for ReactJS frontend which interacts with the backend in Rails via a separate set of controllers written in the Expertiza /app/api/v1 folder. This is because ReactJS applications make AJAX calls using Axios to the backend which require to transact in JSON data and not use erb views. This approach not only violates the DRY principle, but also requires us to maintain 2 Expertiza development repositories 1 for frontend and the one already in use which has backend and erb views. As a solution to this, React-Rails is a framework that can be installed as a gem, which will help us to create and integrate React components into our existing Expertiza code base in Rails. Official React-Rails repository and documentation can be found here.

React-Rails Integration Steps

Following steps describe the ReactRails integration into Expertiza step-by-step as follows:

• Note: Detailed instructions can be found at the above link.
• Install yarn from https://yarnpkg.com/lang/en/docs/install/#debian-stable as it is a necessity for foreman
• Add the gems 'react_on_rails' and 'webpacker'

  gem "react_on_rails", "11.1.4" # Update to the current version
  gem "webpacker", "~> 3" # Newer versions might be supported
  

• Execute the below commands:

  $ bundle exec rake webpacker:install
  $ bundle exec rake webpacker:install:react
  

• Generate a simple sample React Component 'hello_world' to check if everything is installed correctly.

  rails generate react_on_rails:install
  

• Starting a server for this change requires the foreman gem, you can install it by 'gem install foreman'
• Server can be started by:

  foreman start -f Procfile.dev

Issues Faced

Issues were faced during the integration process, which will be incrementally added below, since the development is in progress, and the page will be updated with the progress:

• Version compatibility: The react-rails gem requires Rails version 5.1+, but as of now we managed to get it working with Rails 4.
• mini-racer gem: This gem's latest version is not supported with Expertiza's Rails version 4, and hence we had to use the older version or completely skip using it.

Current Status

As of now, the application supports both JS (the new front-end) and the existing front-end. The idea is to progressively remove older front-end as we add bits and pieces of the newer front-end. Incremental version upgrade for rails is also under plans to get it to the latest version to avoid any clashes with the front-end migration. Currently the status is on checking if the props can be passed to avoid calls via ajax, hence reducing a huge dependency which will help us get rid of axios calls.

• The JS code is mounted on to the expertiza.html.erb file.
• The data is fetched from the controllers after the respective action.
• This data is then converted into props, which are parameters that are passed on to the React Components.
• These props, which are passed to the view (expertiza.html.erb) from the controller are used by the react code in the view file.
• The render() function, which is the base function to display the content, then renders the props in its appropriate section.

Migrated Components for React-Rails

All of the components of the Frontend Repository have been migrated into our expertiza repository, to avoid constant lookback on the frontend repo. Currently, the migrated components which are functional are as follows:

• Login Component
• Logout Component
• StudentList Component
• Header Component
• Main Component
• SignupSheet Component
• PasswordForgotten Component
• ChangeHandleComponent
• GradesViewMyScores

Redirecting to the Rails frontend of Expertiza

During the process of this migration, as stated above, we focussed on gradually moving from the initial rails frontend to the react front end.

Hence, we did not change the previous routes. The older routes are still present in the configs/routes.rb file. Thus, whenever we click on any of the non working links, it will route us to the previous version of the link. Hence routes.rb has all the previously configured routes and if your server is on, you can access the previous front end.