Setup Bootstrap on Rails-7 and Vite
Tags: rails, vite
Published: 2022-09-20 13:51:42

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

**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](https://getbootstrap.com/docs/5.2/getting-started/vite/)

**Prerequesites**

- [Vite](https://dev.to/chmich/setup-vite-on-rails-7-f1i)
- [jQuery](https://dev.to/chmich/setup-jquery-on-vite-598k)

**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](https://dev.to/chmich/foundation-sites-on-rails-and-vite-3d6p-temp-slug-3440249?preview=877b694990be4af67440cd13962724e28a94f4efcc2185db0ce34f16060d637882859d26bbb4e315eff1ff98ac0e247b1b8ea3a48a50f47197e697d9) 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](https://dev.to/chmich/setup-vite-on-rails-7-2om4-temp-slug-6860562?preview=cdfb38d3f8e1987a3eaf858d2adc20a743f4bffe3fbab10c744d1c1a9a35a51c52e3a64aa225e136f7aa5df94032d6af821e22609020bbfb7488ca56)

**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
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alicut9zir0gmm7ztdsb.png)


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

YIPPIE!

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

---

**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.