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:
... 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.
> 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"
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.
> 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(<Text />, 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.
