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 & in in my new project. Because in it start to use " " as default Javascript complier. Bootstrap 4 Font Awesome 5 Rails 5 Rails 6, webpack 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, is move from to . Javascripts app/assets/javascript app/javascript Second,  the path refer in have change from to . Javascripts application.html.erb javascript_include_tag javascript_pack_tag PS: behind the scene, it is because in , they start to use as default javascript compile engine. Rails 6 webpack What I should do ? ~ Add bootstrap into rails ? First, integrate Bootstrap (Base on ) use rails' way. Bootstrap docs Add following line in to your Gemfile . , # Gemfile gem 'bootstrap' '~>4.3.1' after save, run to update the gem library. bundle install 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 , you might need to integrate , and But here is what not working by referring the from bootstrap. bootstrap 4 jquery popper.js. docs Beside, by default, Rails is still use the from , which is not utilize the power of . application.scss app/assets/stylesheets 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 , create file under this folder and insert following line. app/javascript/stylesheets/ application.scss @ ; // app/javascript/stylesheets/application.scss import "bootstrap" Second, change the reference link in file from to . application.html.erb 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 install the packages correctly, update config file of webpack as following. yarn / webpack Provide jquery jquery popper.js default / config/webpack /environment.js
const { environment } = require("@rails/webpacker ");
const webpack = require(" ");
environment.plugins.append(
" ",
new webpack.ProvidePlugin({
$: " ",
jQuery: " ",
Popper: [" ", " "]
})
);
module.exports = environment; Next,  update your file by adding following lines. application.js ; ; // app/javascript/packs/application.js import "bootstrap" import "../stylesheets/application" After updating,  the folder structure should something like following. app/javascript 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 , or . So the best way add those code in (or any name your want) file, and import it into , such as following: tooltip modal popovers custom.js application.js $( {
  $( ).tooltip();
});

$( {
  $( ).popover();
}); //custom.js ( ) function '[data-toggle="tooltip"]' ( ) function '[data-toggle="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 (there are actually gem for it, such as , or , but they are either still use Font Awesome 4 or it is not working by following their docs). Font Awesome 5 this this First, use add latest Font Awesome library into your project. yarn yarn add @fortawesome/fontawesome-free Second, add following line in both & files. application.scss application.js @ ; // 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" : ' -2', : '3 ' class mx size x Now you are done. Photo by on Radu Florin 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

Facebook

Google

Keep Running

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Kelvin Liang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Kelvin Liang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES