NodeJS: Twitter Bootstrap alerts in ExpressJS einbinden mit express-messages-bootstrap

Momentan experimentiere ich mit NodeJS herum und teste dabei wie man am schnellsten eine schöne Seite produziert. Ich bin dabei auf Twitter Bootstrap gestoßen, was eine Kombination von CSS-Eigenschaften und Javascripts darstellt, welche es erlauben schnell ein Layout zu erstellen. Zudem bietet dieses Framework auch vorgefertigte Alerts, die dem User Nachrichten deutlich anzeigen können:

Twitter Bootstrap alerts in ExpressJS

Gerne wollte ich dies nun in dem MVC-Framework ExpressJS verwenden, sodass ich daraus direkt die Alerts erstellen kann. Hierzu habe ich express-messages-bootstrap (NPM: express-messages-bootstrap) entdeckt. Seit gestern kann dieses auch mit Twitter bootstrap 2.0 umgehen, welches vor kurzem released wurde. Mit einem pull request von mir habe ich zudem angeregt, mehrere flash messages voneinander sauber zu trennen (siehe oben). Mal sehen ob dieser angenommen wird.

Wenn man das nun verwenden will, so muss man es zunächst per npm installieren:

npm install express-messages

Und anschließend in der Express-Configuration einbinden:

app.dynamicHelpers({ messages: require('express-messages-bootstrap') });

Nun muss man es noch im Template einbinden:

EJS:

<%- messages() %>

Jade:

!= messages()

Alerts erstellt man im Controller wie folgt:

req.flash('error', 'Dies ist ein Test mit Typ error');
req.flash('info', 'Dies ist ein Test mit Typ info');
req.flash('warning', 'Dies ist ein Test mit Typ warning');
req.flash('success', 'Dies ist ein Test mit Typ success');

Das wars 🙂