Template Engines in NodeJS

In questo articolo vedremo come integrare la logica del template engines in un'applicazione multipagina sviluppata con nodejs, in particolare in cui sia utilizzato il framework expressjs.

Esistono numerosi template engines da poter utilizzare con expressjs, ecco la lista completa

expressjs.com/en/resources/template-engines.html

per questo esempio useremo express-handlebars.

Iniziamo quindi ad installare expressjs e express-handlebars, usiamo i seguenti comandi dalla CLI

$ npm install express
$ npm install express-handlebars

installiamo anche bootstrap per creare il layout e i vari componenti html

$ npm install bootstrap

Come si evince dalla documentazione di express-handlebars, dobbiamo creare una struttura di cartelle come questa

index.js
views/
- home.handlebars
- login.handlebars
- layouts/
  - main.handlebars
- partials/
  - footer.handlebars
  - nav.handlebars

nella cartella views salveremo i contenuti delle pagine della nostra applicazione, che nel nostro caso sarà costituita solo da due pagine home e login, la cartella layouts contiene il template dell'applicazione che per convenzione si chiamerà main.handlebars, nella cartella partials salveremo tutti i vari pezzi del template come il footer, la navbar, ect...

Apriamo il file index.js e definiamo le rotte, e un server sulla porta 3000, inoltre aggiungiamo anche bootstrap e handlebars alla nostra applicazione

index.js

const express = require('express');
const hbs = require('express-handlebars');
const port = 3000;
const app = express();

app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));

app.engine('handlebars', hbs.engine());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
  res.render('home');
});

app.get('/login', (req, res) => {
  res.render('login');
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

per la home page (/) verrà renderizzato il file home.handlebars, mentre per la pagina di login (/login) verrà renderizzato login.handlebars.

Definiamo il template della nostra applicazione che, come abbiamo detto si trova nella cartella layouts

main.handlebars

<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Example Handlebars</title>
     <link href="/css/bootstrap.min.css" rel="stylesheet"> 
    <style>
      body{
        margin-top:80px;
      }
    </style>
  </head>
  <body class="d-flex flex-column h-100">
    {{> nav }}
    <main class="flex-shrink-0">
      <div class="container-fluid">
    {{{body}}}
      </div>
    </main>
    {{> footer}}
    <script src="/js/bootstrap.bundle.min.js"></script>      
  </body>
</html>

handlebars si aspetta un segnaposto body ( {{{ body }}} ) dove visualizzare il contenuto della pagina, inoltre abbiamo aggiunto i vari pezzi del template come il footer ( {{> footer }} ) e il menù ( {{> nav }} ).

Ecco il codice sorgente di questa applicazione di esempio su stackblitz, per avviarla lanciare dalla CLI il comando

$ nodemon index.js