035.2 Μάθημα 2

Πιστοποιητικό:

Web Development Essentials

Έκδοση:

1.0

Θέμα:

035 Προγραμματισμός NodeJS Server

Σκοπός:

035.2 Βασικά Στοιχεία NodeJS Express

Μάθημα:

2 απο 2

Εισαγωγή

Οι web servers διαθέτουν πολύ ευέλικτους μηχανισμούς για να παράγουν responses σε client requests. Για ορισμένα requests, αρκεί ο web server να παρέχει ένα στατικό, μη επεξεργασμένο reponse, επειδή το ζητούμενο resource είναι το ίδιο για οποιονδήποτε client. Για παράδειγμα, όταν ένας client ζητά μια εικόνα που είναι προσβάσιμη σε όλους, αρκεί ο server να στείλει το αρχείο που περιέχει την εικόνα.

Αλλά όταν τα responses δημιουργούνται δυναμικά, μπορεί να χρειαστεί να είναι καλύτερα δομημένα από απλές γραμμές που είναι γραμμένες στο script του server. Σε τέτοιες περιπτώσεις, είναι βολικό για τον web server να μπορεί να δημιουργήσει ένα πλήρες έγγραφο, το οποίο μπορεί να ερμηνευτεί και να αποδοθεί από τον client. Στο πλαίσιο της ανάπτυξης web εφαρμογών, τα έγγραφα HTML δημιουργούνται συνήθως ως πρότυπα [templates] και διατηρούνται χωριστά από το script του server, το οποίο εισάγει δυναμικά δεδομένα σε προκαθορισμένες θέσεις στο κατάλληλο πρότυπο και στη συνέχεια στέλνει τo μορφοποιημένo response στον client.

Οι web εφαρμογές συχνά καταναλώνουν τόσο στατικούς όσο και δυναμικούς πόρους. Ένα έγγραφο HTML, ακόμα κι αν δημιουργήθηκε δυναμικά, μπορεί να έχει αναφορές σε στατικούς πόρους, όπως αρχεία CSS και εικόνες. Για να δείξουμε πώς το Express βοηθά στη διαχείριση αυτού του είδους της ζήτησης, θα δημιουργήσουμε πρώτα έναν server παράδειγμα που παρέχει στατικά αρχεία και, στη συνέχεια, θα εφαρμόσουμε routes που δημιουργούν δομημένα, βασισμένα σε πρότυπα responses.

Στατικά Αρχεία

Το πρώτο βήμα είναι να δημιουργήσετε το αρχείο JavaScript που θα τρέχει ως server. Ας ακολουθήσουμε το ίδιο μοτίβο που καλύφθηκε στα προηγούμενα μαθήματα για να δημιουργήσουμε μια απλή εφαρμογή Express: πρώτα δημιουργήστε έναν φάκελο που ονομάζεται server και στη συνέχεια εγκαταστήστε τα βασικά στοιχεία με την εντολή npm:

$ mkdir server
$ cd server/
$ npm init
$ npm install express

Για το σημείο εισόδου, μπορεί να χρησιμοποιηθεί οποιοδήποτε όνομα αρχείου, αλλά εδώ θα χρησιμοποιήσουμε το προεπιλεγμένο όνομα αρχείου: index.js. Η ακόλουθη παράθεση εμφανίζει ένα βασικό αρχείο index.js που θα χρησιμοποιηθεί ως σημείο εκκίνησης για τον server μας:

const express = require('express')
const app = express()
const host = "myserver"
const port = 8080

app.listen(port, host, () => {
  console.log(`Server ready at http://${host}:${port}`)
})

Δεν χρειάζεται να γράψετε κώδικα για να στείλετε ένα στατικό αρχείο. Το Express διαθέτει middleware για αυτόν τον σκοπό, που ονομάζεται express.static. Εάν ο server σας χρειάζεται να στείλει στατικά αρχεία στον client, απλώς φορτώστε το middleware express.static στην αρχή του script:

app.use(express.static('public'))

Η παράμετρος public υποδεικνύει τον φάκελο που αποθηκεύει τα αρχεία που μπορεί να ζητήσει ο client. Τα paths που ζητούνται από τους clients δεν πρέπει να περιλαμβάνουν τον φάκελο public, αλλά μόνο το όνομα αρχείου ή το path προς το αρχείο σε σχέση με τον φάκελο public. Για να ζητήσει το αρχείο public/layout.css, για παράδειγμα, ο client κάνει ένα request στο /layout.css.

