Utiliser Bower avec Ruby On Rails

Bower (initié par Twitter) est un package manager dédié au web. Il faut comprendre par là que vous ne trouverez pas de binaire mais uniquement du css/javascript/etc. En gros vous trouverez tous les packages/ressources dont vous avez besoin pour vos productions web !

Vous pouvez donc construire votre application/site avec des ressources à jour, facilement maintenable et surtout vous n'avez plus besoin de vous occuper des dépendances entre les packages!

Installation de bower

Il faut commencer par installer nodeJS si cela n'est pas déjà fait.

Pour installer bower rien de plus simple :

npm install -g bower  

Voilà!

Mettre bower sur les rails

Il nous faut préparer un peu le terrain pour que bower puisse fonctionner avec RoR.

Bower utilise un fichier de type .bowerrc qui est unique pour chaque projet.

cd /to/your/rails/app  
vim .bowerrc  

Fichier : .bowerrc

{
    "directory": "vendor/assets",
    "json": "bower.json"
}

directory : est le dossier de destination des packets

json : est le fichier utiliser pour la configuration de notre arborescence de packets.

De base bower utilise ./components comme dossier de destination, c'est pour cela que nous l'avons redéfini. Il ne vous reste plus qu'à installer les packages dont vous avez besoin. Je ne vais pas plus m'étendre sur bower, vous trouverez toutes les informations sur le site qui lui est dédié.

Configurer Rails

Dans le fichier app/assets/javascript/application.js il vous suffit d'ajouter un require comme ceci :

//= require votrepackage

Attention... Certains packages utilisent des .min ou même des sous-dossiers contenant les libs...
Ne vous inquietez pas !
Pour exemple si votre package s'appelle : chosen.jquery.min.js et qu'il est dans : vendor/assets/chosen/chosen

//= require chosen/chosen.jquery.min

Pour la partie CSS il vous suffit de faire de même !

Bower.json

Si comme moi vous souhaitez initialiser rapidement un projet avec des ressources liées à bower :
Créez un bower.json à la racine de votre projet :

{
  "dependencies": {
    "jquery": "latest"
  }
}

Si vous utilisez bower install cela installera automatiquement toutes les dependencies !

comments powered by Disqus