lindev.fr

Aller au contenu | Aller au menu | Aller à la recherche

dimanche, octobre 14 2012

Premier site avec NodeJs et ExpressJs

Nous allons voir dans ce billet rapide, comment créer un site web, ( très simpliste certes, mais il faut bien commencer simple ) en quelques minutes grâce à Node.js ( utilisé comme serveur ) et ExpressJs framework MVC abouti et bien documenté.

Installer NodeJs

Si ce n'est déjà fait, nous allons installer node.js. La procédure est bien détaillé sur le site officiel

Sous Débian Linux

apt-get install python g++ make
mkdir ~/nodejs && cd $_
wget -N http://nodejs.org/dist/node-latest.tar.gz
tar xzvf node-latest.tar.gz && cd `ls -rd node-v*`
./configure
make install

Afin de pouvoir suivre les versions de node.js et de pouvoir switcher de l'une à l'autre en quelques secondes, j'utilise systématiquement le module "n"

sudo npm -g install n

Son utilisation est très simple, sortant du cadre de ce billet, je vais vous renvoyer vers sa documentation très clair

Problème avec NPM

Vous avec un message d'erreur du genre avec npmlog ou d'autres incompatibilités, mettez à jour NPM

export clean=yes
export skipclean=no
sudo curl https://npmjs.org/install.sh | sh

Nous en avons terminé avec Node.js.

ExpressJs

ExpressJs est LE framework qui ressort du lot, actuellement en version 3.0.0, avec une documentation clair et à jour, il est suivi par plus de 7700 personnes sur Github, bref c'est un projet actif sur lequel l'on peut compter.

Installation

Commençons par installer le framework

sudo npm -g install express

Rien d'autre à dire ... c'est tellement simple ...

Notre Projet

Rappelons le but de l'article, quoi est de montrer la mise en place d'un petit site/projet très simple, avec .. aller soyons fou l'intégration de Jquery et bootstrap pour développer une interface magnifique en quelques minutes, vous aurez ensuite toutes les cartes en mains pour développer votre petit site vitrine de quelques pages.

Pour aller vite, ExpressJs nous met à disposition un outil de scaffolding permettant d'avoir une structure toute faite et fonctionnel ... voyez vous-même

scaffolding

Nous allons créer le projet lindev

cd ~
express express --sessions --css less lindev

Vous devriez voir quelque chose comme ça :

Capture_d_ecran_2012-10-14_a_15.01.06.png

Ok très bien ... regardons de pus prés .. il nous dit d'aller dans le répertoire de notre projet et entrer la commande npm install

cd lindev
npm install

que ce passe t-il ?

Après une série de téléchargements, vous devriez voir un résumé comme ceci :

Capture_d_ecran_2012-10-14_a_15.02.25.png

En fait la commande npm install va lire le fichier package.json et installer ( si ce n'est déjà fait ) les dépendances qui y sont listées, dans la version spécifié .

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.0.0rc4",
    "jade": "*",
    "less-middleware": "*"
  }
}

Nous aurons donc installé uniquement pour le projet courant les dépendances Express en version 3.0.0rc4, jade dans sa dernière version, et less-middleware dans sa dernière version.

Le fait de spécifier une version, empêche les éventuelles mise à jour, même après un npm update seuls jade et less-middleware sont susceptibles d'être mis à jour .

Si vous avez des librairies à ajouter, il vous suffit de modifier votre fichier package.json, d'ajouter le nom et la version de votre lib, puis de lancer la commande npm install

Premier test

Déjà ! bien oui vous avez déjà entre les mains un site fonctionnel.

Depuis la racine de votre projet, lancer la commande suivante

node app.js

Et là ouvrez votre navigateur à l'adresse suivante : http://localhost:3000

Capture_d_ecran_2012-10-14_a_15.15.58.png

app.js

Tout se passe là, nous verrons peut-être dans un prochain article comment mieux structurer notre application ( pour gérer de plus gros projets, gestion des models, de la config, découpage de notre projet en applications à la Django etc .. ), mais pour le moment la structure actuelle est parfaite pour comprendre le fonctionnement du Framework.

Nous avons donc:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

Équivalent dans l'idée au import en python ou include en php permettant de charger des librairies et de les lier à une variable.

  • express : le framework
  • routes : module qui contiendra nos controller
  • user : module qui contiendra les controllers spécifique à user ( démonstration du découpage basique de l'application )
  • http : module gérant les requêtes et réponses
  • path : module gérant les chemins

Puis la dernière crée un nouvel objet express lié à la variable app qui va représenter l'application.

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(require('less-middleware')({ src: __dirname + '/public' }));
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});
  • C'est là qu'est configuré l'application ( le framework ). Traduction:
  • définition du port utilisé
  • définition du chemin ou se trouvent les vues
  • définition du moteur de rendus ( ici jade ) utilisé
  • utilisation du favicon par défaut
  • activation des logs, en mode 'dev' ( infos ici )
  • activation de l'analyse de contenu ( pour les formulaires POST, les cookies etc .. )
  • active l'analyse des "verbes" des requêtes( GET POST PUT DELETE )
  • gestion des cookies
  • gestion des sessions
  • active le routage des requêtes
  • utilisation de Less pour les fichiers css
  • définition de l'emplacement des fichiers statiques

