1. Blogs
  2. uday's blog
  3. Install Rails 7, Bootstrap using importmap (Part 2)

Install Rails 7, Bootstrap using importmap (Part 2)

Submitted by uday on January 24, 2023 - 10:44pm

As seen in previous post, I tried to install Rails 7 and Botstrap using command:

$rails new app-name -j esbuild --css bootstrap

The problem with this approach is

  • It does not install importmap which is recommended default for Rails 7.
  • It installed so many node_modules.
  • I could not install Font Awesome because I did not have importmap.

So my thinking was to create a new Rails 7 app (so that Importmap will be default) and THEN ADD Bootstrap to it.

This approach is easier in my experience. It is also better in my opinion because it will have importmap as default.

Here is how to do that. This video was super helpful, but I am writing all steps below.

$rails new rails7importmap_add_bootstrap

$cd rails7importmap_add_bootstrap

Verify the app by running $rails s (Note: ./bin/dev does not work. There is no bin/dev file nor Procfile.dev either.)

$bin/importmap pin bootstrap

File app/javascript/application.js : Add import "bootstrap"

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"

Add bootstrap to your Gemfile following instructions: gem 'bootstrap', '~> 5.2.2'

gem 'bootstrap', '~> 5.2.2'

$bundle install

Rename app/assets/stylesheets/application.css to application.scss

Then add to application.scss : @import 'bootstrap';

@import 'bootstrap';

$rails s #start server

Verify CSS part for Bootstrap is handled correctly. (The font changes)

Add navbar code from Bootstrap documentation to app/views/layouts/application.html.erb, but you will notice that menu dropdown does not work. That is because javascript part for Bootstrap is still not working correctly.

Modify config/import.rb as shown below. (This is very important step)

Change URL for @popperjs/core to

https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js

The code will look like shown below:

# commented original code below
# pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js"
# take from unpkg CDN (unpackaged version) - esm format, (not umd or cjs)
# Refer to https://popper.js.org/docs/v2/, but actual distribution (esm format) was from https://unpkg.com/browse/@popperjs/core@2.11.6/dist/
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.6/dist/esm/index.js"

 

Now I want to install font awesome (using importmap).

$./bin/importmap pin @fortawesome/fontawesome-free #(Note that first keyword is fort and NOT font. I made that mistake).

This will add following to config/importmap.rb

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.2.1/js/fontawesome.js"

Change fontawesome.js to all.js

all.js

Then add to app/javascript/application.js

import "@fortawesome/fontawesome-free"

Use code to display font awesome icons as shown in documentation

<i class="fas fa-plus"></i>
<i class="fas fa-basketball-ball"></i>
<i class="far fa-check-square"></i>

 

To add bootstrap icons, add the following to app/assets/stylesheets/application.scss

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

TODO:

  • Add Popover and Toolstips for Bootstrap

Popover and tooltips not working in spite of adding following code to app/javascript/application.js

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

 

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

 

 

Rating: