---
title: "Rails 6 وRuby 3 وBootstrap 5 وHotwire"
description: "هذا امتداد لمقالة مدونة Bootrails مع إضافة Hotwire إليها: أحدث الأدوات الرائعة (حتى وقت كتابة هذا TIL):"
canonical: https://oozou.com/til/rails-6-ruby-3-bootstrap-5-and-hotwire-115
locale: ar
date: 2021-04-18
topic: ruby-on-rails
---

# Rails 6 وRuby 3 وBootstrap 5 وHotwire

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

Published: 2021-04-18 · Topic: [ruby on rails](https://oozou.com/ar/til-topics/ruby-on-rails) ([markdown](https://oozou.com/ar/til-topics/ruby-on-rails.md))

هذا امتداد لمقالة مدونة [Bootrails](https://bootrails.com/blog/rails-bootstrap-tutorial) مع إضافة [Hotwire](https://hotwire.dev) إليها:  
أحدث الأدوات الرائعة (حتى وقت كتابة هذا الـ TIL):

```shell
$ 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:

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

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

```shell
$ 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
```

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

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

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

```sass
// 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`:

```html
<!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) بنجاح:

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

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ar/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"