Rails 6 وRuby 3 وBootstrap 5 وHotwire

هذا امتداد لمقالة مدونة Bootrails مع إضافة Hotwire إليها:
أحدث الأدوات الرائعة (حتى وقت كتابة هذا الـ TIL):

$ ruby --version
3.0.1
$ rails --version
Rails 6.1.3.1
$ rails new MyApp --skip-bundle --skip-coffee --database=postgresql
$ cd MyApp
# Add Hotwire-rails to Gemfile
$ echo "\ngem 'hotwire-rails'" >> Gemfile
$ bundle
$ ./bin/rails webpacker:install
# lets keep javascript and stylesheets in a app/frontend folder
$ mv app/javascript app/frontend
# add bootstrap dependencies
$ yarn add bootstrap@next
# when prompted, choose the latest version here:
$ yarn add @popperjs/core@next

عدّلوا الملف ./webpacker.yml وغيّروا قيمة source_path:

# Inside webpacker.yml
default: &default
  source_path: app/frontend # Change here

أضيفوا الملفات اللازمة لتحميل bootstrap:

$ mkdir app/frontend/js && touch app/frontend/js/bootstrap_js_files.js
$ touch app/frontend/packs/application.scss
# Warning, this removes application.css (which we replace with application.scss)
$ touch app/assets/stylesheets/.keep && rm app/assets/stylesheets/application.css

// inside app/frontend/js/bootstrap_js_files.js
// enable plugins as you require them  

// 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'

// inside app/frontend/packs/application.js  

// Add this line before import Rails …
import '../js/bootstrap_js_files.js'  

// inside app/frontend/packs/application.scss  

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

إعداد Hotwire

# create ./bin/bundle; currently required for the Remove Turbolinks task by Stimulus
# see: https://github.com/hotwired/stimulus-rails/issues/55
$ bundle binstubs bundler
$ ./bin/rails hotwire:install

عدّلوا الملف app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>MyApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- Warning !! ensure that "stylesheet_pack_tag" is used, line below; also change turbolinks to turbo for hotwire -->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

تحققوا من أن كل شيء يُبنى (compile) بنجاح:

$ ./bin/rails assets:clobber
# You can probably ignore the warnings :)
$ ./bin/rails webpacker:compile