Integrate Bootstrap 4 and Font Awesome 5 in Rails 6 [A How To Guide]

Rails 6 is out for few months now, I happen needed to do a project with it. But I found I can't use the same way to integrate Bootstrap 4 & Font Awesome 5 in Rails 5 in my new project. Because in Rails 6, it start to use "webpack" as default Javascript complier.

I try to "Google" it, but nothing valid come back. I did try with some instructions from medium or Stack Overflow, none of them are working.

After some trials and errors, I finally find a way to make them work together, let me share it in here, hope it can help you!

So what is changed?

First, Javascripts is move from

app/assets/javascript

app/javascript

Second, the path refer Javascripts in

application.html.erb

have change from

javascript_include_tag

javascript_pack_tag

PS: behind the scene, it is because in Rails 6, they start to use webpack as default javascript compile engine.

What I should do ?

~ Add bootstrap into rails ?

First, integrate Bootstrap (Base on Bootstrap docs) use rails' way.

Add following line in to your

Gemfile

# Gemfile
gem 'bootstrap',  '~>4.3.1'

after save, run

bundle install

to update the gem library.

At this point, you might find your web page font has been changed and maybe some bootstrap class is working.

However, if you want all functionalities work in bootstrap 4, you might need to integrate jquery, and popper.js. But here is what not working by referring the docs from bootstrap.

Beside, by default, Rails is still use the

application.scss

from

app/assets/stylesheets

, which is not utilize the power of webpack.

So if you want to integrate Sass with webpack as well, you can follow steps below. Otherwise, you can skip them and move on to next section.

~ Move sass to webpack

First, create following folder

app/javascript/stylesheets/

, create

application.scss

file under this folder and insert following line.

// app/javascript/stylesheets/application.scss

@import "bootstrap";

Second, change the reference link in

application.html.erb

file from

stylesheet_link_tag

stylesheet_pack_tag

<%# app/views/layouts/application.html.erb %>

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

But the sass wouldn't work just yet, let's move on next part.

~ Use yarn add bootstrap, jquery, popper.js.

It is recommended by most the sources I can found, so I think it is better follow their advices now. run following line in your terminal.

yarn add bootstrap jquery popper.js

After yarn install the packages correctly, update config file of webpack as following.

// config/webpack/environment.js
const { environment } = require("@rails/webpacker");
const webpack = require("webpack");
environment.plugins.append(
"Provide",
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ["popper.js", "default"]
})
);
module.exports = environment;

Next, update your

application.js

file by adding following lines.

// app/javascript/packs/application.js

import "bootstrap";
import "../stylesheets/application";

After updating, the

app/javascript

folder structure should something like following.

By now, bootstrap 4 should be fully integrated, test it out with your project.

~ Final touch for Bootstrap

There are some components require adding custom javascript code into your project, such as tooltip, modal or popovers. So the best way add those code in

custom.js

(or any name your want) file, and import it into

application.js

, such as following:

//custom.js
$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

$(function() {
  $('[data-toggle="popover"]').popover();
});

//application.js
import "./custom";

Finally, refresh the page or restart the Rails server if you can't see the changes.

Now let's move on to Integrate Font Awesome 5 (there are actually gem for it, such as this, or this, but they are either still use Font Awesome 4 or it is not working by following their docs).

First, use yarn add latest Font Awesome library into your project.

yarn add @fortawesome/fontawesome-free

Second, add following line in both

application.scss

application.js

files.

// app/javascript/stylesheets/application.scss

@import '@fortawesome/fontawesome-free';

// app/javascript/packs/application.js

import "@fortawesome/fontawesome-free/js/all";

So by now, Font Awesome 5 should be integrated into your project, you can integrate the icon by inserting code like following:

<i class="fab fa-facebook-f fa-3x mx-2"></i>

One more thing ...

if you want to integrate Font Awesome into your rails erb code, you might still need add following gem into your project.

# Gemfile

gem 'font_awesome5_rails'

So now you can start using ruby code like following to decorate your web page.

<%= fa_icon "baby", text: "BB", class: 'mx-2', size: '3x' %>

Now you are done.

Photo by Radu Florin on Unsplash

Final words ...

Due to I still fresh in the web development world, there might be better way to do it, please do let me know, thanks!

As you can see, you need to both install gem and javascript package to make them works, I hope later gems package can fix this to make our life easier.

You can reference my sample HTML code here.