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
Bruno Campos 