Ruby on Rails 6 i Bootstrap 4

przez

Biorąc pod uwagę zmiany które zaszły w Rails 6 w zakresie integracji z zewnętrznymi bibliotekami Java Script, warto zobaczyć jak w praktyce wygląda integracja nowych Railsów z Bootstrapem. Do Rails 5 włącznie, biblioteki JavaScript oraz style CSS były zarządzane przez Rails i przechowywane w katalogu app/assets. Od Rails 6, za obsługę JavaScript odpowiada Webpacker, a biblioteki JS instalowane są w odrębnym katalogu – app/javascript.

Utwórzmy teraz przykładowy projekt Rails. Pomińmy testy, gdyż do celu przykładu nie będą one nam potrzebne.

rails new bootstrap_test -T

Instalujemy Bootstrap, Jquery i Popper.js, przy pomocy Yarn:

yarn add bootstrap jquery popper.js

Następnie edytujemy plik „config/webpack/environment.js” i modyfikujemy go tak, aby jego ostateczna wersja wyglądała jak poniżej:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'],
  })
)

module.exports = environment

W kolejnym kroku dodajemy poniższy kod do pliku „javascript/packs/application.js”:

var jQuery = require("jquery")

global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

require('bootstrap')

Na koniec, niezbędne jest jeszcze dodanie ładowania styli CSS z Bootstrapa, w tym celu należy umieścić poniższą linijkę w pliku „app/assets/application.scss”:

@import "bootstrap/scss/bootstrap";

Jeśli w katalogu „app/assets” istnieje już plik o nazwie application.css – zmieniamy jego nazwę na application.scss.

To tyle. Możemy już cieszyć się działającym Bootstrapem w aplikacji opartej o Ruby on Rails w wersji 6.