Setup Bootstrap on Rails-7 and Vite

Overview

This guide may work, but as of 2024, we would prefer to build new projects without any style framework. CSS has become feature-rich enough.

Note

We setup Bootstrap scss files upon asset pipeline for avoide slowing down Vite HMR. Custom stylesheets can be added inside vite app/frontend/. We setup one popover to make it working for checking if all the popper.js and bootstrapp javascript is working.

(Alternative would be: minify the bootstrap CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

Links

Bootstrap/getting-started/vite

Prerequesites

• Vite
• jQuery

Asset Pipeline

gem 'bootstrap', '~> 5.2.0'

$ bundle install

add app/assets/stylesheets/_settings.scss for configuring bootstrap sass variables

rename app/assets/stylesheets/application.css to .scss if it isnt already done

remove the lines //= require tree and //= require . if it isnt yet.

@import "settings";
@import "bootstrap";

We use only the scss files from the gem. On Foundation i did the same by smylinking to the yarn package into the asset pipeline. The javascript we get from the yarn package:

Javascript Packages

$ npm i bootstrap @popperjs/core

frontend/entrypoints/application.js

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip' 

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});
window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
      // initialize popovers
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  }
}

Layout

make sure the stylesheet_link_tag is present like described

Test View

%button.btn.btn-lg.btn-danger{"data-bs-content" => "And here's some amazing content. It's very engaging. Right?", "data-bs-title" => "Popover title", "data-bs-toggle" => "popover", :type => "button"} Click to toggle popover

=> If the popover works and looks like this, bootstrap styles are working, popper.js is working and popovers are initialized.

YIPPIE!

Overview

P.S.:

Symlinking SASS variables

Inside frontend/stylesheets/, create a symlink like this:

$ ln -s ../../assets/stylesheets/_settings.scss .

Then from all the stylesheets, by example frontend/stylesheets/components/button.scss, import it like this:

@import '../settings';

symlinks to a file are well handled by git (otherwise than symlinks to a folder) and they should landing well on production machine.