Rails 6.1 ve Webpacker ile Bootstrap 5 kurulumu

Bu yazimizda Rails 6.1 uygulamamiz icin webpacker araciligiyla nasil bootstrap 5 temasini yukleyecegimizi gorecegiz.

Ayrica Webpacker kullanimina ornek olusturacak Rails icin gerekli degisiklikleri bu yazimizda da gerceklestirecegiz.

Webpacker cogu arkadasin Rails uzerinde kafasini karistirmakta.

Yeni Rails Uygulamasi Olusturalim

rails new myapp
cd myapp

Baslangic sayfasi olmasi icin hosgeldin adinda bir tane controller ve index adinda sayfa olusturalim:

rails generate controller hosgeldin index

config/routes.rb dosyasini acalim ve asagidaki gibi varsayilan baslangic sayfasini degistirelim:

# config/routes.rb  
Rails.application.routes.draw do  
  get "hosgeldin/index"
  # root to: komutu websitenin ilk gosterilen
  # sayfasini belirtmek icindir
  root to: "hosgeldin#index"  
end  

Rails uygulamamizi baslatalim:

rails s

ve localhost:3000 sayfasini actigimizda karsimiza hosgeldin#index icindeki HTML dosyamizin geldigini goreceksinizdir.

Dosyaya buradan ulasarak degisiklikler yapabilirsiniz:

app/views/hosgeldin/index.html

Suanda herhangi bir stil yerlestirmedik. Gelin bootstrap 5beta3.0 i yuklemeye basliyalim. Bunun icin terminale:

yarn add bootstrap@5.0.0-beta3
yarn add @popperjs/core@2.0.0-alpha.1

Yazarak yarn araciligiyla bootstrap paketlerimizi yukluyoruz.

Webpacker ile kullanabilmek icin bazi klasor ve dosya olusturalim:

mkdir app/javascript/js
touch app/javascript/js/bootstrap_js_files.js

Bu kodumuz app/javascript icinde js adinda bir klasor ve o klasorun icinde ise bootstrap_js_files.js adinda bos bir dosya olusturacaktir.

bootstrap_js_files.js dosyasini acalim ve icine asagidaki kodlari yazalim bu kodlar bootstrap paketinde gelen ayri ayri pluginleri eklememize ve eger istemedigimiz bir plugin varsa inaktif etmemize yaracaktir.

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'

Simdi app/javascript/packs/application.js dosyasini acalim ve icine asagidaki kodu ekliyelim:

import '../js/bootstrap_js_files.js' 

Bu sayede webpacker bootstrap js dosyalarini artik derliyecektir.

Webpacker ile kullanabilmek icin style css dosyalarimizida tanitmamiz gerecektir. Bunun icin varsayilan bir Rails uygulamasiyla gelen style semasi isimize yaramayacak. O zaman asagidaki komutu girerek kendi stylesheet imizi paket halinde olusturalim:

touch app/javascript/packs/application.scss

ve olusturdugumuz bu dosyayi acarak icine bu kodu girelim:

// Bootstrap v5 ekliyelim  
@import "~bootstrap/scss/bootstrap";

Simdi bu degisikligi yaptigimiz icin Rails’a stil dosyamizin nerede oldugunu belirtmemiz gerekiyor.

app/views/layouts/application.html.erb dosyasini acalim ve

stylesheet_link_tag yerine stylesheet_pack_tag ile degistirelim son gorunum bu sekilde olacaktir:

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

Artik bootstrap 5 Rails uygulamamizla sorunsuz calisacaktir.

Bunu denemek ve derlemek icin Webpackeri kullanabiliriz:

rails webpacker:compile

Ve Rails uygulamamizi baslatalim:

rails s

Artik bootstrap 5 temasini kullanabiliriz.

https://getbootstrap.com/docs/5.0/getting-started/introduction/

0.00 avg. rating (0% score) - 0 votes
0 Comments

No Comment.