Labo 03

Labo 03

Mercredi 25 septembre

Objectifs

• Retour sur npm et package.json.
• Se familiariser avec le framework Express.js et les préprocesseurs Jade et Stylus.
• Construire une application web complète et simple avec ces technologies.

Ressources

• Validation de fichires JSON
• package.json
• Express
• Jade
• Stylus

Exercice 01 : package.json et npm

Rappel

Le fichier package.json est utilisé par npm pour installer les dépendances nécessaires à un logiciel. Il s'agit d'une structure JSON. Pour valider le fichier JSON, utilisez http://jsonlint.com/

Règle générale les éléments suivants sont inclus :

• name : le nom du logiciel sans espace ou caractère spéciaux (_ et - permis)
• description : une courte description du logiciel
• author : l'auteur du logiciel
• version : version du logiciel, utilisez le système Semantic Versioning.
• dependencies : si nécessaire seulement, un dictionnaire des dépendances avec les versions minimales
• engine : un dictionnaire avec les versions de node dont le logiciel fonctionne.

Voici un exemple de package.json :

{
  "name": "inf4375-2013e-labo02-exercice05",
  "description": "Exercice 05 du labo 02 de INF4375 pour la session d'automne 2013",
  "author": "[email protected]",
  "version": "0.0.1",
  "dependencies": {
    "xmldom": "= 0.1.16",
    "express": "3.2.5"
  },
  "engine": "node >= 0.10"
}

Et pour tester la validité du fichier, on peut exécuter dans le même dossier npm test. Il peut y avoir des avertissements (WARN) ou des erreurs (ERR!). Les erreurs doivent être réglés sinon npm ne pourra pas installer les dépendances.

Exercice

Faire un fichier package.json valide (sans erreurs rapporté par npm, on peut laisser faire les avertissements comme le fichier README.md qui n'existe pas) qui inclus :

• Un titre et une description. Ce sera le package.json que vous utiliserez pour le reste du labo, donc le titre et la description peuvent représenter ce labo
• Un auteur (vous)
• La version (0.0.1)
• Les dépendances :
  • express, version 3.2.5
  • jade, version 0.30 et plus
  • stylus, version 0.32 et plus
• Node v0.8 et plus

Une fois le fichier package.json écrit, testez le avec npm test :

$ npm test
npm WARN package.json [email protected] No README.md file found!

J'ai un warning, mais on l'ignore. S'il y a un erreur, vous allez voir une ligne du type :

$ npm test
npm ERR! Failed to parse json
npm ERR! Unexpected end of input
npm ERR! File: [chemin vers votre projet]/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR! 
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

Exercice 02 : Jade

• Installez les dépendances du fichier package.json que vous avez complété à l'exercice précédent avec : npm install
• Convertissez cette page HTML en template Jade. Pour utiliser la ligne de commande jade, à partir du shell vous pouvez faire node_modules/.bin/jade sous Mac et Linux et node_modules\.bin\jade sous Windows.

Pour compiler un fichier .jade en .html lancez le compilateur avec le nom du fichier .jade en paramètre, par exemple : node_modules\.bin\jade MonFichier.jade

Exercice 03 : Stylus

• Convertissez ce fichier CSS en template stylus. Pour utiliser la ligne de commande jade, à partir du shell vous pouvez faire node_modules/.bin/stylus sous Mac et Linux et node_modules\.bin\stylus sous Windows.

Pour compiler un fichier .stylus en .css lancez le compilateur avec le nom du fichier .stylus en paramètre, par exemple : node_modules\.bin\stylus mon-style.styl

Exercice 04 : Express

Pour créer un projet avec Express, vous pouvez utilise la commande suivante (une fois que express est installé) : node_modules/.bin/express --css stylus projet_express où projet_express est le nom du dossier dans lequel le projet sera créé (n'utilisez pas d'espace dans le nom...). Une fois le projet créé, un fichier package.json sera créé. Vous pouvez installer les dépendances avec npm install. Par la suite, vous pouvez lancer le server avec node app.js.

Pour cet exercice, nous allons retravailler l'exercice 5 du dernier labo pour l'intégrer à Express. Vous pouvez vous baser sur la solution disponible à l'adresse suivante : https://github.com/jpcaissy/INF4375-2013A/blob/master/labo-02/exercice05.js