Μορφοποιημένη Έξοδος

Ενώ η αποστολή στατικού περιεχομένου είναι απλή, το περιεχόμενο που δημιουργείται δυναμικά μπορεί να διαφέρει πολύ. Η δημιουργία δυναμικών responses με σύντομα μηνύματα διευκολύνει τη δοκιμή εφαρμογών στα αρχικά στάδια ανάπτυξής τους. Για παράδειγμα, το παρακάτω είναι ένα δοκιμαστικό route που απλώς στέλνει πίσω στον client ένα μήνυμα που έστειλε με τη μέθοδο HTTP POST. Το response μπορεί απλώς να αναπαράγει το περιεχόμενο του μηνύματος σε απλό κείμενο, χωρίς καμία μορφοποίηση:

app.post('/echo', (req, res) => {
  res.send(req.body.message)
})

Ένα route όπως αυτό είναι ένα καλό παράδειγμα για χρήση κατά την εκμάθηση του Express και για διαγνωστικούς σκοπούς, όπου αρκεί ένα ανεπεξέργαστο response που αποστέλλεται με res.send(). Αλλά ένας χρήσιμος server πρέπει να μπορεί να παράγει πιο σύνθετα responses. Θα προχωρήσουμε τώρα στην ανάπτυξη αυτού του πιο εξελιγμένου τύπου route.

Η νέα μας εφαρμογή, αντί να στέλνει απλώς πίσω τα περιεχόμενα του τρέχοντος request, διατηρεί μια πλήρη λίστα με τα μηνύματα που έχουν σταλεί σε προηγούμενα requests από κάθε client και στέλνει πίσω τη λίστα κάθε client όταν του ζητηθεί. Ένα response που συγχωνεύει όλα τα μηνύματα είναι μια επιλογή, αλλά άλλοι μορφοποιημένοι τρόποι εξόδου είναι πιο κατάλληλοι, ειδικά καθώς τα responses γίνονται πιο περίπλοκα.

Για να λαμβάνουμε και να αποθηκεύουμε μηνύματα του client που αποστέλλονται κατά τη διάρκεια του τρέχοντος session, πρέπει πρώτα να συμπεριλάβουμε επιπλέον modules για το χειρισμό των cookies και των δεδομένων που αποστέλλονται μέσω της μεθόδου HTTP POST. Ο μόνος σκοπός του ακόλουθου παραδείγματος server είναι να κάνει log μηνύματα που αποστέλλονται μέσω POST και να εμφανίζει μηνύματα που έχουν σταλεί προηγουμένως όταν ο client στέλνει ένα GET request. Υπάρχουν λοιπόν δύο routes για το path /. Το πρώτο route εκπληρώνει requests που έγιναν με τη μέθοδο HTTP POST και η δεύτερη ικανοποιεί requests που έγιναν με τη μέθοδο HTTP GET:

const express = require('express')
const app = express()
const host = "myserver"
const port = 8080

app.use(express.static('public'))

const cookieParser = require('cookie-parser')
app.use(cookieParser())

const { v4: uuidv4 } = require('uuid')

app.use(express.urlencoded({ extended: true }))

// Array to store messages
let messages = []

app.post('/', (req, res) => {

  // Only JSON enabled requests
  if ( req.headers.accept != "application/json" )
  {
    res.sendStatus(404)
    return
  }

  // Locate cookie in the request
  let uuid = req.cookies.uuid

  // If there is no uuid cookie, create a new one
  if ( uuid === undefined )
    uuid = uuidv4()

  // Add message first in the messages array
  messages.unshift({uuid: uuid, message: req.body.message})

  // Collect all previous messages for uuid
  let user_entries = []
  messages.forEach( (entry) => {
    if ( entry.uuid == req.cookies.uuid )
      user_entries.push(entry.message)
  })

  // Update cookie expiration date
  let expires = new Date(Date.now());
  expires.setDate(expires.getDate() + 30);
  res.cookie('uuid', uuid, { expires: expires })

  // Send back JSON response
  res.json(user_entries)

})

app.get('/', (req, res) => {

  // Only JSON enabled requests
  if ( req.headers.accept != "application/json" )
  {
    res.sendStatus(404)
    return
  }

  // Locate cookie in the request
  let uuid = req.cookies.uuid

  // Client's own messages
  let user_entries = []

  // If there is no uuid cookie, create a new one
  if ( uuid === undefined ){
    uuid = uuidv4()
  }
  else {
    // Collect messages for uuid
    messages.forEach( (entry) => {
      if ( entry.uuid == req.cookies.uuid )
        user_entries.push(entry.message)
    })
  }

  // Update cookie expiration date
  let expires = new Date(Date.now());
  expires.setDate(expires.getDate() + 30);
  res.cookie('uuid', uuid, { expires: expires })

  // Send back JSON response
  res.json(user_entries)

})

app.listen(port, host, () => {
  console.log(`Server ready at http://${host}:${port}`)
})

Διατηρήσαμε τη ρύθμιση στατικών αρχείων στην κορυφή, γιατί σύντομα θα είναι χρήσιμο να παρέχουμε στατικά αρχεία όπως το layout.css. Εκτός από το middleware cookie-parser που παρουσιάστηκε στο προηγούμενο κεφάλαιο, το παράδειγμα περιλαμβάνει επίσης το middleware uuid για τη δημιουργία ενός μοναδικού αριθμού αναγνώρισης που διαβιβάζεται ως cookie σε κάθε client που στέλνει ένα μήνυμα. Εάν δεν είναι ήδη εγκατεστημένα στον φάκελο του server του παραδείγματος, αυτά τα modules μπορούν να εγκατασταθούν με την εντολή npm install cookie-parser uuid.

Το global array που ονομάζεται messages αποθηκεύει τα μηνύματα που αποστέλλονται από όλους τους clients. Κάθε στοιχείο σε αυτό το array αποτελείται από ένα object με τις ιδιότητες uuid και message.

Αυτό που είναι πραγματικά νέο σε αυτό το script είναι η μέθοδος res.json(), που χρησιμοποιείται στο τέλος των δύο routes για τη δημιουργία ενός response σε μορφή JSON με το array να περιέχει τα μηνύματα που έχουν ήδη αποσταλεί από τον client:

// Send back JSON response
res.json(user_entries)

Το JSON είναι μια μορφή απλού κειμένου που σας επιτρέπει να ομαδοποιήσετε ένα σύνολο δεδομένων σε μια ενιαία δομή που είναι συσχετιστική: δηλαδή, το περιεχόμενο εκφράζεται ως κλειδιά και τιμές. Το JSON είναι ιδιαίτερα χρήσιμο όταν τα responses πρόκειται να υποβληθούν σε επεξεργασία από τον client. Χρησιμοποιώντας αυτήν τη μορφή, ένα JavaScript object ή ένα JavaScript array μπορεί εύκολα να ανακατασκευαστεί στην πλευρά του client με όλες τις ιδιότητες και τους δείκτες του αρχικού object στον server.

Επειδή δομούμε κάθε μήνυμα σε JSON, απορρίπτουμε requests που δεν περιέχουν application/json στο "accept" header τους:

// Only JSON enabled requests
if ( req.headers.accept != "application/json" )
{
  res.sendStatus(404)
  return
}

Ένα request που υποβάλλεται με μια απλή εντολή curl για εισαγωγή νέου μηνύματος δεν θα γίνει αποδεκτό, επειδή το curl από προεπιλογή δεν προσδιορίζει application/json στο accept header:

$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b cookies.txt
Not Found

Η επιλογή -H "accept: application/json" αλλάζει το request header για να καθορίσει τη μορφή του response, η οποία αυτή τη φορά θα γίνει αποδεκτή και θα απαντηθεί στην καθορισμένη μορφή:

$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b cookies.txt -H "accept: application/json"
["My first message"]

Η λήψη μηνυμάτων χρησιμοποιώντας το άλλο route γίνεται με παρόμοιο τρόπο, αλλά αυτή τη φορά χρησιμοποιώντας τη μέθοδο HTTP GET:

$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -H "accept: application/json"
["Another message","My first message"]

Πρότυπα

Τα response σε μορφές όπως το JSON είναι βολικά για την επικοινωνία μεταξύ προγραμμάτων, αλλά ο κύριος σκοπός των περισσότερων servers web εφαρμογών είναι η παραγωγή περιεχομένου HTML για ανθρώπινη κατανάλωση. Η ενσωμάτωση κώδικα HTML σε κώδικα JavaScript δεν είναι καλή ιδέα, επειδή η ανάμειξη γλωσσών στο ίδιο αρχείο κάνει το πρόγραμμα πιο επιρρεπές σε σφάλματα και βλάπτει τη συντήρηση του κώδικα.

