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

  • Artikel

In diesem Artikel erfahren Sie, wie Sie Visual Studio zum Erstellen einer einfachen Node.js-Web-App verwenden, die das Express-Framework verwendet.

Sehen Sie sich zunächst die folgenden häufig gestellten Fragen an, in denen einige wichtige Konzepte vorgestellt werden:

  • Was ist Node.js?

    Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die JavaScript-Code ausführt.

  • Was ist NPM?

    Ein Paket-Manager erleichtert das Verwenden und Freigeben von Node.js-Quellcodebibliotheken. npm ist der Standardpaket-Manager für Node.js. Der Paket-Manager npm vereinfacht die Installation, Aktualisierung und Deinstallation von Bibliotheken.

  • Was ist Express?

    Express ist ein serverseitiges Webanwendungsframework, das Node.js zum Erstellen von Web-Apps verwendet. Express bietet viele verschiedene Möglichkeiten zum Erstellen einer Benutzeroberfläche. Die in diesem Tutorial bereitgestellte Implementierung verwendet Pug, die Standardvorlagen-Engine des Express-Anwendungsgenerators, um das Front-End zu rendern.

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes installieren:

  • Visual Studio 2022, Version 17.4 oder höher, mit installierter Workload ASP.NET und Webentwicklung. Sie können die Visual Studio 2022 Vorschauversion von der Seite Visual Studio-Downloads kostenlos herunterladen und installieren. Wenn Sie die Workload installieren müssen und bereits Visual Studio besitzen, navigieren Sie zu Extras>Extras und Funktionen abrufen… . Dadurch wird der Visual Studio-Installer geöffnet. Klicken Sie auf die Workload ASP.NET und Webentwicklung, und klicken Sie anschließend auf Ändern.
  • npm (https://www.npmjs.com/), das im Lieferumfang von Node.js enthalten ist
  • npx (https://www.npmjs.com/package/npx)

Erstellen Ihrer App

  1. Wählen Sie im Startfenster (mit Datei>Startfenster öffnen) die Option Neues Projekt erstellen aus.

    Create a new project

  2. Suchen Sie in der Suchleiste oben nach „Express“, und wählen Sie dann JavaScript-Express-Anwendung aus.

    Choose a template

  3. Benennen Sie das Projekt und die Projektmappe.

Anzeigen der Projekteigenschaften

Mit den Standardprojekteinstellungen können Sie das Projekt erstellen und debuggen. Wenn Sie jedoch Einstellungen ändern müssen, klicken Sie mit der rechten Maustaste im Projektmappen-Explorer auf das Projekt, wählen Sie Eigenschaften aus, und wechseln Sie dann zum Abschnitt Erstellen oder Debuggen.

Hinweis

launch.json speichert die Starteinstellungen, die der Schaltfläche Start in der Debugsymbolleiste zugeordnet sind. Derzeit muss launch.json unter dem Ordner .vscode liegen.

Erstellen Ihres Projekts

Klicken Sie auf Erstellen>Projektmappe erstellen, um das Projekt zu erstellen.

Starten Ihrer App

Drücken Sie F5, oder klicken Sie oben im Fenster auf die Schaltfläche Start. Daraufhin wird eine Eingabeaufforderung angezeigt:

  • npm running the node ./bin/www command

Hinweis

Überprüfen Sie die Konsolenausgabe auf Meldungen, z. B. eine Meldung mit der Anweisung zur Aktualisierung Ihrer Node.js-Version.

Als Nächstes sollte die einfache Express-App angezeigt werden.

Debuggen der App

Wir werden jetzt einige Möglichkeiten zum Debuggen Ihrer App durchgehen.

Wenn Ihre App noch ausgeführt wird, drücken Sie zunächst die Tasten UMSCHALT+F5, oder wählen Sie oben im Fenster die rote Stoppschaltfläche aus, um die aktuelle Sitzung zu beenden. Möglicherweise stellen Sie fest, dass das Beenden der Sitzung den Browser schließt, der Ihre App anzeigt, aber das Eingabeaufforderungsfenster, in dem der Node-Prozess ausgeführt wird, noch offen ist. Schließen Sie für den Moment alle noch offenen Eingabeaufforderungen. Weiter unten in diesem Artikel wird erläutert, warum es möglicherweise sinnvoll ist, den Node-Prozess weiter auszuführen.

Debuggen des Node-Prozesses

In der Dropdownliste neben der Schaltfläche Start sollten die folgenden Startoptionen angezeigt werden:

  • localhost (Edge)
  • localhost (Chrome)
  • Entwicklungsumgebung debuggen
  • Node und Browser starten

Wählen Sie die Option Node und Browser starten aus. Bevor Sie F5 drücken oder erneut die Schaltfläche Start auswählen, legen Sie einen Breakpoint in index.js (im Ordner routes) fest, indem Sie den linken Bundsteg vor der folgenden Codezeile auswählen: res.render('index', { title: 'Express' });

Tipp

Sie können auch den Cursor in eine Codezeile setzen und F9 drücken, um den Breakpoint für diese Zeile umzuschalten.

Drücken Sie dann F5, oder wählen Sie Debuggen>Debuggen starten aus, um Ihre App zu debuggen.

Der Debugger sollte an dem von Ihnen festgelegten Breakpoint anhalten. Solange der Debugger angehalten ist, können Sie den App-Zustand überprüfen. Durch Zeigen auf Variablen können Sie deren Eigenschaften untersuchen.

Wenn Sie mit der Zustandsüberprüfung fertig sind, drücken Sie zum Fortsetzen auf F5. Ihre App sollte erwartungsgemäß geladen werden.

Wenn Sie die Sitzung jetzt beenden, werden Sie feststellen, dass sowohl der Browser als auch die Eingabeaufforderungsfenster geschlossen werden. Sehen Sie sich die Datei launch.json genauer an, um den Grund dafür herauszufinden.

Grundlegendes zu launch.json

Die Datei launch.json befindet sich derzeit im Ordner .vscode. Wenn der Ordner .vscode im Projektmappen-Explorer nicht angezeigt wird, wählen Sie Alle Dateien anzeigen aus.

Wenn Sie bereits mit Visual Studio Code gearbeitet haben, dürfte Ihnen die Datei launch.json bekannt vorkommen. Diese launch.json hier funktioniert im Wesentlichen genauso wie in Visual Studio Code: Sie gibt Startkonfigurationen an, die für das Debuggen verwendet werden. Jeder Eintrag gibt mindestens ein Ziel an, für das ein Debugging ausgeführt werden soll.

Bei den ersten beiden Einträgen handelt es sich um Browsereinträge, die etwa wie folgt aussehen sollten:

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

In den Einträgen oben sehen Sie, dass type auf einen Browsertyp festgelegt ist. Wenn Sie das Debugging nur mit einem Browsertyp als einzigem Debugziel starten, führt Visual Studio nur ein Debugging des Front-End-Browserprozesses aus. Der Node-Prozess wird ohne angefügten Debugger gestartet, was bedeutet, dass im Node-Prozess festgelegte Breakpoints nicht gebunden werden.

Beim Beenden der Sitzung wird der Node-Prozess auch weiterhin ausgeführt. Der Prozess wird aus folgendem Grund absichtlich fortgesetzt, wenn ein Browser das Debugziel ist: Wenn die Arbeit ausschließlich im Front-End erfolgt, erleichtert die kontinuierliche Ausführung des Back-End-Prozesses den Entwicklungsworkflow.

Zu Beginn dieses Abschnitts haben Sie das noch geöffnete Eingabeaufforderungsfenster geschlossen, um Breakpoints im Node-Prozess festzulegen. Um das Debuggen des Node-Prozesses zu ermöglichen, muss der Prozess mit angefügtem Debugger neu gestartet werden. Wenn ein Node-Prozess, für den kein Debugging möglich ist, weiterhin ausgeführt wird, tritt beim Versuch, den Node-Prozess (ohne Neukonfiguration des Ports) im Debugmodus zu starten, ein Fehler auf.

Hinweis

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

Der dritte Eintrag in der Datei launch.json gibt node als Debugtyp an und sollte ungefähr so aussehen:

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

Dieser Eintrag startet nur den Node-Prozess im Debugmodus. Es wird kein Browser gestartet.

Der vierte Eintrag in der Datei „launch.json“ ist die folgende Verbundstartkonfiguration.

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

Diese Verbundkonfiguration ist identisch mit einer VS Code-Verbundstartkonfiguration. Indem Sie diese Konfiguration auswählen, können Sie sowohl Front-End als auch Back-End debuggen. Wie Sie sehen, verweist sie einfach auf die einzelnen Startkonfigurationen für die Node- und Browserprozesse.

Es gibt viele weitere Attribute, die Sie in einer Startkonfiguration verwenden können. Sie können z. B. eine Konfiguration aus der Dropdownliste ausblenden, aber dennoch darauf verweisen, indem Sie das Attribut hidden im Objekt presentation auf true festlegen.

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

Klicken Sie auf Optionen, um eine Liste der Attribute zu erhalten, die Sie verwenden können, um das Debuggen zu verbessern. Beachten Sie, dass derzeit nur Konfigurationen zum Starten unterstützt werden. Jeder Versuch, eine Konfiguration zum Anfügen zu verwenden, führt zu einem Bereitstellungsfehler.