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/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(); //highlight-line
});
$(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.
# page.erb
<%= 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.
This article original posted in hackernoon