Kelvin Liang

IT Pro, Web Dev

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
to
app/javascript
.
Second, the path refer Javascripts in
application.html.erb
have change from
javascript_include_tag
to
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/packs/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
to
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.

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.

Tags

Comments

December 9th, 2019

In the ~ Move sass to webpack section, the folder path should be app/javascript/stylesheets/ instead of app/javascript/packs/stylesheets/

Keep up the good work :call_me_hand:t2:

December 9th, 2019

Thanks for the feedback, updated!

More by Kelvin Liang

Topics of interest