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:
> 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:
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.
> rails -h
Now we have options to add esbuild, rollup, or webpack:
javascript:build
javascript:clobber
javascript:install:esbuild
javascript:install:rollup
javascript:install:shared
javascript:install:webpack
…
I chose to go with esbuild. Some details on why can be found here.
When I ran the command, it gave a couple of errors in the console:
app/javascript/application.js:2:7:
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.
Remove the importmap_tags from the application layout (app/views/layouts/application.html.erb)
To address the errors I got I had to add the packages that were unable to resolve:
I opened the project in my editor and deleted app/javascripts/controllers. Then, I removed the following line from app/javascripts/application.js
After that I ran yarn 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:
Set the root in config/routes:
Added an id in my view to reference later:
Installed react and 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(
})
export default Text
Updated app/javascript/application.js
Started up the project using:
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=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:
Or to get more details on a particular command:
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.