Express, il framework Node.js più utilizzato al mondo, consente agli sviluppatori di creare server web backend con JavaScript. Questo framework fornisce la maggior parte di ciò che serve agli sviluppatori di backend, semplificando il routing e la risposta alle richieste web.

Abbiamo già una guida su tutto ciò che c’è da sapere su Express.js, quindi questo articolo pratico vi mostrerà come usarlo. Questo tutorial spiega come creare e distribuire un esempio di applicazione Node.js utilizzando Express.js.

Come creare app velocemente con Express.js

Questo tutorial mostra come creare un’applicazione web che riceve richieste a un endpoint, utilizza un parametro della richiesta per effettuare una chiamata al database e restituisce le informazioni dal database come JSON.

Prerequisiti

Per seguire questo tutorial, è necessario aver installato sul computer i seguenti elementi:

  • Node.js e Node Package Manager (npm) – Ambiente di runtime essenziale e gestore di pacchetti per JavaScript.
  • Git – Sistema di controllo di versione distribuito che facilita lo sviluppo collaborativo del software.

Generatore di applicazioni Express

È possibile aggiungere Express alle applicazioni Node esistenti utilizzando la procedura descritta nella nostra guida Express.js, ma se si parte da zero, c’è un’opzione ancora più veloce: il generatore di applicazioni Express.

Il generatore Express ufficiale di Express.js è un pacchetto Node che permette di generare un nuovo “scheletro” di applicazione. Per farlo, dovremo prima creare una cartella per l’applicazione e poi eseguire il comando npx (disponibile in Node.js 8.2.0):

mkdir express-application
npx express-generator

Se la generazione è andata a buon fine, il terminale visualizza un elenco di cartelle/file creati e i comandi per installare le dipendenze ed eseguire l’applicazione. Installiamo le dipendenze eseguendo il comando:

npm install

Successivamente, avviamo il server web:

DEBUG=myapp:* npm start

L’applicazione scheletro ha un percorso indice precostituito che visualizza una pagina iniziale di base. Possiamo visualizzarla nel browser visitando il sito localhost:3000.

Esplorare l’applicazione scheletro Express

Quando apriamo l’applicazione Express nel nostro editor di codice, troveremo una struttura di base che costituisce l’ossatura dell’applicazione web.

/
|-- /node_modules
|-- /public
|-- /routes
    |-- index.js
    |-- users.js
|-- /views
    |-- error.jade
    |-- index.jade
    |-- layout.jade
|-- app.js
|-- package.json
  • node_modules: questa cartella contiene tutte le dipendenze e le librerie installate per il progetto.
  • public: contiene risorse statiche come CSS, JavaScript, immagini, ecc. Questi file vengono serviti direttamente al browser del cliente.
  • routes: contiene i file responsabili della definizione dei vari percorsi e della gestione delle richieste provenienti da URL diversi.
  • views: contiene i modelli o le viste che il server esegue per creare l’interfaccia utente. In questo caso, error.jade, index.jade e layout.jade sono modelli scritti nel linguaggio di template Jade. Aiutano a strutturare e a rendere il contenuto dinamico agli utenti.
  • app.js: questo file serve in genere come punto di ingresso per l’applicazione Express. È il luogo in cui viene configurato il server, impostato il middleware, definite le route e gestite le richieste e le risposte.
  • package.json: questo file contiene i metadati dell’applicazione. Aiuta a gestire le dipendenze e la configurazione del progetto.

Capire la gestione delle route

Nella tua applicazione Express, la directory routes è il luogo in cui le route sono definite come file separati. La rotta principale, spesso chiamata rotta indice, risiede nel file routes/index.js.

Questa rotta gestisce una richiesta a GET e risponde con una pagina web generata in HTML dal framework. Di seguito è riportato un frammento di codice che illustra come viene gestita una richiesta GET per rendere una pagina di benvenuto di base:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

Se modifichiamo la funzione res.render() in res.send()il tipo di risposta passa da HTML a JSON:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.send({ key: 'value' });
});

