Come iniziare con Node.js ed Express

Introduzione

Express è un framework per applicazioni web per Node.js che ti consente di creare API robuste e server web in modo molto più semplice e pulito. È un pacchetto leggero che non oscura le funzionalità principali di Node.js.

In questo articolo, installerai ed utilizzerai Express per creare un server web.

Prerequisiti

Se desideri seguire questo articolo, avrai bisogno di:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Questo tutorial è stato verificato con Node v15.14.0, npm v7.10.0, express v4.17.1 e serve-index v1.9.1.

Passo 1 — Configurazione del Progetto

Prima di tutto, apri la finestra del terminale e crea una nuova directory del progetto:

mkdir express-example

Successivamente, naviga fino alla directory appena creata:

cd express-example

A questo punto, puoi inizializzare un nuovo progetto npm:

npm init -y

Successivamente, sarà necessario installare il pacchetto express:

npm install express@4.17.1

A questo punto, hai un nuovo progetto pronto per utilizzare Express.

Passo 2 — Creazione di un Server Express

Ora che Express è installato, crea un nuovo file server.js e aprilo con il tuo editor di codice. Quindi, aggiungi le seguenti linee di codice:

const express = require('express');

const app = express();

La prima riga qui sta recuperando il modulo principale di Express dal pacchetto che hai installato. Questo modulo è una funzione, che poi eseguiamo nella seconda riga per creare la nostra variabile app. Puoi creare più app in questo modo, ognuna con le proprie richieste e risposte.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

Queste righe di codice sono dove diciamo al nostro server Express come gestire una richiesta GET al nostro server. Express include funzioni simili per POST, PUT, ecc., utilizzando app.post(...), app.put(...), ecc.

Queste funzioni prendono due parametri principali. Il primo è l’URL su cui questa funzione deve agire. In questo caso, stiamo mirando a '/', che è la radice del nostro sito web: in questo caso, localhost:3000.

Il secondo parametro è una funzione con due argomenti: req e res. req rappresenta la richiesta inviata al server; possiamo usare questo oggetto per leggere i dati su ciò che il client sta richiedendo di fare. res rappresenta la risposta che invieremo al client.

Qui, stiamo chiamando una funzione su res per inviare indietro una risposta: 'Risposta riuscita.'.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Finalmente, una volta configurate le nostre richieste, dobbiamo avviare il nostro server! Stiamo passando 3000 nella funzione listen, che indica all’applicazione su quale porta ascoltare. La funzione passata come secondo parametro è opzionale e viene eseguita all’avvio del server. Questo ci fornisce un feedback nella console per sapere che la nostra applicazione è in esecuzione.

Ritorna alla finestra del terminale e avvia la tua applicazione:

node server.js

Successivamente, visita localhost:3000 nel tuo browser web. La finestra del tuo browser visualizzerà: 'Risposta riuscita'. La finestra del terminale visualizzerà: 'L'applicazione di esempio è in ascolto sulla porta 3000.'.

Ecco fatto, abbiamo un server web! Tuttavia, vogliamo sicuramente inviare più di una singola riga di testo al client. Vediamo brevemente cos’è un middleware e come configurare questo server come un server di file statici!

Passaggio 3 — Utilizzo del Middleware

Con Express, possiamo scrivere e utilizzare funzioni middleware, che hanno accesso a tutte le richieste HTTP inviate al server. Queste funzioni possono:

• Eseguire qualsiasi codice.
• Apportare modifiche agli oggetti di richiesta e risposta.
• Concludere il ciclo richiesta-risposta.
• Chiamare la prossima funzione middleware nello stack.

Possiamo scrivere le nostre funzioni middleware oppure utilizzare middleware di terze parti importandoli allo stesso modo in cui importeremmo qualsiasi altro pacchetto.

Iniziamo scrivendo il nostro middleware, poi proveremo a utilizzare alcuni middleware esistenti per servire file statici.

Per definire una funzione middleware, chiamiamo app.use() e passiamo una funzione. Ecco una funzione middleware di base per stampare l’ora attuale nella console durante ogni richiesta:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

La chiamata a next() indica al middleware di passare alla successiva funzione middleware se presente. È importante includerla alla fine della nostra funzione, altrimenti la richiesta rimarrà bloccata su questo middleware.

Possiamo opzionalmente passare un percorso al middleware, che gestirà solo le richieste per quella rotta. Ad esempio:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Passando '/request-type' come primo argomento a app.use(), questa funzione verrà eseguita solo per le richieste inviate a localhost:3000/request-type.

Rivedi la finestra del terminale e avvia la tua applicazione:

node server.js

Successivamente, visita localhost:3000/request-type nel tuo browser. La finestra del terminale mostrerà l’orario della richiesta e 'Tipo di richiesta: GET'.

Ora, proviamo a utilizzare un middleware esistente per servire file statici. Express dispone di una funzione middleware integrata: express.static. Utilizzeremo anche una funzione middleware di terze parti, serve-index, per visualizzare un elenco degli indici dei nostri file.

Prima, nella stessa cartella in cui si trova il server express, crea una directory chiamata public e inserisci alcuni file al suo interno.

Quindi, installa il pacchetto serve-index:

npm install serve-index@1.9.1

Innanzitutto, importa il pacchetto serve-index nella parte superiore del file del server.

Successivamente, includi i middleware express.static e serveIndex e indica loro il percorso da accedere e il nome della directory:

const express = require('express');
const serveIndex = require('serve-index');

const app = express();

app.use((req, res, next) => {
  console.log('Time: ', Date.now());
  next();
});

app.use('/request-type', (req, res, next) => {
  console.log('Request type: ', req.method);
  next();
});

app.use('/public', express.static('public'));
app.use('/public', serveIndex('public'));

app.get('/', (req, res) => {
  res.send('Successful response.');
});

app.listen(3000, () => console.log('Example app is listening on port 3000.'));

Ora, riavvia il tuo server e vai su localhost:3000/public. Ti verrà presentato un elenco di tutti i tuoi file!

Conclusione

In questo articolo, hai installato e utilizzato Express per creare un server web. Hai anche utilizzato funzioni middleware integrate e di terze parti.

Continua il tuo apprendimento con Come utilizzare l’oggetto req in Express, Come utilizzare l’oggetto res in Express e Come definire percorsi e metodi di richiesta HTTP in Express.