Rails 7, Reactjs setup | monolith

Rails 7, React.js 18, Inertia

RoR with React

Rails 7 comes with importmaps as default for running and managing javascript code. AFAIK importmaps is pretty much a new player and does not support .jsx extensions for your react components. Due to this reason, I am going to use esbuild , which supports both jsx and typescript code.

Init rails 7

Create new rails app with esbuild a javascript bundler 🛺.

rails new rails-7-react-boilerplate -j esbuild

Init React 18

Install react and react-dom dependencies 📎,

Install React.js dependencies

Inertia & vite 🚧

Before creating the components, we will add an additional plugin inertia.

In simple terms it allows us to write backend and front in a single code base, where you don't have to write or add any serializers or helpers to return JSON responses for API integration.

Inertia has two parts, where one is an adapter, which will handle the incoming request and responses from client-side javascript code supported by client-side inertia SDK. First, install client-side SDK by issuing the following command,

yarn add @inertiajs/inertia @inertiajs/inertia-react

Install inertia_rails gem to your rails app,

bundle add inertia_rails

The inertia client-side SDK uses ES6 dynamic imports, this feature is not yet fully supported by esbuild . So we will use vite for react. vite_rails provides similar functionality as webpack .

adds vite

The last step adds bin/vite and viteconfiguration files and entrypointfiles in javascript. and make some changes to rails default layout application.html.erb. Verify the vite installation using the following command,

Add some business logic 🚦

This current application needs to greet some random user, whenever someone visits the web page. Let's start adding the missing pieces (react components and rails controllers),

Your client-side code

• Create components directory to hold the view layer logic, (name it whatever you want)

create components directory

• Create a Hello component with the following code. The below component holds some of our business logic, i.e, accepts a prop called nameand render it.

Hello.tsx

• Create a Application file,

Create Application.tsx

• Add the following code to Application file, which will create the required bindings and mount the app into your rails application view file *.html.erb

Application.tsx

• Register your react application inentrypoints/application.js file ,

entry file

Your server-side code

• Install faker to randomly generate user names, and create home controller with index action.

faker and home controller

• In index action, create the inertia response, by providing the component name Hello and provide the user name as an attribute to the page component.

Home controller

• Add root_path to home#index , so that whenever we hit the / path, the request will be redirected to Home controller.

root path

• Now, launch the rails server and frontend powered by vite 🚀,

Launch your dev server (Rails + React | vite)

Open your browser and hit localhost:3000, for every hit you will see a different user name 👏.

That's it, you have successfully coupled react components into your rails server, and now you can use react components in places of view.

Final thoughts 🥸

• This approach will be well suited for monoliths, where the developer team size is small and does not have time to create REST APIs.
• You still use the sessions built-into rails. There are some security concerns though.
• Quick and easy.

The source code can be found here.

References

Working with JavaScript in Rails - Ruby on Rails Guides

Inertia.js - The Modern Monolith