module.exports = router;

Per ampliare le funzionalità, viene aggiunta un’altra rotta allo stesso file, introducendo un nuovo endpoint che accetta un parametro. Questo frammento di codice dimostra come l’applicazione possa gestire il traffico su un altro endpoint, estrarre un parametro e rispondere con il suo valore in JSON:

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

L’invio di una richiesta GET a localhost:3000/newEndpoint?someParam=whatever produrrà un output JSON contenente la stringa “whatever”.

Viene effettuata una richiesta GET all'applicazione in esecuzione localmente in Postman
Viene effettuata una richiesta GET all’applicazione in esecuzione localmente in Postman.

Hosting di Applicazioni Express e Kinsta

Fare richieste web dal proprio computer al proprio computer va benissimo, ma lo sviluppo web non può considerarsi completo finché non si è fuori dall’host locale. Fortunatamente, Kinsta rende semplice la distribuzione di applicazioni sul web, anche se si ha bisogno di un database.

Ora vediamo come espandere le capacità dell’applicazione integrando le funzionalità del database e distribuendo sia l’applicazione che il database sul web, consentendo l’accesso da qualsiasi computer.

Prima di distribuire l’applicazione Express sull’Hosting di Applicazioni di Kinsta, è fondamentale inviare il codice e i file dell’applicazione al provider Git scelto (Bitbucket, GitHub o GitLab). Assicuriamoci di creare un file .gitignore nella directory principale dell’applicazione e includiamo node_modules per evitare di eseguire il push questi file al provider Git.

Una volta impostato il repository, seguiamo i passaggi qui per distribuire l’applicazione Express su Kinsta:

  1. Accediamo o creiamo un account per visualizzare la dashboard MyKinsta.
  2. Autorizziamo Kinsta con il provider Git.
  3. Clicchiamo su Applicazioni nella barra laterale di sinistra, quindi su Aggiungi applicazione.
  4. Selezioniamo il repository e il branch da cui desideriamo effettuare il deploy.
  5. Assegniamo un nome unico all’applicazione e scegliamo la posizione del Data Center.
  6. Configuriamo poi l’ambiente di build. Selezioniamo la configurazione della build machine standard con l’opzione Nixpacks consigliata per questa demo.
  7. Usiamo tutte le configurazioni predefinite e poi clicchiamo su Crea applicazione.

Kinsta funziona subito con il generatore di applicazioni Express! Una volta completati questi passaggi, l’applicazione inizierà automaticamente il processo di build e distribuzione.

La schermata di distribuzione fornirà un URL dove Kinsta distribuirà l’applicazione. Possiamo aggiungere /newEndpoint?someParam=whatever per testare l’endpoint creato nella sezione precedente di questo articolo.

Come aggiungere un database all’applicazione Express

Per la maggior parte delle applicazioni di produzione, la presenza di un database è essenziale. Fortunatamente, Kinsta semplifica questo processo fornendo servizi di database completamente gestiti e incredibilmente facili da configurare.

Ecco come creare un database su Kinsta:

  1. Andiamo alla sezione Database nella barra laterale del cruscotto di MyKinsta.
  2. Clicchiamo su Crea un database. Configuriamo i dettagli del database inserendo un nome e selezionando il tipo di database.
  3. Selezioniamo l’opzione PostgreSQL. Il nome utente e la password del database vengono generati automaticamente:

    La fase di configurazione del database MyKinsta per l'aggiunta di un nuovo database
    La fase di configurazione del database MyKinsta prevede l’aggiunta di un nuovo database.

  4. Selezioniamo la stessa posizione del data center in cui abbia ospitato la applicazione Express e configura la dimensione desiderata.
  5. Confermiamo le informazioni di pagamento e clicchiamo su Crea database.

Una volta che il database è stato creato con successo:

  1. Accediamo ai dettagli del database cliccando su di esso. Nella pagina Panoramica, andiamo alla sezione Connessioni interne.
  2. Selezioniamo l’applicazione appropriata.
  3. Selezioniamo l’opzione Aggiungi variabili d’ambiente all’applicazione.
  4. Clicchiamo su Aggiungi connessione per collegare il database appena creato alla tua applicazione.

