DEV Community

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

Posted on

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



Enter fullscreen mode Exit fullscreen mode

Then I run the following code to launch Rails server.



run rails server



Enter fullscreen mode Exit fullscreen mode

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



Enter fullscreen mode Exit fullscreen mode

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



// To run only Javascript files

yarn build --watch



Enter fullscreen mode Exit fullscreen mode

and



//To run only rails server

rails server



Enter fullscreen mode Exit fullscreen mode

Step 3

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

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

Solution to server error above
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



Enter fullscreen mode Exit fullscreen mode

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() {
  }
}


Enter fullscreen mode Exit fullscreen mode

Step 6

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



rails g controller pages home



Enter fullscreen mode Exit fullscreen mode

Creating home page code

Step 7

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



root 'pages#home'



Enter fullscreen mode Exit fullscreen mode

My routes.rb file is now as displayed below.

routes.rb file

Step 8

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



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



Enter fullscreen mode Exit fullscreen mode

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

home.html.erb file

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

react_controller.js file

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

encountered error when run rails server

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

solved error

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


Enter fullscreen mode Exit fullscreen mode

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

The package.json file

Step 11

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

The App.js file

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/> 
     )


Enter fullscreen mode Exit fullscreen mode

Now the App.js file is as seen below.

The App.js file

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.

Error after creating App.js

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

the package.json

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

App.js file rendered on the browser

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


Enter fullscreen mode Exit fullscreen mode

count component

clock component

Step 15

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

App.js file

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 


Enter fullscreen mode Exit fullscreen mode

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

Image description

Image description

Step 17

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

Image description

Image description

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.

Top comments (2)

Collapse
 
cerico profile image
cerico

I've been using this approach and deploying via dokku and it works perfectly. You don't need CORS either.

But I've read its "not suitable" for production and you "should" use vite instead?

Collapse
 
milushov profile image
roma

Is there a way to skip Stimulus?