Mulai April 2020, bandithijo.com akan menggunakan GitHub subdomain menjadi bandithijo.github.io. Penggunaan domain .com tidak sejalan dengan cara pandang saya terhadap sebuah blog, dimana blog harus bisa tetap hidup tanpa saya. Terima kasih (^_^) (bandithijo, 2020/03/25) ●

بسم الله الرحمن الرحيم

Latar Belakang

Saya mulai membiasaka membuat project-project latihan dengan Rails 6, agar saat mengerjakan project sungguhan sudah terbiasa dengan versi terbaru dari Rails ini.

Kali ini, saya akan mencatat bagaimana cara memasang Bootstrap 4 ke dalam Rails 6.

Pasti terdapat banyak cara, namun yang saya catat kali ini dalah menggunakan Yarn.

Yarn ini ibarat package manager untuk Javascript yang dapat digunakan untuk mengambil dan memasang package/library/module dari repository yang tersedia ke sistem kita dengan mudah –kira-kira seperti itulah. 😁

Jadi, kalau teman-teman belum memiliki yarn, boleh dipasang terlebih dahulu.

Oke langsung saja.

Instalasi

Untuk memsang Bootstrap 4 dengan yarn, pastikan kita sudah berada di root direktori project yang akan dipasang Bootstrap.

Lalu jalankan,

$ yarn add bootstrap@4.5 jquery popper.js

*Karena Bootstrap sangat tergantung dengan JQuery dan Popper.js, maka kita juga perlu menyertakan dalam proses instalasi.

Tunggu saja prosesnya hingga selesai.

Kalau sudah selesai, Coba teman-teman buka file package.json yang ada di root project direktori.

FILEpackage.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "photo_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "bootstrap": "4.5",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

Perhatikan pada baris 9 - 11 adalah paket yang baru saja kita pasang menggunakan yarn.

Konfigurasi

1. Konfigurasi Webpack

FILEconfig/webpack/environment.js
1
2
3
4
5
6
7
8
9
10
11
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

Tambahkan pada baris 3-9 di antara baris 1-11.

2. Konfigurasi Javascript

Pada Rails 6, struktur direktori untuk Javascript bukan lagi berada di dalam app/assets/, melainkan sudah berada di app/javascript/.

Kita perlu mengimport Bootstrap ke dalamnya.

FILEapp/javascript/packs/application.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

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

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import "bootstrap"

Baris ke 18 adalah baris yang perlu ditambahkan.

3. Konfigurasi StyleSheet

FILEapp/assets/stylesheets/application.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require bootstrap
 *= require_tree .
 *= require_self
 */

Baris 13 adalah baris yang perlu ditambahkan.

Selanjutnya, buat file stylesheet baru pada direktori yang sama dengan nama,

FILEapp/assets/stylesheets/custom.css.scss
1
@import 'bootstrap/scss/bootstrap';

Selesai!

Pesan Penulis

Sepertinya, segini dulu yang dapat saya tuliskan.

Mudah-mudahan dapat bermanfaat.

Terima kasih.

(^_^)

Referensi

  1. mashrurhossain.com/blog/rails6bootstrap4
    Diakses tanggal: 2020/12/20

  2. dev.to/somnathpaul/add-bootstrap-4-to-your-ruby-on-rails-6-application-ole
    Diakses tanggal: 2020/12/20

Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!

0ff240f243b765977899a018a09bb6392e00b025