Uday's website
Published on Uday's website (https://www.uday.net)

Home > How to add bootstrap 5 to an existing Rails 7 app

How to add bootstrap 5 to an existing Rails 7 app [1]

Submitted by uday [2] on January 16, 2022 - 2:11pm

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 [3], 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 [4], 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 [5].

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: 
Tags: 
Rails [6]
Bootstrap [7]

 Valid XHTML 1.0 StrictCreative Commons LicenseVerbatim copying and redistribution of this entire page are permitted provided this notice is preserved. All content on this website including archives (including text, photographs, audio files and any other original work), unless otherwise noted, is licensed under a Creative Commons License or later.


Source URL:https://www.uday.net/add-bootstrap-5-to-an-existing-Rails-7-app

Links
[1] https://www.uday.net/add-bootstrap-5-to-an-existing-Rails-7-app [2] https://www.uday.net/user/1 [3] https://youtu.be/tYr8yn7yRKw [4] https://github.com/rails/cssbundling-rails [5] https://github.com/rails/cssbundling-rails/issues/66 [6] https://www.uday.net/taxonomy/term/82 [7] https://www.uday.net/taxonomy/term/86