Concevoir et déployer un site en Nodejs -Partie 1
Nodejs c’est la nouvelle technologie à la mode et elle a de quoi séduire : de meilleures performances, une homogénéité du langage de programmation coté back et front office (javascript donc), mono thread orienté évènements … Bref c’est une technologie qui je pense est importante à apprendre ou au moins garder un œil dessus.
On retrouve d’ailleurs pleins de tutos parlant de Nodejs, malheureusement la plupart se destine à une mise en bouche et finalement on ne retrouve pas de tutoriel “complet”, ce que j’entends par : un tutoriel expliquant la conception d’une application en Nodejs de l’installation des dépendances jusqu’à sa mise en production.
C’est ce que je vous propose de voir dans cette suite d’articles. Nous allons voir comment réaliser un petit site en Nodejs jusqu’à son déploiement. On verra tous les besoins que cela implique (configuration par environnement, brancher une base de données, concevoir un système d’authentification, l’internationalisation etc …).
1 — Installation
Pour installer Nodejs rien de plus simple :
Sur Linux type Debian :
$ curl -sL https://deb.nodesource.com/setup | sudo bash - $ sudo apt-get install -y nodejs
Sur Mac OS X :
$ brew install node
Sur Windows je vous laisse suivre ce tuto.
Pour le reste, je vous laisse voir le site de Nodejs (https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager) tout y est expliqué.
2 — Initialisation du projet
La première chose à faire lorsqu’on commence un projet Nodejs c’est de créer un fichier package.json. Ce fichier va nous permettre de renseigner tout un tas d’informations sur votre projet (son nom, sa version, l’auteur, le repository etc …), mais surtout définir toutes les dépendances avec d’autres modules Nodejs, car il faut savoir que Nodejs tout seul ne fait pas grand chose (bon il sait faire quand même pas mal de choses, il suffit de voir la doc (https://nodejs.org/api/) sur le site officiel, mais pas de la manière la plus pratique qu’il soit).
On va donc créer notre fichier comme tel :
//package.json {
"name": "my-nodejs-application",
"version": "1.0.0",
"description": "It's my first nodejs application",
"author": "Kevin Balicot ",
"dependencies": {
"express": "4.*",
"jade": "1.9.*"
}
}Il existe tout un tas de tags reconnu que l’on retrouve sur le site officiel de npm (https://docs.npmjs.com/files/package.json), ici on va rester simple en renseigner le nom, la description et la version en cours de notre application. Vous remarquerez également que j’ai mis une dépendance avec les modules Express et Jade.
NPM est un gestionnaire de modules node, il est installé par défaut avec Nodejs et permet par exemple d’installer le framework Express. Pour plus d’information et savoir l’utiliser allez sur le site officiel (https://docs.npmjs.com/). Vous trouverez également la liste de tous les modules ici (https://www.npmjs.com/)
Express est un framework pour Nodejs qui va grandement nous faciliter la vie, en effet il va nous servir pour les requêtes et réponses HTTP ainsi que configurer notre router. Bref c’est un indispensable. Pour vous donner un petit exemple, voici deux petits bouts de code permettant de renvoyer une réponse HTTP 200 avec le message “hello world !” lorsqu’on envoie une requête de type GET à notre serveur Nodejs via l’url “/hello”
Nativement sans express :
//server_native.js
// Nos dépendances, http permet de lancer un serveur HTTP
// url va nous permettre de parser les url
var http = require('http');
var url = require('url'); // On crée notre serveur
var server = http.createServer(function(req, res) {
// On parse l'url
var route = url.parse(req.url).pathname;
// On construit notre réponse
res.writeHead(200, {"Content-Type": "text/plain"}); if (route == '/hello') {
res.write('hello world !');
}
res.end();
}); // On lance notre serveur sur le port 8080
server.listen(8080);
Puis avec Express :
//server.js
var app = require('express')(); app.route('/hello').get(function(req, res) {
res.send('hello world !');
});
app.listen(8080);
Alors convaincu ? C’est déjà plus simple et puis on si retrouve mieux. Pour lancer le téléchargement des modules, il suffit de lancer la commande suivante au même endroit que votre fichier package.json
$ npm install
3 — Premiers pas
Ok c’est bien beau mais au final un site en Nodejs ça ressemble à quoi ? Et bien c’est ce que nous allons voir en faisant un petit projet démo. Pour ne pas faire du code juste pour coder, on va se donner un objectif : faire un petit blog (un peu comme celui-ci qui est aussi en Nodejs). Avant de nous lancer tête baissée sur notre IDE on va réfléchir au découpage du code.
Je vous propose ce découpage :
bin/
express.js
express-router.js
src/
controllers/
default.js
models/
routers/
default.js
config/
public/
css/
js/
views/
layout.jade
index.jade
package.json
server.js
Plusieurs choses sont à voir ici, premièrement les dossiers :
Dans le dossier bin on va retrouver tous nos fichiers de configuration des modules node dont nous allons avoir besoin (par exemple express.js). Le dossier src contiendra notre code lui même découpé en 3 dossiers, les controllers, les models et enfin les routers (nous allons voir cela par la suite). Un dossier config qui contiendra nos fichiers de paramètres par environnement. Et enfin notre dossier public pour nos assets (js, css et les vues).
Ensuite les fichiers :
server.js va être notre launcher, c’est ce fichier que nous allons appeler avec la commande “node server.js”. bin/express.js et bin/express-router.js vont nous permettre de configurer express. Ensuite src/controllers/default.js va nous permettre de contrôler les entrées sorties, src/routers/default.js va faire le lien entre les url et le contrôleur. Enfin les deux fichiers layout.jade et index.jade seront nos vues.
Jade est un template engine, à l’instar de Twig pour Symfony. Il va nous permettre principalement de découper notre template et faire quelques opérations directement dans nos vues. Il s’installe de la même manière que express, en incluant “jade”: “1.9.*” dans notre package.json. La doc de jade (http://jade-lang.com/api/).
Commençons par éditer express.js :
//bin/express.js
var express = require('express');
module.exports = function() {
var app = express(); // On ajoute jade à express ainsi que le chemin des vues
app.set('view engine', 'jade');
app.set('views', './public/views');
// On définit des alias sur nos assets,
// ainsi dans la vue on pourra facilement y faire référence sans tenir
// compte du chemin du fichier
app.use('/css', express.static('./public/css'));
app.use('/js', express.static('./public/js'));
app.use('/img', express.static('./public/img'));
return app;
};
Ensuite express-router.js :
Ce fichier va nous permettre d’extraire le router de express, en effet nous avons besoin d’injecter le routeur dans notre fichier src/routers/default.js sans avoir besoin d’injecter toute la configuration express de notre application.
//bin/express-router.js
var express = require('express');
module.exports = function() {
// On retourne que le router de express
return express.Router();
};Et voila, la configuration de notre serveur est finie, c’était facile non ?
Bien maintenant notre contrôleur, ici il ne va pas faire grand chose à part rendre notre vue.
//src/controllers/default.js
module.exports.index = function(req, res) {
// req est bien entendu notre objet requête et res notre objet réponse
// on utilise l'objet res pour rendre notre vue index.jade
// (pas besoin de spécifier le chemin de la vue, on l'a fait dans bin/express.js)
res.render('index');
};
Ensuite le routeur, nous allons créer notre première route “/”.
//src/routers/default.js
var controller = require('./../controllers/default');
// On injecte le router d'express, nous en avons besoin pour définir les routes
module.exports = function(router) {
// On crée une route sur l'url "/",
// cette route va appeler la méthode index() du contrôleur
router.get('/', controller.index);
};
Maintenant occupons-nous de notre vue, comme dit plus haut nous allons utiliser Jade pour créer notre HTML, vous allez voir la syntaxe n’est pas difficile, sinon voici la doc http://jade-lang.com/api/. Nous créons donc deux fichiers, layout.jade (notre template que l’on va intégrer dans chacune de nos vues) ainsi que index.jade.
//public/views/layout.jade
doctype html
html(lang="fr")
head
meta(charset="UTF-8")
title Mon site en Nodejs
body
block body
//public/views/index.jade
extends layout.jade
block body
section.container
header.header.clearfix
nav
ul.nav.nav-pills.pull-right
li.active a(href="#") Accueil
li a(href="contact") Contact
h3.text-muted Mon site en Nodejs
div.jumbotron
h1 Bienvenu sur mon site fait avec Nodejs
p.lead Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
p a(href="#").btn.btn-success Voir le code
footer.footer p © Company 2015
Avec Jade pas besoin d’utiliser la syntaxe des balises d’HTML ( ), ni besoin de fermer les balises, “.” et “#” permettent d’ajouter une classe ou un identifiant à un élément (par exemple p.class#id vaut en HTML). Les mots clés “extends” et “block” ont la même utilité que Twig pour ceux qui sont familiarisé avec cet autre template engine.
Et voila, il nous reste plus qu’à lier tout ceci en créant server.js à la racine du projet.
//server.js
// Nous avons besoin de notre configuration
var app = require('./bin/express')();
var router = require('./bin/express-router')();
//On fait appel à nos routes
require('./src/routers/default')(router);
// Puis on dit à express d'utiliser notre router
app.use('/', router);
// Enfin on lance notre serveur sur le port 8080
app.listen(8080);
console.log('Server launched on port 8080');
Bien nous avons plus qu’à tester tout ceci en lançant les commandes suivantes :
$ npm install $ node server.js
Enfin ouvrez votre navigateur sur la page http://localhost:8080. Voilà !
4 — Allons plus loin
Bien vous l’aurez remarqué, il n’y pas de style. Pas de soucis, il suffit d’ajouter les fichiers dans public/css et des les inclure avec Jade. Mais pourquoi ne pas utiliser un nouvel outil qui va nous permettre de télécharger les librairies telles que Bootstrap ?
C’est ce que je vous propose de faire en découvrant un nouveau gestionnaire de paquets fonctionnant exactement comme npm, je veux parler de Bower ! Pour l’installer rien de plus simple, on utilise npm en l’installant de façon global (option -g), c’est à dire accessible de partout sur votre machine.
$ npm install -g bower
Comme je l’ai dis, Bower fonctionne exactement comme npm, il faut donc créer un fichier json pour notre projet — bower.json.
//bower.json
{
"name": "my-nodejs-application",
"version": "1.0.0",
"description": "It's my first nodejs application",
"author": "Kevin Balicot ",
"dependencies": {
"bootstrap": "3.3.*"
}
}
On ne se prend pas la tête et on reprend les mêmes informations que pour package.json, sauf qu’ici on a une dépendance sur Bootstrap, vous pouvez retrouver tous les paquets que connait Bower à ce lien http://bower.io/search/. Enfin tout comme npm on installe avec la commande :
$ bower install
Il nous reste plus qu’à inclure les fichiers css et js avec Jade. Cependant il ne faut pas oublier de faire un alias dans bin/express.js pour nos paquets Bower.
//bin/express.js
app.use('/bower', express.static('./bower_components'));
//public/layout.jade
doctype html
html(lang="fr")
head
meta(charset="UTF-8")
title Mon site en Nodejs
link(href="/bower/bootstrap/dist/css/bootstrap.css", rel="stylesheet", type="text/css")
script(type="/bower/jquery/dist/jquery.js", src="/js/analytics.js")
script(type="/bower/bootstrap/dist/js/bootstrap.js", src="/js/analytics.js")
body
block body
Conclusion
Comme vous avez pu le voir il est facile de faire un petit site avec Nodejs. C’est également flexible grace à ces nombreux modules node. Sachez toute fois que Nodejs ne fait pas que des sites, en effet Nodejs est avant tout un serveur en javascript, couplé avec le module socket.io par exemple et vous avez des milliers d’applications !
Dans la prochaine partie nous allons voir comment ajouter une base de données et ajouter de la configuration par environnement. Alors à la prochaine :)
Il se peut que certaines notions de Nodejs vous ai échappées. Par exemple les modules qui ne sont pas faciles à appréhender au premier regard, je vous invite à lire la documentation officielle de Nodejs sur les modules https://nodejs.org/api/modules.html
Vous pouvez retrouver le code source complet de ce tuto sur mon github ou à ce lien : https://github.com/kevinbalicot/nodejs-tutoriel/tree/nodejs-partie-1
Originally published at kb-web.fr.
