Esercitazione: Creare un progetto Node.js e un'app Express in Visual Studio

  • Articolo

Questo articolo illustra come usare Visual Studio per creare una semplice app Web Node.js che usa il framework Express.

Prima di iniziare, ecco una rapida domande frequenti per presentare alcuni concetti chiave:

  • Che cos'è Node.js?

    Node.js è un ambiente di runtime JavaScript lato server che esegue il codice JavaScript.

  • Che cos'è npm?

    Una gestione pacchetti semplifica l'uso e la condivisione di librerie di codice sorgente Node.js. La gestione pacchetti predefinita per Node.js è npm. Gestione pacchetti npm semplifica l'installazione, l'aggiornamento e la disinstallazione delle librerie.

  • Che cos'è Express?

    Express è un framework applicazione Web server usato da Node.js per creare app Web. Con Express esistono molti modi diversi per creare un'interfaccia utente. L'implementazione fornita in questa esercitazione usa il motore modello predefinito del generatore di applicazioni Express, denominato Pug, per eseguire il rendering del front-end.

Prerequisiti

Assicurarsi di installare quanto segue:

  • Visual Studio 2022 versione 17.4 o successiva con il carico di lavoro ASP.NET e sviluppo Web installato. Passare alla pagina dei download di Visual Studio per installarla gratuitamente. Se è necessario installare il carico di lavoro e avere già Visual Studio, passare a Strumenti Recupera strumenti>e funzionalità, che apre il Programma di installazione di Visual Studio. Scegliere il carico di lavoro Sviluppo ASP.NET e Web, quindi scegliere Cambia.
  • npm (https://www.npmjs.com/), incluso in Node.js
  • npx (https://www.npmjs.com/package/npx)

Creazione dell'app

  1. Nella finestra iniziale (scegliere Finestra di avvio file>da aprire), selezionare Crea un nuovo progetto.

    Create a new project

  2. Cercare Express nella barra di ricerca nella parte superiore e quindi selezionare Applicazione JavaScript Express.

    Choose a template

  3. Assegnare un nome al progetto e alla soluzione.

Visualizzare le proprietà del progetto

Le impostazioni predefinite del progetto consentono di compilare ed eseguire il debug del progetto. Tuttavia, se è necessario modificare le impostazioni, fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni, selezionare Proprietà e quindi passare alla sezione Compilazione o debug.

Nota

launch.json archivia le impostazioni di avvio associate al pulsante Start nella barra degli strumenti Debug. Attualmente, launch.json deve trovarsi nella cartella .vscode .

Compilare il progetto

Scegliere Compila>Compila soluzione per compilare il progetto.

Avviare l'app

Premere F5 o selezionare il pulsante Start nella parte superiore della finestra e verrà visualizzato un prompt dei comandi:

  • npm che esegue il comando ./bin/www del nodo

Nota

Controllare l'output della console per i messaggi, ad esempio un messaggio che indica di aggiornare la versione di Node.js.

Verrà visualizzata l'app Express di base.

Eseguire il debug dell'app

Verrà ora illustrato un paio di modi per eseguire il debug dell'app.

Prima di tutto, se l'app è ancora in esecuzione, premere MAIUSC + F5 o selezionare il pulsante di arresto rosso nella parte superiore della finestra per arrestare la sessione corrente. È possibile notare che l'arresto della sessione chiude il browser che mostra l'app, ma lascia dietro la finestra del prompt dei comandi che esegue il processo Node. Per il momento, procedere e chiudere eventuali prompt dei comandi persistenti. Più avanti in questo articolo viene descritto il motivo per cui è possibile lasciare in esecuzione il processo Node.

Debug del processo Node

Nell'elenco a discesa accanto al pulsante Start dovrebbero essere visualizzate le opzioni di avvio seguenti:

  • localhost (Edge)
  • localhost (Chrome)
  • Debug Dev Env
  • Avviare node e browser

Andare avanti e selezionare l'opzione Avvia nodo e browser . A questo punto, prima di premere F5 o selezionare di nuovo il pulsante Start , impostare un punto di interruzione in index.js (nella cartella route ) selezionando la barra sinistra prima della riga di codice seguente: res.render('index', { title: 'Express' });

Suggerimento

È anche possibile posizionare il cursore su una riga di codice e premere F9 per attivare o disattivare il punto di interruzione per tale riga.

Quindi, premere F5 o selezionare Debug>Avvia debug per eseguire il debug dell'app.

Il debugger verrà sospeso nel punto di interruzione appena impostato. Mentre è in pausa, è possibile controllare lo stato dell'app. Passando il puntatore del mouse sulle variabili, sarà possibile esaminare le relative proprietà.

Al termine dell'ispezione dello stato, premere F5 per continuare e l'app dovrebbe caricare come previsto.

Questa volta, se si raggiunge l'arresto, si noterà che sia il browser che le finestre del prompt dei comandi si chiudono. Per vedere perché, esaminare più in dettaglio launch.json.

Informazioni su launch.json

Launch.json si trova attualmente nella cartella .vscode. Se non è possibile visualizzare la cartella vscode in Esplora soluzioni, selezionare Mostra tutti i file.

Se in precedenza si è usato Visual Studio Code, il file launch.json avrà un aspetto familiare. Launch.json funziona nello stesso modo in cui funziona in Visual Studio Code per indicare le configurazioni di avvio usate per il debug. Ogni voce specifica una o più destinazioni di cui eseguire il debug.

Le prime due voci sono voci del browser e dovrebbero avere un aspetto simile al seguente:

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

Nelle voci precedenti è possibile osservare che type è impostato su un tipo di browser. Se si avvia con solo un tipo di browser come unica destinazione di debug, Visual Studio eseguirà il debug solo del processo del browser front-end e il processo Node verrà avviato senza un debugger collegato, ovvero eventuali punti di interruzione impostati nel processo Node non verranno associati.

Al termine dell'arresto della sessione, il processo Node continuerà anche a essere eseguito. Viene lasciato intenzionalmente in esecuzione quando un browser è la destinazione di debug, perché se il lavoro viene eseguito esclusivamente sul front-end, l'esecuzione continua del processo back-end semplifica il flusso di lavoro di sviluppo.

All'inizio di questa sezione è stata chiusa la finestra del prompt dei comandi persistente per impostare i punti di interruzione nel processo Node. Affinché il processo Node possa essere sottoposto a debug, è necessario riavviarlo con il debugger collegato. Se viene lasciato in esecuzione un processo Node non debug, il tentativo di avviare il processo Node in modalità di debug (senza riconfigurare la porta) avrà esito negativo.

Nota

edge Attualmente e chrome sono gli unici tipi di browser supportati per il debug.

La terza voce in launch.json specifica node come tipo di debug e dovrebbe essere simile alla seguente:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Questa voce avvierà solo il processo Node in modalità di debug. Non verrà avviato alcun browser.

La quarta voce fornita in "launch.json* è la configurazione di avvio composta seguente.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Questa configurazione composta è identica a una configurazione di avvio composto vscode e la selezione consente di eseguire il debug sia del front-end che del back-end. È possibile notare che fa semplicemente riferimento alle singole configurazioni di avvio per i processi node e browser.

Esistono molti altri attributi che è possibile usare in una configurazione di avvio. Ad esempio, è possibile nascondere una configurazione dall'elenco a discesa, ma avere ancora un riferimento, impostando l'attributo hidden nell'oggetto presentation su true.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Fare clic su Opzioni per un elenco di attributi che è possibile usare per migliorare l'esperienza di debug. Si noti che al momento sono supportate solo le configurazioni di avvio . Qualsiasi tentativo di usare una configurazione di collegamento comporterà un errore di distribuzione.