Applicare un template EJS alla nostra app Node.js

Quando creiamo una applicazione con Node.js, è spesso necessario trovare un veloce metodo per fornirle un template di interfaccia in grado di far visualizzare all’utente determinate informazioni.

In questo articolo vediamo come sfruttare la potenzialità di EJS all’interno della nostra applicazione Node.js. Creeremo quindi un semplice script che restituirà alcuni dati all’interno di un template EJS.

La struttura del progetto sarà la seguente:

  • views – cartella con la struttura seguente:
    • partials
      • header.ejs
      • head.ejs
      • footer.ejs
    • pages
      • index.ejs
      • about.ejs
  • server.json
  • server.js

SETUP DIPENDENZE

Definiamo creando il file  package.json, i requisiti della nostra applicazione:

{
"name": "node-ejs",
"main": "server.js",
"dependencies": {
"ejs": "^1.0.0",
"express": "^4.6.1"
}
}

Come è possibile vedere faremo uso del framework Node.js chiamato Express e ovviamente di EJS.

Lanciamo quindi dalla directory della nostra applicazione:

npm install

Verranno quindi scaricate le dipendenze necessarie al corretto funzionamento.

SETUP

Creiamo quindi il nostro file principale server.js, il quale dovrà inizializzare le librerie necessarie e creare le regole di routing per ogni richiesta:


// server.js
// load the things we need
var express = require('express');
var app = express();
var portListener = 8080;

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
res.render('pages/index');
});

app.get('/about', function(req, res) {
//define some variable that we will pass to about page
var contacts = [
{ name: 'skype', value: 'michelepierri' },
{ name: 'twitter', value: [email protected]' }
];
var presentation = "Hi, my name is Michele.";

//rendering variables in to the page
res.render('pages/about', {
contacts: contacts,
presentation: presentation
}); app.listen(portListener);
console.log(portListener + ' is the magic port'); 

A questo punto, lanciando la nostra app avremo un server in ascolto sulla porta 8080, in grado di instradare le richieste verso:

  • \indexal contenuto del file in pages/index
  • \about al contenuto del file in pages/about

Occorre quindi creare tali contenuti strutturandoli all’interno della cartella views. Al suo interno creiamo le cartelle:

  • partials che conterrà le sezioni delle pagine;
  • pages che conterrà le pagine

File partials/header.ejs

<!-- views/partials/header.ejs -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Node.js EJS
</a>
</div>
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>

</div>
</nav>

File partials/head.ejs



<meta charset="UTF-8">
<title>NodeJS and EJS</title>
<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
</style></code></pre>
<h4>File partials/footer.ejs</h4>
<pre class="language-javascript"><code class="language-javascript">
<!-- views/partials/footer.ejs -->
<p class="text-center text-muted">© Copyright 2014 The Awesome People</p></code></pre>
<h4>File pages/index.ejs</h4>
<pre class="language-javascript"><code class="language-javascript">
<!-- views/pages/index.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">

<header>
<% include ../partials/header %>
</header>

<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>

<footer>
<% include ../partials/footer %>
</footer>

</body>
</html>

File pages/about.ejs


<!-- views/pages/about.ejs -->

<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">

<header>
<% include ../partials/header %>
</header>

<main>
<div class="row">
<div class="col-sm-8">

<div class="jumbotron">
<h1><%= presentation %></h1>
<p>Contacts:
<ul>
<% contacts.forEach(function(contact) { %>
<li><%= contact.name %> - <%= contact.value%></li>
<% }); %>
</ul>
</p>
</div>

</div>
<div class="col-sm-4">

<div class="well">
<h3>Look I'm A Sidebar!</h3>
</div>

</div>
</div>
</main>

<footer>
<% include ../partials/footer %>
</footer>

</body>
</html>

Avvio dell’applicazione

A questo punto occorrerà lanciare l’applicazione attraverso il comando:

node server.js

Per visualizzare quanto scritto basterà quindi recarci agli indirizzi:

localhost:8080/index

localhost:8080/about

Il template home.ejs applicato da Node.js

Il template about.ejs applicato da Node.js

CONCLUSIONI

EJS rappresenta quindi l’ideale per creare  template non troppo complessi, in grado di far visualizzare i dati ottenuti dalla nostra app Node.js.

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.