Ruby on Rails – Setup Bootstrap, jQuery and Popper.js

Today let me document the steps to setup bootstrap, jquery and popper.js(which is used by bootstrap) for your quick reference (and for mine as well).

Step 1 – Add Bootstrap, jQuery and Popper.js

$ yarn add bootstrap jquery popper.js

Step 2 – Update application.scss

Update the app/assets/stylesheets/application.scss with the below code. (if the filename is application.css, just rename it to .scss)

/*
*= require bootstrap
*= require_tree .
*= require_self
*/

Step 3 – Update application.js

Update the app/javascript/packs/application.js with the following code.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap';
require("jquery")

window.jQuery = $;
window.$ = $;

The above code will load up the bootstrap javascript library and also make jquery available in all view files.

Step 4 – Update environment.js

Update the config/webpack/environment.js file as shown below. Below we are using the ProvidePlugin function of webpack to add the dependency libraries like jquery, popper in all the javascript packs instead of having to import them everywhere.

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

And voila! Bootstrap and jQuery is ready at your service 🙂