Building a Superglue App in Rails

Working with React in Rails usually comes with a tradeoff: get access to the JS frontend ecosystem at the cost of losing velocity or becoming frustrated.

The modern Rails frontend stack, Turbo and Hotwire, is enough to achieve interactive applications without the JS downsides.

But there comes a time when we might need React: to build highly interactive applications or to have access to its ecosystem, which is massive.

To solve this issue, let's introduce you to Superglue: a framework for working with React and Redux without slowing down or surrendering our app to an API.

In this article, we will learn how to build a React app in Rails with Superglue step by step and

Let's start by learning what is Superglue:

What is Superglue?

Superglue is a framework that helps integrate React and Redux into Rails applications without losing most of what makes developers productive when using Rails: form helpers, tag helpers, flash messages, cookies and more.

Besides developing Rails in API-only mode and having a separate React application, we have roughly three ways of integrating React into Rails:

• Partially: this implies loading React for specific components but keeping it contained within a Rails view. This means we can manually pass props and keep server-side state for the app shell. However, this approach can quickly become a mess.
• Using a library: solutions like react_on_rails which are aimed to improve the integration by providing some goodies like prop passing, bundle size optimization, i18n, among others. However, this library requires us to use webpacker or its continuation, shakapacker which makes it less desirable for modern Rails apps.
• Mixed approach: this approach implies having our view layer replaced by React components with the difference that they're rendered using Rails controllers, meaning we can pass props, flash messages, cookies, and authenticate/authorize routes in the controllers themselves. Solutions like Inertia Rails and Superglue fall in this category. A clear advantage of this approach is we can keep a lot of what Rails gives us while also enjoying the advantages of building views with React.

Spiritually, Superglue and Inertia are very similar, but they differ in the way they work. While Inertia passes the props directly from the controller, Superglue gets them from a .json.props file that matches the name of the controller action.

The other difference is that Inertia is framework-agnostic while Superglue uses React with Redux which seems a reasonable alternative considering the popularity of both libraries.

How does it work

What we will build

For this tutorial, we will build a fictional application called Pomoworkr: a project management app that helps freelancers keep track of work done for different projects.

To help freelancers focus, it will include a pomodoro timer associated with a task which is a part of the project.

The result should look something like this:

TODO: application demo video

Application setup

Let's start by creating a new Rails application:

rails new pomoworkr --skip-javascript

Now, we add the frontend related gems:

# Gemfile
gem "turbo-rails"
gem "stimulus-rails"
gem "vite_rails"

We then install these gems:

bundle install

Next, we install Vite specifically:

bundle exec vite install

This command does the following:

• Add a bin/vite executable to start the dev server.
• Installs vite and the vite-plugin-ruby library.
• Add vite.config.ts and config/vite.json configuration files.
• Creates an application.js entrypoint for the application that's located at app/frontend/entrypoints.
• Adds the bin/vite dev command to the Procfile.dev file.

Now, to test that everything's working as expected by setting a test route as the root, running bin/dev and visiting the page.

It should be empty, but if we check the console, we should see the following:

Now that we have Vite installed, let's install Superglue:

Installing Superglue

The first step is to add the gem to the Gemfile and install it:

bundle add superglue && bundle install

Next, we run the installation command. To use TypeScript, we have to pass the --typescript flag:

rails g superglue:install # or pass the --typescript flag

This command adds many files

Adding Tailwind

Building the application

Server-Side Rendering with Superglue

Even though Superglue let's us integrate Rails goodies with React without any major efforts. However, React components are rendered after the server response when React is mounted into the view.

Real-world applications usually need at least some parts of the application to be server-side rendered. This is considerably important for SEO where search engines require more resources to parse client rendered pages which, in turn, means that our pages might get deprioritized or that our crawl budget might suffer.

To achieve server-side rendering with Superglue

Summary

Working with React in Rails can be a frustrating end