Lernprogramm: Erstellen einer Node.js- und Express-App in Visual Studio

In diesem Artikel wird die Verwendung von Visual Studio zum Erstellen einer einfachen Node.js Web-App veranschaulicht, die das Express-Framework verwendet.

Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die JavaScript-Code ausführt. Standardmäßig verwendet Node.js den npm-Paket-Manager, um die Verwendung und Freigabe Node.js Quellcodebibliotheken zu vereinfachen. Der npm-Paket-Manager vereinfacht die Installation, Aktualisierung und Deinstallation von Bibliotheken.

Express ist ein Serverwebanwendungsframework, das Node.js zum Erstellen von Web-Apps verwendet. Mit Express gibt es viele verschiedene Möglichkeiten zum Erstellen einer Benutzeroberfläche. Die in diesem Lernprogramm bereitgestellte Implementierung verwendet das Standardvorlagenmodul des Express-Anwendungsgenerators, das als Pug bezeichnet wird, um das Frontend zu rendern.

In diesem Tutorial führen Sie folgende Aufgaben aus:

• Erstellen einer Node.js-App mithilfe einer JavaScript-Vorlage
• Erstellen der App und Untersuchen des ausgeführten Prozesses
• Debuggen der App im Visual Studio-Debugger

Voraussetzungen

• Visual Studio 2022 Version 17.12 oder höher mit installierter ASP.NET und Webentwicklung Workload.

  • Um Visual Studio kostenlos zu installieren, wechseln Sie zur Visual Studio-Downloads Seite.

  • Wenn Sie bereits über Visual Studio verfügen, können Sie die Workload aus der Interaktiven Entwicklungsumgebung (Interactive Development Environment, IDE) installieren:

    1. Wählen Sie Extras>Tools und Features abrufen aus.

    2. Wählen Sie im Visual Studio-Installer die Registerkarte Workloads aus.

    3. Wählen Sie die Workload ASP.NET und Webentwicklung, und wählen Sie anschließend Ändern aus.

    4. Folgen Sie den Anweisungen, und schließen Sie die Installation ab.

• Node.js mit dem npm-Paketmanager und dem npx-Paket.

  Sie können ihre Node.js Installation mit dem Befehl node -v überprüfen. Die Befehlsausgabe sollte die installierte Version von Node.jsanzeigen, z. B. v23.4.0. Weitere Informationen finden Sie unter Herunterladen und Installieren von Node.js und npm.

  • Der npm-Paket-Manager- ist in der Node.js Installation enthalten. Überprüfen Sie die Installation mit dem Befehl npm -v. Die Befehlsausgabe sollte die installierte Version des Paket-Managers anzeigen, z. B. 10.9.2.

  • Das npx-Paket ist Teil der npm CLI. Bestätigen Sie die Paketinstallation mit dem Befehl npx -v. Die Befehlsausgabe sollte die installierte Paketversion anzeigen, z. B. 10.9.2.

Erstellen Ihrer App

Führen Sie die folgenden Schritte aus, um eine neue Node.js-App in Visual Studio zu erstellen:

1. Wählen Sie im Visual Studio-Fenster Start (Datei>Startfenster) Neues Projekt erstellen aus:

   

2. Geben Sie im Feld Suche Express ein, und wählen Sie in der Ergebnisliste die Vorlage JavaScript Express-Anwendung aus.

   

3. Wählen Sie Weiter aus, um mit der Konfigurationsseite fortzufahren.

4. Geben Sie einen Projektnamen und Lösungsnamen für Ihre neue App ein. Wählen Sie den standardmäßigen Speicherort aus, oder navigieren Sie zu einem anderen Pfad in Ihrer Umgebung.

5. Klicken Sie auf Erstellen, um das neue Node.js-Projekt zu erstellen.

Visual Studio erstellt Ihr neues Projekt und öffnet die Projekthierarchie im Projektmappen-Explorer.

Anzeigen Ihrer Projekteigenschaften

Mit den Standardprojekteinstellungen können Sie das Projekt erstellen und debuggen. Sie können die Einstellungen nach Bedarf ändern.

1. Klicken Sie im Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie Eigenschaftenaus. Sie können auch auf diese Eigenschaften zugreifen, indem Sie Project>ExpressProject-Eigenschaftenauswählen.

