Create a Rails app with React for frontend using Esbuild and Jsbundle

This post explains how I use esbuild and jsbundling to integrate a Rails 7 application with React.js as the frontend.
I use esbuild as my JavaScript bundler, but you may also use Webpack or rollup.js.
I'll describe the steps I followed, as well as the bugs I encountered and how I fixed them.
I'll be using the following versions: Ruby 3.1.2, Rails 7.0.4, and React 18.2.0 for this setup.

Step 1

I created a new rails app called reactapp and included j and esbuild flags.

rails new reactapp -j esbuild

Then I run the following code to launch Rails server.

run rails server

Step 2

You can see the commands for simultaneously running the JavaScript files and the Rails server in your Procfile.dev file.

// To run rails server and Javascript files simultaneously

web: bin/rails server -p 3000

But you may also use the following codes to run them independently on different terminals.

// To run only Javascript files

yarn build --watch

and

//To run only rails server

rails server

Step 3

After running my rails server and JavaScript files, I encountered a bug as shown below.

To debug the error I changed my package.json file as shown below

Note that you may probably not encounter this bug.

Step 4

I utilize stimulus to create a controller for my react setup by executing the code below since stimulus have been added to the Gemfile during initial setup in step 1 above.

rails g stimulus react

The react controller.js file was generated by running the code above.

Step 5

The newly created react_controller.js file is as shown below

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="react"
export default class extends Controller {
  connect() {
  }
}

Step 6

Now I run the code below to create my home page.

rails g controller pages home

Step 7

In the routes.rb file, I added the below code to create my home page route.

root 'pages#home'

My routes.rb file is now as displayed below.

Step 8

In the home.html.erb file I added the following code

  <%= content_tag(:div, "",
 id:"app", data: {
    controller: "react"
 })%>

Now the home.html.erb file is as seen below

Keep in mind that the name of your controller should match the name of the stimulus you created in step 4 above.

Step 9

In the react_controller.js file I console log "react controller connected" to test if my JavaScript files are connecting with my rails application

At this point, You may encounter an error when you run rails server as I did below,

Run Rails Server from your Windows command prompt to fix the aforementioned error. For me, it fixed the issue as shown below.

From the console you can see "react controller connected" indicating that JavaScript is running and connecting to rails.

Step 10

Let's now add some react components. First, I ran the code below to add react and react-dom packages to the application.

yarn add react react-dom

In the package.json file, you can see react and react-dom have been included.

Step 11

Now I created App.js file in app/javascript/controllers folder
as seen below.

Step 12

In the react_controller.js file I imported App.js, react and react-dom and then added the following code below

 const root = ReactDOM.createRoot(document.getElementById("app"))
     root.render(
      <App/> 
     )

Now the App.js file is as seen below.

Step 13

When I ran my JavaScript file using the code in step 2 above, I got the error you can see below after creating the App.js file.

To solve the above error I added "--loader:.js=jsx" to the package.json script as seen below

My App.js file is now rendered in the browser as shown below.

Step 14

Let's create two components . First, I added react-router-dom package to the application and  then create the clock.js and count.js components as seen in the images below

yarn add react-router-dom

Step 15

In the App.js file I imported clock.js, count.js and react-router-dom. As seen below.

Step 16

To create routes for the two newly created components, I added the following code to the routes.rb file.

get '*path', to: 'pages#home', via: :all 

As seen below, my two components have now been rendered and are viewable in the browser.

Step 17

Now I used react hooks for state update and useEffect for side effects. As seen below.

In conclusion, I've provided the GitHub repository for the tutorial I described above, on how I used esbuild and Jsbundle to connect rails and React . I hope this tutorial will be useful to someone. Thanks for reading.