.. note:: Comme vous pouvez le remarquer, la page principale se contente d'effectuer des inclusions qui pointent vers d'autres fichiers ``EJS``. Ce système permet d'avoir des codes récurrents comme la barre de navigation et la balise ``head`` dans un fichier séparé. Ainsi, en modifiant ce fichier, la transformation est appliquée sur **toutes les autres pages**.
Il reste maintenant une dernière étape : nous demandons à ``expressJS`` d'afficher la page ``index.ejs`` lorsqu'on entre l'``URL`` de l'application dans le navigateur :
.. captionup:: ./serveur/routes.js
.. code-block:: javascript
// nous créons une fonction qui contient toutes les routes
// ainsi, nous pouvons la lancer depuis le fichier app.js
exports.f = function(app, dossier) {
// affichage de la page index si on entre localhost/
app.get('/', function(req, res) {
res.render('index.ejs');
});
// envoi des fichiers statiques si l'URL commence par "static"
app.get(/static\/([a-z\.\/_-]+)$/i, function(req, res) {
res.sendFile(dossier + '/static/' + req.params[0]);
});
// affichage d'un message d'erreur pour n'importe quel autre URL
app.get(/.*/, function(req, res) {
res.end('Cette page n\'existe pas');
});
}
Puis nous insérons la fonction que nous venons de créer dans le fichier principal :
.. captionup:: ./app.js
.. code-block:: javascript
routes.f(app, __dirname);
.. tip::
Cette fonction utilise pour l'instant deux paramètres ; la variable ``app`` qui sert au bon fonctionnement d'``expressJS`` et ``__dirname`` qui contient le dossier dans lequel se trouve le fichier ``app.js``. Comme ``res.SendFile`` ne supporte que les chemins absolus et que le dossier ``static`` se trouve au même endroit que ``app.js``, nous pouvons ensuite simplement déterminer l'emplacement du fichier statique qu'``expressJS`` ira chercher avec ``res.SendFile()``.
Tout ceci devrait donner, au final :
.. captionup:: ./app.js
.. code-block:: javascript
var http = require('http');
var path = require('path');
var express = require('express');
// nous faisons appel à expressJS en tapant app.nom_de_la_fonction()
var app = express();
var routes = require('./serveur/routes.js');
// à cet emplacement viennent d'autres fichiers qui seront créés plus tard
// appel de la fonction qui se trouve dans "routes.js"
routes.f(app, __dirname);
var server = http.Server(app);
server.listen(8888);
Résultat
----
Maintenant, ouvrez le terminal (sur ``OSX``) ou ``node.js command prompt`` et exécutez la commande suivante :
.. code-block:: bash
sudo node app.js
Ouvrez un navigateur web et entrez l'adresse http://localhost:8888/.
Si tout fonctionne bien, la page suivante s'affiche :
.. image:: structure_base/3.png
Si vous redimensionnez la fenêtre, un bouton d'affichage s'ajoute dans la barre de navigation les mots "Hello World" apparaissent tout à gauche (la marge est supprimée) :
.. image:: structure_base/4.png
:height: 10000 px
:width: 700 px
:scale: 60 %
Nous avons maintenant la base de la structure des fichiers de l'application que nous allons produire. Gardez bien cette structure et n'hésitez pas à créer de nouveaux fichiers lorsque vous rajoutez des fonctionnalités ; cela évitera d'éventuelles redondances du code et améliorera votre organisation.
.. only:: html
.. tip::
Vous pouvez télécharger ce Hello World en cliquant `ici`_.
.. only:: latex
.. tip::
Vous pouvez télécharger ce Hello World à l'aide de ce lien : http://j.mp/1QVAxDe
.. liens
.. _ici: http://tutoriel-forum.s3-website-eu-west-1.amazonaws.com/hello_world.zip
.. _documentation officielle de bootstrap: http://getbootstrap.com/components/#navbar