2. Wechseln Sie im Bereich Projekteigenschaften zum Abschnitt Build, und konfigurieren Sie die Eigenschaften nach Bedarf.

3. Um Debugeinstellungen zu konfigurieren, wählen Sie Debuggen>ExpressProject Debug Propertiesaus.

Anmerkung

In der launch.json Datei werden die Starteinstellungen gespeichert, die der Aktion Start in der Debug-Toolbar zugeordnet sind. Derzeit muss sich die Datei launch.json im Ordner .vscode befinden.

Erstellen Ihres Projekts

Erstellen Sie Ihr Projekt, indem Sie Build>Projektmappe erstellen auswählen.

Starten Sie die App

Starten Sie Ihre neue App, indem Sie STRG + F5- auswählen oder "Ohne Debuggen starten" (grünes Pfeilkontursymbol) auf der Symbolleiste auswählen.

Ein Terminal wird geöffnet und zeigt den ausgeführten Befehl an:

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

Anmerkung

Überprüfen Sie die Terminalausgabe auf Nachrichten. Überprüfen Sie auch den Bereich Ausgabe in Visual Studio. Achten Sie auf Anweisungen, um Ihre Version von Node.jszu aktualisieren.

Wenn die App erfolgreich gestartet wird, wird ein Browserfenster mit der Express-App geöffnet:

Debuggen Ihrer App

Jetzt sind Sie bereit, Möglichkeiten zum Debuggen Ihrer App zu erkunden.

Wenn Ihre App noch ausgeführt wird, drücken Sie UMSCHALT+F5, um die aktuelle Sitzung zu beenden, oder wählen Sie Beenden (rotes Quadratsymbol) auf der Debuggingsymbolleiste aus. Möglicherweise stellen Sie fest, dass das Beenden der Sitzung den Browser schließt, der Ihre App anzeigt, aber das Terminalfenster, in dem der Knotenprozess ausgeführt wird, bleibt geöffnet. Jetzt fahren Sie fort, und schließen Sie alle verweilenden Fenster.For now, go ahead and close any lingering windows. Später in diesem Artikel betrachten Sie Szenarien, in denen Sie den Node-Prozess möglicherweise weiterlaufen lassen möchten.

Debuggen des Node.js-Prozesses

Die Dropdownliste links neben der aktion Start zeigt die verfügbaren Startoptionen für die App an:

• localhost (Edge)
• localhost (Chrome)
• Starten von ExpressProject
• Start von Node und Browser

Führen Sie die folgenden Schritte aus, um den Knotenprozess für die App zu debuggen:

1. Wählen Sie in der Dropdownliste Start die Option Knoten und Browser starten aus.

2. Erweitern Sie im Projektmappen-Explorerden Ordner Routen und öffnen Sie die Datei index.js.

3. Legen Sie im Code-Editor einen Haltepunkt in der datei index.js fest:

   1. Suchen Sie die Codeanweisung res.render('index', { title: 'Express' });.

   2. Wählen Sie im linken Bundsteg in der Zeile für die Anweisung aus. Visual Studio fügt einen roten Kreis im Bundsteg hinzu, um den festgelegten Haltepunkt anzugeben.

   Tipp

   Sie können den Cursor auch in einer Codezeile platzieren und F9 drücken, um den Haltepunkt für diese Zeile umzuschalten.

4. Starten Sie Ihre App im Debugger, indem Sie in der Debugsymbolleiste F5 oder Debuggen starten (grünes Pfeilsymbol) auswählen.

   Visual Studio startet die Ausführung Ihrer App. Wenn der Debugger Ihren festgelegten Haltepunkt erreicht, wird der Debugvorgang angehalten.

5. Während die Ausführung angehalten ist, können Sie den Zustand Ihrer App überprüfen. Zeigen Sie mit der Maus auf Variablen, und überprüfen Sie ihre Eigenschaften.

6. Wenn Sie bereit sind, den Vorgang fortzusetzen, wählen Sie F5-aus. Die Verarbeitung wird fortgesetzt, und Ihre App wird im Browser geöffnet.

Wenn Sie dieses Mal beendenauswählen, beachten Sie, dass sowohl die Browser- als auch die Terminalfenster geschlossen werden. Um zu verstehen, warum das Verhalten anders ist, sehen Sie sich die launch.json Datei genauer an.

Überprüfen der launch.json Datei

