Archives par mot-clé : nodejs

Présentation de Bower

La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

  • install : installer toutes les dépendances du projet définies dans le fichier bower.json
  • install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
  • update : mettre à jour les dépendances d’un projet
  • search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
  • uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
  • list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).

Présentation de Grunt

Le développement nécessite d’avoir de bons outils afin de gagner en productivité. L’automatisation des taches est un bon moyen de gagner du temps.

Grunt est un lanceur de taches. Il est basé sur NodeJS. Grunt permet de facilement automatiser vos taches liés au développement web. L’écosystème autour de nodeJs étant très dynamique, il existe une pléthore de taches grunt existantes

Je n’aborderai pas dans cet article l’installation et la configuration de grunt, vous trouverez dans la partie liens de très bons articles traitant ce sujet.

Voici une liste de quelques plugins utiles :

  • Less : Permet de compiler du des fichier LESS en CSS (il existe bien évidemment des plugins pour les autres préprocesseurs comme SASS ou Stylus
  • Cssmin : Permet de minifier vos CSS
  • Jshint : Permet de valider via JsHint votre code JavaScript
  • Concat : Permet la concaténation de fichier afin d’améliorer les performance de chargement de votre site
  • Uglify : Permet de minifier vos fichier js (permet également la concaténation avec possibilité d’utiliser Source map afin de debugger facilement vos scripts)
  • imageoptim / responsive-images : Permet d’optimiser et de générer des images adaptées à différentes résolution (responsive web design)
  • Watch : Permet de surveiller vos fichier et de lancer d’autres taches à chaque modification
  • HTMLHint : Validation de votre code HTML
  • jsdoc : Permet de générer la documentation de votre code js

Liens

Alternatives

Utilisez-vous Grunt ? Si oui, quelles taches utilisez-vous ?

NodeJs : Creer un serveur web avec Express

J’ai suivi récemment un formation HTML5 dans le cadre de mon travail. Lors de celle-ci, nous avons utilisé node.js pour la partie serveur.

Node.js est une plateforme basée sur le moteur JavaScript de Chrome qui permet de développer des applications en JavaScript. L’écosystème autour de nodejs est riche, outillé et très actif. Il est réputé pour ses performances (lié à son mode événementiel) et sa scalabilité.

Il existe notamment npm, node package manager, qui permet de gérer des modules et leurs dépendances. Il existe un très grand nombre de modules (+ de 48 000 actuellement) qui vous permettront de faire à peu tout ce que vous souhaitez (accès à une base de données, accès aux système de fichiers, …)

Dans notre cas, nous allons créer un serveur web avec node.js. Nous allons utiliser express, un module qui facilite la création d’un serveur web.

Installation d’Express

Nous allons donc installer Express via npm via la commande suivante en vous étant au préalable placer dans le dossier de votre future application (Pré-requis : NodeJs doit être installé.) :

npm install express

Cette commande va télécharger express et toutes ses dépendances dans le dossier node_modules (ce dossier contiendra tous les modules que vous installerez).

NB : Il est possible de définir un fichier package.json qui va définir votre projet dont ses références (guide interactif des propriétés du fichier package.json).

{
   "name": "demo",
   "description":"Mon serveur express",
   "version": "0.0.1",
   "dependencies": {
      "express": "3.x"
   }
}

Il suffit alors de lancer la commande pour que les dépendances du projet soit téléchargées :

npm install

Configuration du serveur

Node.js exécutant du JavaScript, notre serveur sera définit dans un fichier .js.
Voici l’exemple d’un fichier server.js qui permet de rapidement avoir un serveur http avec express.

//définition des dépendances et création d'un serveur express
var express = require('express'),
    app = express();

//configuration d'express
app.configure(function() {
  //__dirname est le chemin du dossier parent du fichier serveur
  //permet de renvoyer les fichiers à partir de la racine du fichier
  app.use(express.static(__dirname));
  //permet d'afficher la liste des fichiers d'un dossier
  app.use(express.directory(__dirname));
  //permet de gérer les erreurs
  app.use(express.errorHandler());
});

//on lance le serveur sur le port 8081
app.listen(8081);
//On affiche dans la console que le serveur tourne
console.log('Serveur lancé sur le port 8081');

il suffit de lancer dans la console de commande / terminal :

node server.js

Vous pouvez lancer votre navigateur à l’url http://localhost:8081 pour voir le résultat.

Voici par exemple l’affichage de la racine de mon serveur local pour le développement de mes exemples pour le blog.

Server web avec Express

Il affiche les dossiers et permet également de faire une recherche.

Le serveur ne renvoie que des fichiers statiques (html, css, js , images, …) mais il est tout à fait possible de renvoyer du contenu dynamique.

Références

Quelques liens pour bien débuter avec node.js

A noter, pour ceux qui font du .NET comme moi,  que viens de sortir une extension pour Visual Studio pour Node JS qui a l’air très bien