Vous avez remarqué les lignes qui suivent, app.configure('developpement'... qui vous permet d'avoir un environnement différent entre le mode développement et production ( vous pouvez créer autant d'environnement que vous souhaitez ) .

app.get('/', routes.index);
app.get('/users', user.list);

C'est un point important à comprendre, autant ce qu'il y a au dessus, on ne va beaucoup y toucher dans notre exemple, mais ces deux lignes vont être modifier/compléter. L'on peut les comparer aux fichiers urls en Django, dont le but et de déclarer le controller et l'action exécutée pour une url donnée.

Traduction, pour ces deux lignes ci-dessus,

GET http://localhost:3000 , nous allons exécuter le code routes.index() GET http://localhost:3000/users , nous allons exécuter le code user.list()

routes.index

Regardons comment est déclaré notre controller, routes.index.

Pour rappel, la variable routes fait référence au module/répertoire routes/ qui, par défaut tente de charger le fichier index.js. La variable routes fait donc référence au controller défini dans lindev/routes/index.js

Je vous conseille de regarder la doc concernant les modules avec node.js

Le controller index.js:

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

L'action index ( comme toutes les autres actions ), a comme paramètres une variable représentant la requête req, et l'autre le résultat res. Dans notre exemple, l'on ne fait que renvoyer le template/la vue "index" qui se trouve dans le répertoire views (configuré dans app.js ... app.set('views', __dirname + '/views'); et nommée index.jade . jade étant le moteur de templates utilisé dans notre exemple. On lui passe le paramètre title qui sera donc disponible dans notre vue , que voici .

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}

Je ne vais pas détailler la syntaxe de jade, le site officiel le fait très bien.

Voici ce qui se passe dans notre vue index.jade: L'on charge la vue partagée nommée layout.jade ( encore une fois l'extension est retirée ), puis l'on affiche dans le bloc "content", un titre h1 ( paramètre passé à la vue ), et un paragraphe !.

Créer une page

Ok bon bon nous avons survolé les points importants de la structure du framework, nous allons maintenant pouvoir créer notre propre page que l'on va nommer home

Commençons par déclarer l'url, dans le fichier app.js

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/home', site.homePage);

Maintenant l'on va charger le controller lié à la variable site , et exécuter l'action home lorsque l'url sera :

GET http://localhost:3000/home

Toujours dans app.js il faut définir la variable site

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , site = require('./routes/site')
  , http = require('http')
  , path = require('path');

Créons maintenant notre controller site.js

vim routes/site.js

Et voici le contenu ( on va faire simple pour l'exemple :) )

/*
 * GET real home page.
 */

exports.homePage = function(req, res){
  res.render('home', { title: 'My First ExpressPage' });
};

Créons maintenant notre vue

vim views/home.jade

Voici le contenu ( toujours aussi simple pour l'exemple )

extends layout

block content
  h1= title
  p Thanks lindev.fr ;)

Testons :)

node app.js

http://localhost:3000/home

Capture_d_ecran_2012-10-14_a_17.02.31.png

Je pense que vous avez compris le principe ... bref créer une nouvelle page est plutôt simple et rapide ...

Bonus

En bonus, ajoutons à notre projet les librairies Jquery et Bootstrap

Téléchargement

Commençons par Jquery,

cd public/javascripts/
wget http://code.jquery.com/jquery-1.8.2.min.js

Puis Bootstrap, depuis la racine du projet

cd public
wget http://twitter.github.com/bootstrap/assets/bootstrap.zip
unzip bootstrap.zip
rm bootstrap.zip

Et pour inclure toutes ces librairies à notre projet, éditons la vue partagée layout.jade

vim views/layout.jade

Voici son contenu modifié

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')

    link(rel='stylesheet', href='/bootstrap/css/bootstrap.css')
    script(src='/javascripts/jquery-1.8.2.min.js')
    script(src='/bootstrap/js/bootstrap.js')

  body
    block content

Voilà pour ce premier billet sur Node.Js et ExpressJs, il y a encore tant de choses à dire et à vous expliquer mais ... je vous laisse aussi découvrir par vous même.

Bon tests,

Voici un plan de votre application de test pour avoir une vue globale :

lindev/
├── app.js
├── package.json
├── public
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap-responsive.css
│   │   │   ├── bootstrap-responsive.min.css
│   │   │   ├── bootstrap.css
│   │   │   └── bootstrap.min.css
│   │   ├── img
│   │   │   ├── glyphicons-halflings-white.png
│   │   │   └── glyphicons-halflings.png
│   │   └── js
│   │       ├── bootstrap.js
│   │       └── bootstrap.min.js
│   ├── images
│   ├── javascripts
│   │   └── jquery-1.8.2.min.js
│   └── stylesheets
│       ├── style.css
│       └── style.less
├── routes
│   ├── index.js
│   ├── site.js
│   └── user.js
└── views
    ├── home.jade
    ├── index.jade
    └── layout.jade

10 directories, 20 files

Ch.