Setup Ruby on Rails 6 + Bootstrap

This is a quick tutorial showing how to properly set a Ruby on Rails 6 project with Bootstrap.

This is a quick tutorial showing how to properly set a Ruby on Rails 6.x.x project with Bootstrap.

  • First step. Create a Rails 6.x.x project. For example, I have Rails version 6.1.7 installed in my computer:

rails _6.1.7_ name-of-project -d postgresql

Here I chose to create a Rails 6.1.7 project (named name-of-project) with postgresql. The next step, ideally, would be to check if the project works, therefore, you’d need to check the postgresql connection in config/database.yml. For example, here’s how I set that connection:

default: &default
  username: postgres
  password: 12345
  host: localhost
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

As this is a local project only, I defined my local username, password and host on the default section of database.yml

  • Second step. Install jquery, popper.js and bootstrap via Yarn. Run on terminal:
yarn add jquery popper.js bootstrap
  • Third step. Add the following lines to the file environment.js (config/webpack/environment.js):
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment
  • Fourth step. Create the stylesheets folder (app/javascript/stylesheets)
  • Fifth step. Inside the stylesheets folder that you’ve just created, create the file application.scss
  • Sixth step. Make your stylesheets available in application.html.erb. Add the following lines to application.html.erb (inside <head> </head>):
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  • Seventh step. Inside application.js (app/javascript/packs/application.js), import bootstrap by adding the following lines of code:
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")
  • Final step. Install popperjs/code by running the following command on terminal:
yarn add @popperjs/core

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: