# How to integrate Bootstrap stylesheets into Rails 6 using Webpacker and the app/javascript  directory

---

## Introduction

In Rails 6, there was a shift in how JavaScript and CSS assets are managed in the default application setup. This change was made to align with modern front-end development practices and the increasing popularity of JavaScript frameworks like React, Vue.js, and Angular.

In the context of Bootstrap 5 (or any modern CSS framework), the `app/javascript` directory is used for JavaScript modules and assets, while the `app/assets` directory is typically reserved for the asset pipeline, which is a legacy approach for managing assets in older versions of Rails.

This change was part of Rails' move toward using Webpacker, which is a tool for managing JavaScript, CSS, and other assets in Rails applications.

---

## Make sure you have Bootstrap installed

---

## Stylesheets

### **Create a stylesheets directory**

```ruby
mkdir app/javascript/stylesheets
```

Output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709782456239/b39c716f-a99b-48f7-b34a-aedf2d3e8a76.png align="center")

---

### **Create the main stylesheet file**

```ruby
echo > app/javascript/stylesheets/application.scss
```

Output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709782492076/c445020d-4f5d-412e-b24a-5ed1fdd324e8.png align="center")

---

### Compilation failed

So far, if you try to access any view page and check the terminal logs, you'll see:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709782643473/19390fbe-87cf-4273-8ab3-afe57d102eb8.png align="center")

---

### **Check your main view page file**

Inside the main view file, which is `app/views/layouts/application.html.erb`, your file should look something like the following:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709784841698/93fd997c-949e-4429-89ae-93ff40823e4d.png align="center")

The previous command uses the `tylesheet_pack_tag`, which is a Rails helper method provided by Webpacker. It's used to include a stylesheet bundle that was defined in your Webpacker configuration. This method takes the name of the pack (or bundle) as an argument.

By convention, the main stylesheet for your application is often named `'application'`

In this case, we use `'application'` because is the name of the stylesheet pack that we want to include, but we can have other named packs for different parts of our application.

`'data-turbolinks-track': 'reload'`: This is an optional HTML attribute that's added to the `link` tag for the stylesheet. It's used in conjunction with Turbolinks, which is a JavaScript library used in Rails to speed up page transitions. The `data-turbolinks-track` attribute with a value of `'reload'` ensures that the stylesheet is reloaded when navigating between pages using Turbolinks.

---

## Javascript

---

### Open the main javascript file

The file is located in `app/javascript/packs/application.js`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709782940547/8a5b0b3c-81e1-4878-86c4-da2ac53118ba.png align="center")

---

## **Import libraries**

Inside the main javascript file, which is `app/javascript/packs/application.js`, add the following libraries:

```ruby
# app/javascript/packs/application.js
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import 'stylesheets/application'
```

The `app/javascript/packs/application.js`file would look like this:

```ruby
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import 'stylesheets/application'

Rails.start()
Turbolinks.start()
ActiveStorage.start()
```

Snapshot

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693943792372/193fe58d-b162-4d2a-bed7-2a696b777788.png?auto=compress,format&format=webp align="left")

---

## Test it

All the following steps are going to be performed in order to test Boostrap, webpacker and Rails 6.

---

### Configure a sample background color

Inside the `app/javascript/stylesheets/application.scss` file, add the following background color:

```ruby
# app/javascript/stylesheets/application.scss
body { background-color: green; }
```

It'll look something like the following:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693944243411/ded3cfd6-2480-486e-a08f-f554821d5077.png?auto=compress,format&format=webp align="left")

---

## Stop the server

In order to stop the `Rails Server`, let's press the following command:

```ruby
CTRL + C
```

---

## Restart the server

```ruby
rails server
```

Output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693944348977/dc8117f5-2935-45e9-a2a0-ec4ca2d1e5a5.png?auto=compress,format&format=webp align="left")

---

### Access a specific page

You should be able to see your page.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693947546363/58796939-644c-4769-a3ec-47cd43612e23.png?auto=compress,format&format=webp align="left")

---

### Check the logs

You should be able to see successful compilation messages.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709784598755/0477a71d-a991-4570-b1b8-de6026da1145.png align="center")

---

## Troubleshoot

### proposal private methods

```ruby
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /home/calaca/var/www/edume/babel-virtual-resolve-base.js
```

Snapshot

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693946187724/d970e7ea-15a3-44eb-8671-f34b62230cb0.png?auto=compress,format&format=webp align="left")

Solution

```ruby
yarn add @babel/plugin-proposal-private-methods
npm install @babel/plugin-proposal-private-methods
```

---

### plugin proposal private property

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709784449693/b5c89970-e26f-437c-bfb8-3e0a9ccde899.png align="center")

```ruby
Error: [BABEL]: --- PLACEHOLDER PACKAGE ---
This @babel/plugin-proposal-private-property-in-object version is not meant to
be imported. Something is importing
@babel/plugin-proposal-private-property-in-object without declaring it in its
dependencies (or devDependencies) in the package.json file.
Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies
to work around this error. This will make this message go away.
 (While processing: /home/calaca/var/www/edume/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js)
    at Object.<anonymous> (/home/calaca/var/www/edume/node_modules/@babel/plugin-proposal-private-property-in-object/lib/index.js:28:7)
    at Module._compile (/home/calaca/var/www/edume/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (/home/calaca/var/www/edume/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at loadPartialConfigAsync (/home/calaca/var/www/edume/node_modules/@babel/core/lib/config/index.js:34:85)
    at Object.<anonymous> (/home/calaca/var/www/edume/node_modules/babel-loader/lib/index.js:126:26)
```

Snapshot

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693946561394/a99a9d33-199b-474a-b488-d9b1ffafccb0.png?auto=compress,format&format=webp align="left")

Solution

```ruby
npm install --save-dev @babel/plugin-proposal-private-property-in-object
```

---

### Restart the server

```ruby
CTRL + C
rails server -p 4000
```

---

### Check the logs

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709784598755/0477a71d-a991-4570-b1b8-de6026da1145.png align="center")

---

### Check the page

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1693947546363/58796939-644c-4769-a3ec-47cd43612e23.png?auto=compress,format&format=webp align="left")

---