J'ai découvert hier yeoman. Et yeoman, c'est vraiment top ! Commencer un projet web, c'est toujours un peu intimidant. Même avec un framework bien cadré, on a toujours un peu du mal à trouver pas quoi commencer. Et c'est encore pire avec Node.js qui offre une liberté d'action qui en rebutera plus d'un. Yeoman est là pour vous aider. Il vous propose de construire les fondation de votre webapp à partir de générateurs prédéfinis. Il en existe des tas et vous pourrez d'une simple commande construire une webapp statique avec Bootstrap préinstallé, ou une application MVC basée sur expressjs avec une base de donnée MongoDB. Il se permet aussi d'installer Bower, un outil d'installation de librairies javascript, comme NPM mais pour la partie frontale et il configure Grunt pour vous offrir des fonctions bien pratique comme la fonction serve qui va ouvrir votre navigateur sur la page de votre web app et la recharger tout seul dès que vous sauvegarderez un fichier, mais aussi une commande pour compiler votre webapp afin qu'il ne reste plus qu'à la copier sur votre prod.
Comment ça marche ?
Plutôt bien.
Commençons par l'installer :
sudo npm install -g yo
T'as vu.
Choisir son générateur
La seconde étape est de choisir son générateur parmi la liste déjà très longue proposée par yeoman. Pour l'exemple, nous allons utiliser le générateur de base, webapp :
npm install -g generator-webapp
Placez vous dans le dossier de votre future application et lancez :
yo
Choisissez dans la liste des générateurs disponibles celui de votre choix. Vous pouvez même en chercher et en installer depuis cette interface, c'est vraiment bien foutu. Selon le générateur choisi, il va vous poser quelques questions auxquelle vous répondrez promptement et avec assurance.
Ça peut prendre pas mal de temps, parce qu'il installe des tas de trucs selon les générateurs. Mais faite lui confiance et laissez le faire !
Une fois terminé, vous pouvez taper :
grunt serve
Et voir apparaitre un nouvel onglet dans votre navigateur avec votre webapp toute neuve, prête à être écrite !
Vous pouvez utiliser bower
pour ajouter des librairies à votre projet et ils seront automajiquement inclus dans votre index.html
. Vous pouvez aussi construire un build de votre projet en lançant grunt
ou lancer les tests à l'aide de grunt test
. Il va compiler vos CSS avec less ou sass (compass) selon ce que votre générateur aura choisi pour vous. Il va aussi vous engueuler à la moindre faute de frappe dans vos fichier javascript à cause de jshint. Pensez à correctement indenter vos accolades et bien mettre des ; à chaque fin de lignes sous peine de vous faire violemment rappeler à l'ordre !
Ne reste plus qu'à coder. Au boulot !