How to add bootstrap 5 to an existing Rails 7 app

I tried to install bootstrap 5 in existing Rails 7 application. The keyword "existing" is very important because for a new application you can try following.

$rails new app-name -j esbuild --css cssbundling-rails (Note: Do NOT miss -j flag to install JavaScript first. In one Youtube video, it was skipped, however it did NOT work for me for a test app I tried to install. Not sure why.)

Anyway, coming back to our existing Rail 7 application that I had already built.

First I followed instructions using gem cssbundling-rails, but it was not successful 100%.

The bootstrap framework got installed without any issue, but JavaScript was not working and the dropdown menu in Navbar did not work when I tried to test it.

So I opened an issue.

DHH himself replied, I am so elated. Honestly, I did not understand what was told but I figured out that I had to install gem jsbundling-rails.

Here is how I was able to fix it.

Step 1

Add following 2 gems to the gemfile.

gem 'jsbundling-rails'  # needed for bootstrap javascript
gem 'cssbundling-rails' # Install bootstrap 5

$bundle install

$rails javascript:install:esbuild

$rails css:install:bootstrap

Step 2

app/assets/config/manifest.js file should have only the following. (It had 2 extra lines which I had to delete because I was getting errors).

//= link_tree ../images
//= link_tree ../builds

Step 3

Most importatnt step is as follows: (I was getting errors).

Remove code <%= javascript_importmap_tags %> from app/views/layouts/application.html.erb

For whatever installation I tried earlier there is still a file config/importmap.rb But I think it is useless now, once I removed the code above.

I will have to investigate how to use importmap, but for the time being I am going to keep config/importmap.rb as it is in the codebase.

Step 4

Start the server as 

$ ./bin/dev

$rails s ( This did not work in rendering JavaScript. Not sure why. I need to investigate. Also, I am not sure what is the difference in $./bin/dev Vs. $rails server. I must found out.)

I fixed the code and then pushed it to GitHub. Yey!!

Note: I found out the following.

In the rails 7, the new way of running the server is to execute ./bin/dev command. This will spin up few processes, that includes — starts of the the server, and watcher process that observes the CSS an JS files.

Rating: