For most projects we use template applications to spin up things quickly. However, we recently decided to start moving to Rails 7 which means that we needed to prototype a few things and review the new features introduced. Tasked with this, I updated dependencies and ran the usual:

> rails new new-app
> cd new-app
> bundle install
> bin/rails server

I opened the app in the browser to make sure that everything was working as intended. Next, I decided to go ahead and add esbuild. The Rails 7 release post does a great job detailing how to add that when I spin up a new app, but what if I have already done that? Do I need to just delete it, back up a couple steps, and re-run the command with the –javascript esbuild flag? That doesn’t seem right so I wanted to see how to add esbuild to an existing app.

First I ran:

> rails -h

I didn’t see any options that looked similar to the –javascript esbuild option so back to the documentation. In Rails 7, the Javascript bundler was moved into its own gem. I added this gem and then re-ran rails help command.

> bundle add jsbundling-rails
> rails -h

Now we have options to add esbuild, rollup, or webpack:


I chose to go with esbuild. Some details on why can be found here.

> rails javascript:install:esbuild

When I ran the command, it gave a couple of errors in the console:

✘ [ERROR] Could not resolve “@hotwired/turbo-rails”


2 │ import “@hotwired/turbo-rails”

Since I started the project with import maps there is some clean up I need to take care of before addressing these errors. Remove the import maps gem from the gemfile.

> bundle remove importmap-rails

Remove the importmap_tags from the application layout (app/views/layouts/application.html.erb)

<%= javascript_importmap_tags %>

To address the errors I got I had to add the packages that were unable to resolve:

> yarn add @hotwired/turbo-rails

I opened the project in my editor and deleted app/javascripts/controllers. Then, I removed the following line from app/javascripts/application.js

import “controllers”

After that I ran yarn build:

> yarn run build

At this point I *should* have esbuild working. I wanted to quickly test it out by adding React.
So, I created a view to test the component I was about to create:

> rails g controller home index

Set the root in config/routes:

root ‘home#index’

Added an id in my view to reference later:

< div id="text">< / div >

Installed react and react-dom:

> yarn add react react-dom

Created a file in: app/javascript/components/Text.jsx

import * as React from ‘react’
import * as ReactDOM from ‘react-dom’                  

const Text = () => {
 return (< div >Testing Rails 7!< / div >)

document.addEventListener(‘DOMContentLoaded’, () => {
 ReactDOM.render(, document.getElementById(‘text’))

export default Text

Updated app/javascript/application.js

import “./components/Text”

Started up the project using:

> ./bin/dev

Now that I had esbuild and react working, if I wanted to switch to postgres from the default database I could quickly do so. In rails 6 a command was added that allows you to switch databases with ease:

rails db:system:change –to=postgresql
rails db:system:change –to=mysql
rails db:system:change –to=sqlite3
rails db:system:change –to=oracle
rails db:system:change –to=frontbase
rails db:system:change –to=sqlserver
rails db:system:change –to=jdbc

And if you get stuck along the way you can always run:

> rails -h

Or to get more details on a particular command:

> rails db:system:change -h

In closing, we were able to add esbuild and react to an existing application. Then, quickly change the database to better fit our needs and continue testing out Ruby on Rails 7.

Looking for help with your Rails 7 project? Reach out to the Glass Ivy team to get started on your next project.