I love Bootstrap and Rails together

12 Sep 2020

One of my favourites backend frameworks is Ruby on Rails. Because is simple, is powderfull, and on version 6 you can add your Javascript dependencies using yarn. So, so excited about it.

These are the notes for adding Bootstrap to Rails project:

  1. Type this on the console:

yarn add bootstrap jquery popper.js
  1. Your yourproject/config/webpack/environment.js file should look like this:

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
  1. Now we are going to import Bootstrap on app/javascript/packs/application.js with the following line:

import "bootstrap"
  1. On your gemfile you can add two gem more, for ‘bootstrap’ and ‘jquery-rails’, for my were these lines:

gem 'bootstrap', '~> 4.5', '>= 4.5.2'
gem 'jquery-rails', '~> 4.4'

I recommend go to https://rubygems.org/ and pick up the current versions.

  1. Probably it’s a good idea to re-start your rails server:

rails s

If you prefer video format, there is a great resource on Youtube. Here the link.