Using Bootstrap 5 in Rails 6

Kaycheng

·

Follow

3 min read

·

Jun 17, 2021

--

Listen

Share

The environment is rails 6.1.3 and ruby 3.0.0

Creating a project

$ rails new rails101

Update yarn

$ yarn upgrade

Using Git to make record.

$ git init
$ git add .
$ git commit -m "First init"

Rename app/javascript to app/frontend, and let webpack know our new setting.

$ mv app/javascript app/frontend

Enter config/webpacker.yml, then change

source_path: app/javascripttosource_path: app/frontend

Creating a stylesheets folder and an application.scss file to collect scss.

$ mkdir app/frontend/stylesheets && touch app/frontend/stylesheets/application.scss 

To import application.scss to webpack, enter app/frontend/packs/application.js. Then add

import "../stylesheets/application"

To let view add scss style, enter views/layouts/application.html.erb add

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

Foreman sets

Using foreman to manager webpack and rails server.

$ gem install foreman

Then creating a file which named Procfile.dev

$ touch Procfile.dev

Adding code to Procfile.dev

web: bin/rails server -p 3000
webpacker: bin/webpack-dev-server

Using foreman start the server

$ foreman start -f Procfile.dev

If server shared this issue

Opening the config/webpack/environment.js and let it to be:

const { environment } = require('@rails/webpacker')
environment.loaders.delete('nodeModules')

Adding Bootstrap 5 to project

$ yarn add bootstrap@5.0.0 ---> show it depends on @popperjs/core@2.9.2$ yarn add @popperjs/core@2.9.2

Creating a javascript folder to collect our javascript.

$ mkdir app/frontend/javascript && touch app/frontend/javascript/application.js && touch app/frontend/javascript/bootstrap.js

Importing bootstrap javascript to bootstrap.js and just choose which one we need.

import 'bootstrap/js/src/alert'   
import 'bootstrap/js/src/button'   
import 'bootstrap/js/src/carousel'   
import 'bootstrap/js/src/collapse'   
import 'bootstrap/js/src/dropdown'   
import 'bootstrap/js/src/modal'   
import 'bootstrap/js/src/popover'   
import 'bootstrap/js/src/scrollspy'   
import 'bootstrap/js/src/tab'   
import 'bootstrap/js/src/toast'   
import 'bootstrap/js/src/tooltip'

Then make a link to javascript/application.js

import "./bootstrap"

And make a link to packs/application.js

import "../javascript/application"

Add bootstrap style on stylesheets/application.scss

@import "~bootstrap/scss/bootstrap";

Create a root page to make sure the bootstrap setting is well.

Setting routes:

root "pages#index"

Creating pages_controller.rb

class PagesController < ApplicationController    def index    endend

Creating a view page of views/pages/index.html.erb, then copy a code from bootstrap. For example: navbar’s code.

Then open server to check the bootstrap styles!

Info: