2

Ruby&Rails + Bootstrap

#Ruby #Bootstrap
Rodrigo Satyro
Rodrigo Satyro

Aṕos muito quebrar a cabeça com instalações e configurações mal sucedidas de bootstrap no rails, decidi criar esse artigo para quem sabe, "dar uma luz" para aqueles que precisam de uma ajudinha na hora de colocar bootstrap em seus projetos rails.



-Aqui vou utilizar:

Rails version: 6.1.3
Ruby version: ruby 3.0.1
Bootstrap version: 5.0.1



-Vou iniciar pelo console/terminal um projeto em branco apenas para me situar:

# rails new meu_projeto
# cd ./meu_projeto



-Com o yarn(https://yarnpkg.com/) vou instalar pelo terminal: bootstrap jquery e popper.js

# yarn add bootstrap jquery @popperjs/core



-Quanto ao css: app/assets/stylesheets/application.css vou renomear para

/app/assets/stylesheets/application.css.scss,

dentro desse arquivo irei adicionar o bootstrap:


application.css.scss:

 ...

 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 @import 'bootstrap/scss/bootstrap';  



-Em app/javascript/packs/application.js, após a lista de imports que vem por padrão, adicionarei o bootstrap também( import 'bootstrap' ):


application.js:

...

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import 'bootstrap' //vai importar o bootstrap inteiro

...


---------

Teoricamente, tudo está instalado e configurado, bastando usar o bootstrap em seu projeto.


Para questão de teste, irei gerar a index/homepage e incluir um nav com função de dropbar(confirmando que instalação funcionou)



-Em config/routes.rb vou colocar a rota da index:


routes.rb:

Rails.application.routes.draw do
  root 'home#index'
end



-Irei criar o arquivo de controller para a nossa rota:

app/controllers/home_controller.rb e colocarei a action de index


home_controller.rb:

class HomeController < ApplicationController
  def index; end
end


-Em seguida precisamos criar a pasta home dentro de views e gerar o index.html lá dentro

app/views/home/index.html


-Agora com esse arquivo index.html criado, basta colocar o navbar do bootstrap

(https://getbootstrap.com/docs/5.0/components/navbar/)


index.html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


Com isso, seu projeto deve estar com o bootstrap completamente funcional :)

bastando colocar seu projeto para funcionar

# rails s

---

Observações:

  • Ao longo da criação deste artigo, me deparei com o lançamento do bootstrap v5, logo não testei todas as funcionalidades mas acredito que esteja funcionando 100%
  • Verifique se a versão do bootstrap instalado corresponde a documentação que esta usando de base para montar seu layout... ja teve vezes que instalei corretamente mas os codigos da documentação nao funcionavam e era por esse motivo(para saber qual versão do bootstrap no seu projeto abra o arquivo da pasta raiz do seu projeto: package.json)
  • Caso deseje usar a versão 4.6 do bootstrap, tenho um projeto com um commit só da aplicação do bootstrap, sendo que seria muito parecido com esse tutorial, caso consulte esse arquivo e leia esse tutorial, tudo deve sair bem(ah... yarn add bootstrap jquey popper.js para a versão 4.6)
  • commit com tudo que precisa para versão 4.6: https://github.com/xitarps/photo_app/commit/0b3f446de74ef607abcdd7afe5851b86c2ba70d9


Ficaria muito grato por críticas/analises etc ao artigo, venho tentando melhorar minha forma de compartilhar minhas experiências. :)

1
55

Comentários (2)

1
Fabiane Albuquerque

Fabiane Albuquerque

25/05/2021 22:52

Muito legal o post, eu tive diversas vezes problemas por usar uma versão do Bootstrap no projeto mas ao buscar no google a documentação, usar de outra versão sem querer, isso fazia algumas coisas não carregarem. Desta sua forma funcionou direitinho! =D

1
Lucas Silva

Lucas Silva

25/05/2021 18:04

Que maravilha, esse artigo , está clareando muito minha mente, esta com dificuldade também.


Obrigado e parabéns.