Successivamente, copiamo la stringa di connessione del database appena creato per collegarlo con uno strumento di database. Qualsiasi strumento di connessione SQL sarà sufficiente, ma in questa dimostrazione utilizziamo Beekeeper. Apriamo l’applicazione e clicchiamo su Importa da URL, incolliamo la stringa di connessione e clicchiamo su Importa. In questo modo potremo eseguire l’SQL sul database ospitato da Kinsta che abbiamo appena creato.

Quindi, creiamo una tabella elementare con una singola voce eseguendo alcune istruzioni SQL sul database ospitato con il nostro strumento di database:

CREATE TABLE "States"
( id integer CONSTRAINT states_pk PRIMARY KEY,
  state_name varchar(100),
  capital varchar(100),
  state_bird varchar(100),
  "createdAt" TIMESTAMPTZ NOT NULL DEFAULT NOW(),
  "updatedAt" TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

INSERT INTO "States"
VALUES(1, 'ohio', 'columbus', 'cardinal');

Aggiungiamo i seguenti pacchetti di database al progetto:

npm install sequelize pg

La dipendenza sequelize è una dipendenza ORM per Node.js e pg serve come client PostgreSQL, consentendo l’interazione tra le applicazioni Node.js e i database PostgreSQL.

Quindi, scriviamo il codice dell’applicazione che accetta una richiesta GET con un parametro id e restituisce le informazioni contenute nel database associato a quel id. Per farlo, modifica il file index.js di conseguenza:

var express = require('express');
var router = express.Router();
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize(process.env.CONNECTION_URI, {
  dialect: 'postgres',
  protocol: 'postgres',
});

const State = sequelize.define('State', {
  // Model attributes are defined here
  state_name: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  capital: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
  state_bird: {
  type: DataTypes.STRING,
  allowNull: true,
  unique: false
  },
}, {
  // Other model options go here
});

async function connectToDB() {
  try {
  sequelize.authenticate().then(async () => {
  // await State.sync({ alter: true });
  })
  console.log('Connection has been established successfully.');
  } catch (error) {
  console.error('Unable to connect to the database:', error);
  }
}
connectToDB();

/* GET a new resource */
router.get('/state', async function(req, res, next) {
  const state = await State.findByPk(req.query.id);
  if (state) {
   res.send(state)
  } else {
   res.status(404).send("state not found");
  }
});


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* GET a new resource */
router.get('/newEndpoint', function(req, res, next) {
  res.send({ yourParam: req.query.someParam });
});

module.exports = router;

Effettuiamo il commit delle modifiche al codice e inviamole al repository Git. Quindi, procediamo al deploy manuale su Kinsta o attendiamo il deploy automatico.

Ora, quando interrogheremo l’endpoint /states con id=1, riceveremo uno stato dal database.

Una richiesta GET all'applicazione completamente funzionante ospitata in MyKinsta
Una richiesta GET all’applicazione completamente funzionante ospitata su MyKinsta.

Questo è tutto! Potete consultare il codice completo del progetto su GitHub.

Riepilogo

Questo articolo ha dimostrato come il framework Express permetta di creare e distribuire un’applicazione Node.js in modo semplice e veloce. Si può creare una nuova applicazione con il generatore Express in pochi semplici passi. Con l’Hosting di Applicazioni, la distribuzione dell’applicazione è semplice e richiede una configurazione minima.

La potenza e la facilità di utilizzo del framework Express per lo sviluppo di applicazioni Node.js sono notevoli. Con Kinsta, potete portare lo slancio che Express e Node.js vi danno nella fase di distribuzione del progetto senza perdere tempo con la configurazione.

Cosa ne pensate del generatore di applicazioni Express? L’avete già utilizzato per sviluppare applicazioni? Non esitate a condividere le vostre esperienze nei commenti qui sotto!

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).