Saturday, June 9, 2018

Rails 5.2 SPA with React.js, Server-side Rendering, and Code Splits


Building on a prior tutorial implementation, I've expanded the functionality of a Rails application so that it is a SPA (Single Page Application). It uses React.js 16, and supports server-side rendering using the react-rails gem.


It also uses React Router to handle navigation between root, or top-level, components.

Server-side rendering makes things pretty difficult in a Rails application. I've had to do some research to get my server-side rendering to work as one would expect.

Dynamic loading of code splits is also something that is difficult to do, but my sample application does support this. The code splits are created using Webpack and the Javascript library react-loadable (not the latest version - I must use an older version of react-loadable to achieve server-side rendering that short-circuits dynamic imports).

The application is a mock Purchase Order tracking application. Items are available to be sold to customers. One can set item prices, and create and edit purchase orders that represent purchases of certain sets of the available Items in the inventory.

Data in the application is predominantly synthetic, and generated using the Faker gem.

This application is deployed to production at reactexperiments.herokuapp.com/. It is indeed hosted on Heroku as a free-tier application.

The Trello page for ToDos on this application is here.

The source code for this application is browsable on Github here.