Führen Sie die folgenden Schritte aus, um die launch.json Datei für das Projekt zu untersuchen:

1. Erweitern Sie im Projektmappen-Explorerden Ordner .vscode, und öffnen Sie die launch.json Datei.

   Tipp

   Wenn der Ordner .vscode im Projektmappen-Explorernicht angezeigt wird, wählen Sie die Aktion "Alle Dateien anzeigen" in der Projektmappen-Explorer Symbolleiste aus.

2. Sehen Sie sich die Datei im Code-Editor an. Wenn Sie Erfahrung mit Visual Studio Code haben, sieht die launch.json Datei wahrscheinlich vertraut aus. Die launch.json Datei in diesem Projekt entspricht der Datei, die von Visual Studio Code verwendet wird, um Startkonfigurationen anzuzeigen, die für das Debuggen verwendet werden. Jeder Eintrag gibt ein oder mehrere Ziele an, die gedebuggt werden sollen.

3. Überprüfen Sie die ersten beiden Einträge in der Datei. Diese Einträge definieren das Verhalten für verschiedene Internetbrowser:

       {
         "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"
       }
   

   Die unterstützten Browser werden mit der eigenschaft type angegeben. Wenn Sie die App nur mit einem Browsertyp als einziges Debugziel starten, debugt Visual Studio nur den Front-End-Browserprozess. Der Node-Prozess wird ohne angefügten Debugger gestartet. Visual Studio bindet keine im Node-Prozess festgelegten Haltepunkte.

   Anmerkung

   Derzeit sind edge und chrome die einzigen unterstützten Browsertypen für das Debuggen.

   Wenn Sie die Sitzung beenden, läuft der Node-Prozess absichtlich weiter. Der Prozess läuft absichtlich weiter, wenn ein Browser das Debugging-Ziel ist. Wenn die Arbeit ausschließlich auf dem Frontend erfolgt, erleichtert die kontinuierliche Ausführung des Back-End-Prozesses den Entwicklungsworkflow.

   Am Anfang dieses Abschnitts haben Sie das verbleibende Terminalfenster geschlossen, sodass Sie Haltepunkte im Node-Prozess festlegen können. Damit Visual Studio den Knotenprozess debuggen kann, muss der Prozess mit dem angefügten Debugger neu gestartet werden. Wenn ein nicht debugfähiger Node-Prozess weiterläuft, schlägt der Versuch fehl, den Node-Prozess im Debugmodus (ohne Neukonfiguration des Ports) zu starten .

4. Überprüfen Sie den dritten Eintrag in der datei launch.json. Dieser Eintrag gibt node als Debugtyp an:

       {
         "name": "Launch ExpressProject",
         "type": "node",
         "request": "launch",
         "cwd": "${workspaceFolder}/bin",
         "program": "${workspaceFolder}/bin/www",
         "stopOnEntry": true
       }
   

   Der dritte Eintrag startet nur den Node.js-Prozess im Debugmodus. Visual Studio startet den Browser nicht.

5. Überprüfen Sie den vierten Eintrag in der datei launch.json, der eine Verbundstartkonfiguration definiert:

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

   Diese verbundkonfiguration ist identisch mit einer Visual Studio Code Verbundstartkonfiguration. Wenn Sie diese Konfiguration auswählen, können Sie sowohl das Frontend als auch das Back-End debuggen. Beachten Sie, dass die Definition einfach auf die einzelnen Startkonfigurationen für die Node- und Browserprozesse verweist.

   Es gibt viele weitere Attribute, die Sie in einer Startkonfiguration verwenden können. Sie können z. B. eine Konfiguration ausblenden, um sie aus der Dropdownliste Start zu entfernen, aber Verweise auf die Konfiguration zulassen, indem Sie das attribut hidden im presentation-Objekt auf truefestlegen:

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

6. Konfigurieren Sie Optionen, indem Sie unterstützte Attribute verwenden, um die Debugerfahrung zu verbessern. Derzeit werden nur Konfigurationen zum Starten unterstützt. Jeder Versuch, eine Konfiguration zum Anfügen zu verwenden, führt zu einem Bereitstellungsfehler. Weitere Informationen finden Sie unter Optionen.

Verwandte Links

• Debuggen einer JavaScript- oder TypeScript-App in Visual Studio
• Migrieren von Node.js Projekten in Visual Studio
• Verwalten von npm-Paketen in Visual Studio