How to get started with Bootstrap 4 in Rails 6
I know there are many tutorials about this topic already, but in this article, I have included some information that I have not seen in the existing tutorials.
If you are new to Rails or it has been a while since you created a Rails app, you need to know that from Rails 6, Webpacker has replaced Sprockets — the old assets pipeline to handle the JavaScript compilation and minification. Webpacker is a gem that is a wrapper for Webpack.js. Webpack.js handles bundling of JavaScript code, and Webpacker lets us interface with Webpack in our Rails app.
Setup
This tutorial assumes that you already have Rails 6 installed. Let's start by creating a new Rails app:-
$ rails new rails6-bootstrap4Installing Bootstrap
Bootstrap 4 uses jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers, etc.), so we need to install Bootstrap as well as jQuery and popper.js. Open the new rails app in your favorite editor, and in your terminal, run the command below to install.
$ yarn add bootstrap jquery popper.jsWe also need to add jQuery and popper.js as plugins to make them available to other modules, in our case, Bootstrap. So let’s go ahead and add these lines to our config/webpack/environment.js file.
// config/webpack/environment.jsconst { environment } = require('@rails/webpacker')
const webpack = require("webpack");
// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.append(
"Provide",
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ["popper.js", "default"]
})
);
module.exports = environment
Next, you need to rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss, then import bootstrap in it.
// app/assets/stylesheets/application.scss
@import '../../../node_modules/bootstrap/scss/bootstrap';/* this will import the scss file inside node_modules/bootstrap/scss/bootstrap.scss */
Then in app/javascript/packs/application.js, import bootstrap, and its bundled CSS, so that Webpack will load these dependencies:
// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// import the bootstrap javascript module
import "bootstrap"
import "../stylesheets/application"
Next, we need to add stylesheet_pack_tag that reference the app/assets/stylesheets/application.scss file in the layout file (app/views/layouts/application.html.erb). So the layout can import the stylesheet there.
<!-- app/views/layouts/application.html.erb-->
<!DOCTYPE html>
<html>
<head>
<title>Rails6Bootstrap4</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- This refers to app/assets/stylesheets/application.scss-->
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>Finally, add a responsive meta tag.
<!-- app/views/layouts/application.html.erb-->
<!DOCTYPE html>
<html>
<head>
<title>Rails6Bootstrap4</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %> <!-- Responsive meta tag-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- This refers to app/assets/stylesheets/application.scss-->
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
You might need to restart your rails server for the change in environment.js to update. So now, you should be able to use Bootstrap on your views code!
That’s it on how to get started with Bootstrap 4 on a Rails 6 application and how Webpacker handles the JavaScript compilation and minification. If you would like to know more about how to use Webpacker, I recommend this article on understanding Webpacker.
