Ruby on Rails con Bootstrap

Uno dei maggiori ostacoli che ho riscontrato durante i miei tentativi di scrivere una piccola applicazione web con Ruby on Rails 7 e 8, a parte il deployment, è sempre stata la gestione dei CSS.

Quando si parla di CSS e Rails, bisogna entrare nel tunnel oscuro della asset pipeline per cercare di capire come diavolo funziona, quali gemme utilizzare e dove infilare il codice.

Nelle ultime versioni del libro “Agile Web Development with Ruby on Rails”, gli autori hanno deciso di passare da fogli di stile completamente “custom” al framework Tailwind, che sembra l’unico funzionante out of the box quando si crea un’applicazione Rails con il comando rails new e passando l’opzione --css=tailwind. Se si prova a fare la stessa cosa scegliendo come framework css Bulma o Bootstrap, al momento di lanciare il server di sviluppo si riscontrano spesso problemi fatali.

La modalità più facile e sicuramente funzionante senza troppi sbattimenti sarebbe quella di utilizzare il framework includendolo tramite link alla CDN, ovvero senza integrare il codice localmente all’applicazione, ma questa è una strada che non mi piace. Preferisco che la mia applicazione sia il più possibile autocontenuta.

Perché Bootstrap?

Tailwind sembra essere un ottimo framework, ma non mi sembra particolarmente immediato da utilizzare, soprattutto per uno come me che non sa niente di frontend. Dato che la mia intenzione è quella di produrre un’applicazione (semplice) nel più breve tempo possibile, Bootstrap mi sembra la scelta migliore, grazie anche alla quantità sterminata di tutorial ed esempi disponibili in rete.

Integrare Bootstrap in maniera rozza ma efficace

Per aggiungere Bootstrap nella mia applicazione ho seguito questa procedura:

1. creo l’applicazione usando l’opzione --css=sass
2. salvo il file CSS di Bootstrap in app/assets/stylesheets/bootstrap.min.css
3. salvo il file Javascript del framework in app/javascript/bootstrap.bundle.min.js
4. aggiungo la riga pin "bootstrap.bundle.min" nel file config/importmap.rb
5. aggiungo la riga `@import “bootstrap.min”; nel file app/assets/stylesheets/application.scss
6. aggiungo la riga import "bootstrap.bundle.min" nel file app/javascript/application.js
7. avvio il server di sviluppo col comando bin/dev

A questo punto è possibile utilizzare le classi Bootstrap all’interno delle proprie views, come nel seguente esempio:

<div class="container mt-5">
  <h1 class="text-primary">Benvenuto in Rails con Bootstrap!</h1>
  <button class="btn btn-success">Pulsante Bootstrap</button>
  <hr>
  <h2 class="text-secondary">Test Dropdown Bootstrap</h2>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>
Code language: HTML, XML (xml)

Il risultato, col pulsante dropdown cliccato, è il seguente: