Bower e Rails. Pode isso Arnaldo?!

Bom dia Galera.

Há um tempo atrás descobri o bower desde então venho utilizando muito ele, pois como os demais gerenciadores de dependencias que temos em outras linguagens, este também é uma mão na roda! Ele é o mesmo que o bundler é para o rails, Maven é para o Java, etc.

Hoje vou mostrar uma maneira fácil de integrar toda a funcionalidade do bower com a agilidade do Rails. Existe gems para realizar esta integração como a https://github.com/stve/bower entre outras, mas neste tutorial eu vou fazer no braço.

Bower install

Vamos por a mão na massa. Você vai precisar:

  • -Node.js instalado

Ubuntu

$ apt-get install node

Mac

$ homebrew install node
  • -Bower installado via node.js
$ npm install -g bower
  • -Rails é claro.

Crie sua aplição:

$ rails new app_with_bower
$ cd app_with_bower
$ bundle install

Inicie o bower na sua aplicação:

$ bower init

Ele irá lhe fazer uma serie de perguntas sobre a aplicação, logo apos isto ele vai gerar um bower.json com dados sobre ela:

{
  "name": "BlaBla",
  "version": "0.0.01",
  "homepage": "https://github.com/CristianOliveiraDaRosa/Bla",
  "authors": [
    "Cristian Oliveira <contato@cristianoliveira.com.br>"
  ],
  "description": "Bla bla bla",
  "moduleType": [
    "node"
  ],
  "keywords": [
    "Gamification",
    "Math",
    "Statistics"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Como default o bower instala todas as dependencias em bower_components, primeiro vamos alterar isso e colocar em uma pasta mais “Rails like”. Ou seja, em “app/assets/components”.
Crie um arquivo chamado .bowerrc para setar configurações ao Bower:

{
   "directory": "vendor/assets/components"
}

Perfeito está configurado.

Configurações no Rails

Para que o Rails “enxergue” os componentes que o bower irá instalar na pasta que configuramos anteriormente precisamos alterar o “/config/application.rb”:
Adicione ao final:

    config.assets.paths << Rails.root.join('vendor','assets', 'components')

Here we go!

Dentro da pasta da sua aplicação instale um componente qualquer. Uma dica, se você não sabe o nome completo do componente use o comando “search” ele vai te dar algumas opções.

$ bower install sweetalert

*Essa é uma biblioteca muito boa para alertas em js #ficadica.

E é só adicionar no seu html normalmente ou de uma maneira mais elegante fazer um require em /assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require foundation
//= require sweetalert/lib/sweet-alert 
//= require_tree .

$(function(){
 ...bla
})

Era isso enjoy!