Το Express μπορεί να λειτουργήσει με διαφορετικά template engines [μηχανές προτύπων] που διαχωρίζουν το HTML για δυναμικό περιεχόμενο· μπορείτε να βρείτε την πλήρη λίστα στη διεύθυνση Express template engines site. Μία από τις πιο δημοφιλείς μηχανές προτύπων είναι η Embedded JavaScript (EJS), η οποία σας επιτρέπει να δημιουργείτε αρχεία HTML με συγκεκριμένα tags για εισαγωγή δυναμικού περιεχομένου.

Όπως και άλλα στοιχεία Express, το EJS πρέπει να εγκατασταθεί στον φάκελο όπου εκτελείται ο server:

$ npm install ejs

Στη συνέχεια, η μηχανή EJS πρέπει να οριστεί ως η προεπιλεγμένη μηχανή απόδοσης στο script του server (κοντά στην αρχή του αρχείου index.js, πριν από τους ορισμούς route):

app.set('view engine', 'ejs')

Το response που δημιουργείται με το πρότυπο αποστέλλεται στον client με το function res.render(), το οποίο λαμβάνει ως παραμέτρους το όνομα αρχείου του προτύπου και ένα object που περιέχει τιμές που θα είναι προσβάσιμες μέσα από το πρότυπο. Τα routes που χρησιμοποιήθηκαν στο προηγούμενο παράδειγμα μπορούν να ξαναγραφτούν για να δημιουργήσουν HTML responses καθώς και JSON:

app.post('/', (req, res) => {

  let uuid = req.cookies.uuid

  if ( uuid === undefined )
    uuid = uuidv4()

  messages.unshift({uuid: uuid, message: req.body.message})

  let user_entries = []
  messages.forEach( (entry) => {
    if ( entry.uuid == req.cookies.uuid )
      user_entries.push(entry.message)
  })

  let expires = new Date(Date.now());
  expires.setDate(expires.getDate() + 30);
  res.cookie('uuid', uuid, { expires: expires })

  if ( req.headers.accept == "application/json" )
    res.json(user_entries)
  else
    res.render('index', {title: "My messages", messages: user_entries})

})

app.get('/', (req, res) => {

  let uuid = req.cookies.uuid

  let user_entries = []

  if ( uuid === undefined ){
    uuid = uuidv4()
  }
  else {
    messages.forEach( (entry) => {
      if ( entry.uuid == req.cookies.uuid )
        user_entries.push(entry.message)
    })
  }

  let expires = new Date(Date.now());
  expires.setDate(expires.getDate() + 30);
  res.cookie('uuid', uuid, { expires: expires })

  if ( req.headers.accept == "application/json" )
    res.json(user_entries)
  else
    res.render('index', {title: "My messages", messages: user_entries})

})

Σημειώστε ότι η μορφή του response εξαρτάται από το accept header που βρίσκεται στο request:

if ( req.headers.accept == "application/json" )
  res.json(user_entries)
else
  res.render('index', {title: "My messages", messages: user_entries})

Ένα response σε μορφή JSON αποστέλλεται μόνο εάν το ζητήσει ρητά ο πελάτης. Διαφορετικά, το response δημιουργείται από το πρότυπο index. Το ίδιο array user_entries τροφοδοτεί τόσο την JSON έξοδο όσο και το πρότυπο, αλλά το object που χρησιμοποιείται ως παράμετρος για το τελευταίο έχει επίσης την ιδιότητα title: "My messages", η οποία θα χρησιμοποιηθεί ως τίτλος μέσα στο πρότυπο.

Πρότυπα HTML

Όπως τα στατικά αρχεία, τα αρχεία που περιέχουν πρότυπα HTML βρίσκονται στον δικό τους φάκελο. Από προεπιλογή, το EJS υποθέτει ότι τα αρχεία προτύπων βρίσκονται στον φάκελο views/. Στο παράδειγμα, χρησιμοποιήθηκε ένα πρότυπο με το όνομα index, οπότε το EJS αναζητά το αρχείο views/index.ejs. Η ακόλουθη παράθεση είναι το περιεχόμενο ενός απλού προτύπου views/index.ejs που μπορεί να χρησιμοποιηθεί με το παράδειγμα κώδικα:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title><%= title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/layout.css">
</head>
<body>

<div id="interface">

<form action="/" method="post">
<p>
  <input type="text" name="message">
  <input type="submit" value="Submit">
</p>
</form>

<ul>
<% messages.forEach( (message) => { %>
<li><%= message %></li>
<% }) %>
</ul>

</div>

</body>
</html>

Το πρώτο ειδικό EJS tag είναι το element <title> στην ενότητα <head>:

<%= title %>

Κατά τη διαδικασία απόδοσης, αυτό το ειδικό tag θα αντικατασταθεί από την τιμή της ιδιότητας title του object που μεταβιβάζεται ως παράμετρος στο function res.render().

Το μεγαλύτερο μέρος του προτύπου αποτελείται από συμβατικό κώδικα HTML, επομένως το πρότυπο περιέχει τη φόρμα HTML για την αποστολή νέων μηνυμάτων. Ο δοκιμαστικός server ανταποκρίνεται στις μεθόδους HTTP GET και POST για το ίδιο route /, εξ ου και τα χαρακτηριστικά action="/" και method="post" στο tag φόρμας.

Άλλα μέρη του προτύπου είναι ένας συνδυασμός κώδικα HTML και EJS tags. Το EJS έχει tags για συγκεκριμένους σκοπούς εντός του προτύπου:

<% … %>: Εισάγει έλεγχο ροής [flow control]. Δεν εισάγεται περιεχόμενο απευθείας από αυτό το tag, αλλά μπορεί να χρησιμοποιηθεί με δομές JavaScript για την επιλογή, την επανάληψη ή την απόκρυψη ενοτήτων HTML. Παράδειγμα έναρξης ενός loop: <% messages.forEach( (message) => { %>
<%# … %>: Ορίζει ένα σχόλιο, το περιεχόμενο του οποίου αγνοείται από τον αναλυτή [parser]. Σε αντίθεση με τα σχόλια που είναι γραμμένα σε HTML, αυτά τα σχόλια δεν είναι ορατά στον client.
<%= … %>: Εισάγει το περιεχόμενο της μεταβλητής με διαφυγή. Είναι σημαντικό να αποφύγετε άγνωστο περιεχόμενο για να αποφύγετε την εκτέλεση κώδικα JavaScript, η οποία μπορεί να ανοίξει παραθυράκια για cross-site Scripting (XSS) επιθέσεις. Παράδειγμα: <%= title %>
<%- … %>: Εισάγει το περιεχόμενο της μεταβλητής χωρίς διαφυγή.

Ο συνδυασμός κώδικα HTML και EJS tags είναι εμφανής στο απόσπασμα όπου τα μηνύματα του client αποδίδονται ως λίστα HTML:

<ul>
<% messages.forEach( (message) => { %>
<li><%= message %></li>
<% }) %>
</ul>

Σε αυτό το απόσπασμα, το πρώτο tag <% … %> ξεκινά ένα forEach statement που κάνει loops σε όλα τα στοιχεία του array message. Οι οριοθέτες <% και %> σάς επιτρέπουν να ελέγχετε τα αποσπάσματα του HTML. Ένα νέο στοιχείο λίστας HTML, <li><%= message %></li>, θα δημιουργηθεί για κάθε στοιχείο των messages. Με αυτές τις αλλαγές, ο server θα στείλει την response σε HTML όταν ληφθεί ένα request όπως το ακόλουθο:

$ curl http://myserver:8080/ --data message="This time" -c cookies.txt -b cookies.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My messages</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/layout.css">
</head>
<body>

<div id="interface">

<form action="/" method="post">
<p>
  <input type="text" name="message">
  <input type="submit" value="Submit">
</p>
</form>

<ul>

<li>This time</li>

<li>in HTML</li>

</ul>

</div>

</body>
</html>

Ο διαχωρισμός μεταξύ του κώδικα για την επεξεργασία των requests και του κώδικα για την παρουσίαση του response καθιστά τον κώδικα καθαρότερο και επιτρέπει σε μια ομάδα να μοιράζει την ανάπτυξη εφαρμογών μεταξύ ατόμων με διαφορετικές ειδικότητες. Ένας web designer, για παράδειγμα, μπορεί να εστιάσει στα αρχεία προτύπων στο views/ και σε σχετικά stylesheets, τα οποία παρέχονται ως στατικά αρχεία που είναι αποθηκευμένα στον φάκελο public/ στον server του παραδείγματος.

Καθοδηγούμενες Ασκήσεις

Πώς πρέπει να ρυθμιστεί το express.static ώστε οι clients να μπορούν να ζητούν αρχεία απο τον φάκελο assets;
Πώς μπορεί να αναγνωριστεί ο τύπος του response, ο οποίος καθορίζεται στο header του request, σε ένα Express route;
Ποια μέθοδος της παραμέτρου route res (response) δημιουργεί ένα response σε μορφή JSON από ένα JavaScript array που ονομάζεται content;

Ασκήσεις Εξερεύνησης

Από προεπιλογή, τα αρχεία προτύπων Express βρίσκονται στον φάκελο views. Πώς μπορεί να τροποποιηθεί αυτή η ρύθμιση, ώστε τα αρχεία προτύπων να αποθηκεύονται στο φάκελο templates;
Ας υποθέσουμε ότι ένας client λαμβάνει ένα HTML response χωρίς τίτλο (π.χ. <title></title>). Μετά την επαλήθευση του προτύπου EJS, ο προγραμματιστής βρίσκει το tag <title><% title %></title> στην ενότητα head του αρχείου. Ποια είναι η πιθανή αιτία του προβλήματος;
Χρησιμοποιήστε tags προτύπου EJS για να γράψετε ένα HTML <h2></h2> tag με τα περιεχόμενα της μεταβλητής JavaScript h2. Αυτό το tag θα πρέπει να αποδίδεται μόνο εάν η μεταβλητή h2 δεν είναι κενή.

Σύνοψη

Αυτό το μάθημα καλύπτει τις βασικές μεθόδους που παρέχει το Express.js για τη δημιουργία στατικών και διαμορφωμένων αλλά δυναμικών responses. Απαιτείται λίγη προσπάθεια για τη ρύθμιση ενός HTTP server για στατικά αρχεία και το σύστημα προτύπων EJS παρέχει έναν εύκολο τρόπο για τη δημιουργία δυναμικού περιεχομένου από αρχεία HTML. Αυτό το μάθημα περιλαμβάνει τις ακόλουθες έννοιες και διαδικασίες:

Χρήση του express.static για responses στατικών αρχείων.
Πώς να δημιουργήσετε ένα response που να ταιριάζει με το πεδίο τύπου περιεχομένου στο request header.
Responses δομημένες με JSON.
Χρήση EJS tags σε πρότυπα που βασίζονται σε HTML.

Απαντήσεις στις Καθοδηγούμενες Ασκήσεις

Πώς πρέπει να ρυθμιστεί το express.static ώστε οι clients να μπορούν να ζητούν αρχεία απο τον φάκελο assets;

Θα πρέπει να προστεθεί μια κλήση στο app.use(express.static('assets')), στο script του server.
Πώς μπορεί να αναγνωριστεί ο τύπος του response, ο οποίος καθορίζεται στο header του request, σε ένα Express route;

Ο client ορίζει αποδεκτούς τύπους στο πεδίο accept του header, το οποίο αντιστοιχίζεται στην ιδιότητα req.headers.accept.
Ποια μέθοδος του route parameter res (response) δημιουργεί ένα response σε μορφή JSON από ένα JavaScript array που ονομάζεται content;

Η μέθοδος res.json(): res.json(content).

Απαντήσεις στις Ασκήσεις Εξερεύνησης

Από προεπιλογή, τα αρχεία προτύπων Express βρίσκονται στον φάκελο views. Πώς μπορεί να τροποποιηθεί αυτή η ρύθμιση, ώστε τα αρχεία προτύπων να αποθηκεύονται στο φάκελο templates;

Ο φάκελος μπορεί να οριστεί στις αρχικές ρυθμίσεις του script με app.set('views', './templates').
Ας υποθέσουμε ότι ένας client λαμβάνει ένα HTML response χωρίς τίτλο (π.χ. <title></title>). Μετά την επαλήθευση του προτύπου EJS, ο προγραμματιστής βρίσκει το tag <title><% title %></title> στην ενότητα head του αρχείου. Ποια είναι η πιθανή αιτία του προβλήματος;

Το tag <%= %> θα πρέπει να χρησιμοποιείται για να περικλείει τα περιεχόμενα μιας μεταβλητής, όπως στο `<%= title %>.
Χρησιμοποιήστε tags προτύπου EJS για να γράψετε ένα HTML <h2></h2> tag με τα περιεχόμενα της μεταβλητής JavaScript h2. Αυτό το tag θα πρέπει να αποδίδεται μόνο εάν η μεταβλητή h2 δεν είναι κενή.
```
<% if ( h2 != "" ) { %>
<h2><%= h2 %></h2>
<% } %>
```