Creare la Tua Prima Applicazione Web con Express.js
Express.js è un framework minimalista per Node.js che semplifica la creazione di applicazioni web e API. È perfetto per chi è nuovo allo sviluppo web o per chi desidera costruire applicazioni scalabili e performanti con facilità. In questa guida, ti guiderò attraverso la creazione della tua prima applicazione web con Express.js, dalle basi della configurazione del progetto alla definizione delle rotte e all’avvio del server.
Prerequisiti
Prima di iniziare, assicurati di avere installato Node.js e npm (Node Package Manager) sul tuo computer. Puoi scaricarli dal sito ufficiale di Node.js.
Passo 1: Configurare il Progetto
1. Creare una Cartella per il Progetto
Inizia creando una cartella per il tuo progetto:
mkdir prima-applicazione-express
cd prima-applicazione-express
2. Inizializzare un Progetto Node.js
All’interno della cartella del progetto, inizializza un nuovo progetto Node.js con npm:
npm init -y
Questo comando crea un file package.json con le impostazioni predefinite del progetto.
3. Installare Express.js
Ora, installa Express.js come dipendenza del progetto:
npm install express --save
Questo comando aggiunge Express.js al tuo progetto e aggiorna il file package.json con la nuova dipendenza.
Passo 2: Creare la Struttura di Base
1. Creare il File Principale dell’Applicazione
Crea un file chiamato app.js nella cartella principale del tuo progetto. Questo file sarà il punto di ingresso della tua applicazione.
touch app.js
2. Configurare il Server Express
Apri app.js in un editor di testo e aggiungi il seguente codice per configurare il tuo server Express:
const express = require("express");
const app = express();
const port = 3000;
// Definisci una rotta per la homepage
app.get("/", (req, res) => {
res.send("Benvenuto nella tua prima applicazione Express!");
});
// Avvia il server
app.listen(port, () => {
console.log(`Server in ascolto su http://localhost:${port}`);
});
3. Avviare il Server
Nel terminale, esegui il comando:
node app.js
Questo avvierà il server e, se apri il tuo browser e vai a http://localhost:3000, dovresti vedere il messaggio “Benvenuto nella tua prima applicazione Express!”.
Passo 3: Aggiungere Altre Rotte
Express.js ti permette di definire diverse rotte per gestire varie richieste all’interno della tua applicazione.
1. Creare una Rotta per una Pagina “About”
Aggiungi una nuova rotta nel file app.js:
app.get("/about", (req, res) => {
res.send("Questa è la pagina About della tua applicazione.");
});
Con questa nuova rotta, se navighi su http://localhost:3000/about, vedrai il messaggio “Questa è la pagina About della tua applicazione.”.
2. Creare una Rotta per una Pagina “Contact”
Aggiungi un’altra rotta per una pagina di contatto:
app.get("/contact", (req, res) => {
res.send("Contattaci all'indirizzo email: info@esempio.com");
});
Ora, se visiti http://localhost:3000/contact, vedrai il messaggio “Contattaci all’indirizzo email: info@esempio.com”.
Passo 4: Gestione delle Risposte HTML
Puoi rendere le tue risposte più dinamiche utilizzando template HTML o semplicemente inviando stringhe HTML come risposte.
1. Inviare una Risposta HTML
Modifica la rotta della homepage per inviare una risposta HTML:
app.get("/", (req, res) => {
res.send(
"<h1>Benvenuto!</h1><p>Questa è la tua prima applicazione Express.</p>"
);
});
2. Usare un Motore di Template (EJS)
Per un’applicazione più avanzata, puoi utilizzare un motore di template come EJS per generare HTML dinamico.
Installare EJS
npm install ejs --save
Configurare EJS in Express
app.set("view engine", "ejs");
Creare un File di Template
Crea una cartella views nella directory principale e al suo interno un file index.ejs con il seguente contenuto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Homepage</title>
</head>
<body>
<h1>Benvenuto nella tua prima applicazione Express!</h1>
<p>Questa pagina è renderizzata utilizzando EJS.</p>
</body>
</html>
Usare il Template nella Rotta
Modifica la rotta della homepage per utilizzare il template EJS:
app.get("/", (req, res) => {
res.render("index");
});
Quando visiti http://localhost:3000, vedrai la pagina renderizzata utilizzando il template EJS.
Passo 5: Gestione degli Errori
È importante gestire correttamente gli errori nelle tue applicazioni.
1. Aggiungere una Rotta per gli Errori 404
Aggiungi una gestione degli errori per le pagine non trovate:
app.use((req, res, next) => {
res.status(404).send("Pagina non trovata");
});
2. Aggiungere un Middleware di Gestione degli Errori
Aggiungi un middleware per gestire errori interni del server:
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).send("Qualcosa è andato storto!");
});
Passo 6: Conclusione
Hai appena creato la tua prima applicazione Express! Hai imparato a configurare un server Express, creare rotte, gestire risposte HTML, usare un motore di template come EJS e gestire gli errori.
Express.js è uno strumento potente e flessibile per costruire applicazioni web e API. Ora che hai creato la tua prima applicazione, puoi esplorare ulteriori funzionalità, come middleware personalizzati, connessioni a database, autenticazione degli utenti, e molto altro ancora. Con pratica e sperimentazione, diventerai rapidamente abile nello sviluppo con Express.js. Buon lavoro!