Skip to main content

Middleware Bootstrap pour ExpressJS

Je suis souvent amené à travailler avec ExpressJS pour créer des applications disposant de hiérarchie plus ou moins complexes. Pour ceux qui ne connaissent pas, ExpressJS (ou Express) est un module pour NodeJS (encore ? et oui !), ou plutôt un framework pour créer des applications Web rapidement. Par application Web, j’entends le sens large du terme : aussi bien des API REST que des interfaces utilisateurs. Je reviendrai sur les API REST dans un avenir proche, car ici, ce sont les interfaces qui nous intéressent.

Pour réaliser les GUI, j’ai pour habitude d’utiliser Bootstrap. Il est simple, rapide d’installation et fournit les bases pour toute interface responsive bien faite. Cependant, je n’ai pas trouvé de façon aisée de combiner Bootstrap et ExpressJS. Sur tous les librairies que j’ai pu croiser, il fallait créer de nombreux chemins statiques pour pouvoir servir au Frontend les différents fichiers dont est composé Bootstrap.

Pour me faciliter la vie – et j’espère également la votre -, j’ai créé un petit middleware sous la forme d’un module NodeJS qui se charge de créer ces routes statiques, basées sur la dernière version de Bootstrap. Il s’agit de express-bootstrap-service. En trois lignes de codes, Bootstrap sera disponibles pour votre interface Frontend. Voici une application d’exemple :

var bootstrapService = require("express-bootstrap-service");
var express = require('express');
var app = express();

app.use(bootstrapService.serve);
app.get('/', function (req, res) {
  res.send('Hello World!');
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

Ce module va créer des routes permettant d’inclure les scripts JavaScript et feuilles de style CSS dans les différents templates.

La documentation complète est disponible sur la petite page dédiée : Bootstrap Middleware for ExpressJS ou bien sur Github.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *