Schnellstart: Erstellen einer ersten Node.js-App mit Visual Studio

Mithilfe dieser fünf- bis zehnminütigen Einführung in die integrierte Entwicklungsumgebung (IDE) von Visual Studio können Sie eine einfache Node.js-Web-App erstellen.

Voraussetzungen

Bevor Sie beginnen, installieren Sie Visual Studio, und richten Sie die Node.js-Umgebung ein.

Installieren von Visual Studio und der Node.js-Workload

Wenn Visual Studio noch nicht installiert ist:

  1. Wechseln Sie zur Seite Visual Studio-Downloads, um Visual Studio 2022 kostenlos zu installieren.

  2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung aus, und klicken Sie auf Installieren.

    Screenshot: Im Visual Studio-Installer ausgewählte Node.js-Workload

Wenn Visual Studio bereits installiert ist:

  1. Navigieren Sie in Visual Studio zu Extras>Tools und Features abrufen.

  2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung und dann Ändern aus, um die Workload herunterzuladen und zu installieren.

Einrichten der Node.js-Umgebung

Installieren Sie die LTS-Version der Node.js-Runtime. Die LTS-Version bietet die beste Kompatibilität mit anderen Frameworks und Bibliotheken.

Zwar wurde Node.js für 32-Bit- und 64-Bit-Architekturen erstellt, doch unterstützt das Node.js-Installationsprogramm jeweils nur eine Version.

In der Regel erkennt Visual Studio die installierte Runtime. Falls dies jedoch nicht der Fall ist, können Sie Ihr Projekt so konfigurieren, dass es auf die installierte Runtime verweist:

  1. Nach dem Erstellen des Projekts klicken Sie mit der rechten Maustaste auf den Projektknoten.

  2. Wählen Sie Eigenschaften aus, und legen Sie den Node.exe-Pfad fest. Sie können eine globale Node.js-Installation verwenden oder für ein beliebiges Node.js-Projekt den Pfad zu einem lokalen Interpreter angeben.

Installieren von Visual Studio

Wenn Sie Visual Studio 2019 noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

Installieren von Visual Studio

Wenn Sie Visual Studio 2017 noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

Einrichten der Node.js-Umgebung

Visual Studio kann Ihnen beim Einrichten Ihrer Umgebung helfen, einschließlich der Installation von Tools, die bei der Node.js-Entwicklung gebräuchlich sind.

  1. Navigieren Sie in Visual Studio zu Extras>Tools und Features abrufen.

  2. Wählen Sie im Visual Studio-Installer die Workload Node.js-Entwicklung und dann Ändern aus, um die Workload herunterzuladen und zu installieren.

    Screenshot: Im Visual Studio-Installer ausgewählte Node.js-Workload

  3. Installieren Sie die LTS-Version der Node.js-Runtime. Die LTS-Version wird empfohlen, um optimale Kompatibilität mit externen Frameworks und Bibliotheken zu gewährleisten.

    Zwar wurde Node.js für 32-Bit- und 64-Bit-Architekturen erstellt, doch unterstützt das Node.js-Installationsprogramm jeweils nur eine installierte Version.

  4. Wenn Visual Studio die installierte Runtime nicht erkennt (normalerweise wird sie erkannt), konfigurieren Sie Ihr Projekt so, dass es auf die installierte Runtime verweist:

    1. Nachdem Sie das Projekt erstellt haben, klicken Sie mit der rechten Maustaste auf den Projektknoten.

    2. Wählen Sie Eigenschaften aus,und legen Sie den Node.exe-Pfad fest. Sie können eine globale Installation von Node.js verwenden oder in jedem Ihrer Node.js-Projekte den Pfad zu einem lokalen Interpreter angeben.

Erstellen Ihres App-Projekts

Erstellen Sie in Visual Studio ein neues Node.js-Projekt.

  1. Starten Sie Visual Studio, und drücken Sie dann ESC, um das Startfenster zu schließen.

  2. Drücken Sie STRG+Q, und geben Sie dann node.js im Suchfeld ein.

  3. Wählen Sie Leere Node.js Webanwendung aus.

  4. Wählen Sie im Dialogfeld die Option Erstellen aus.

  1. Drücken Sie ESC, um das Startfenster zu schließen.

  2. Drücken Sie STRG+Q, um das Suchfeld zu öffnen, und geben Sie dann Node.js ein.

  3. Wählen Sie Leere Node.js-Webanwendung (JavaScript) aus. Wählen Sie im Dialogfeld die Option Erstellen aus.

  1. Klicken Sie oben in der Menüleiste auf Datei > Neu > Projekt.

  2. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Eintrag JavaScript, und wählen Sie Node.js aus.

  3. Wählen Sie im mittleren Bereich die Option Leere Node.js-Webanwendung und dann OK aus.

Visual Studio erstellt und öffnet das Projekt. Die Datei server.js des Projekts wird im Editor geöffnet.

Wenn die Projektvorlage Leere Node.js-Webanwendung nicht angezeigt wird, müssen Sie die Workload für die Node.js-Entwicklung hinzufügen. Anweisungen hierzu finden Sie unter Voraussetzungen.

Durchsuchen der IDE

Visual Studio kann Ihnen beim Einrichten Ihrer Umgebung helfen, einschließlich der Installation von Tools, die bei der Node.js-Entwicklung gebräuchlich sind.

  1. Sehen Sie sich im rechten Bereich den Projektmappen-Explorer an.

    • Auf der obersten Ebene befindet sich eine Projektmappe, die standardmäßig denselben Namen wie Ihr Projekt aufweist. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.
    • Ihr Projekt mit dem Namen, den Sie beim Einrichten verwendet haben, ist fett hervorgehoben. Auf dem Datenträger wird dieses Projekt im Projektordner durch eine NJSPROJ-Datei dargestellt.
    • Der npm-Knoten zeigt installierte npm-Pakete. Sie können mit der rechten Maustaste auf den Knoten npm klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren.

    Screenshot: Bereich „Projektmappen-Explorer“

  2. Um npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung zu installieren, klicken Sie mit der rechten Maustaste auf den Projektknoten, und klicken Sie dann auf Eingabeaufforderung hier öffnen.

    Screenshot: „Eingabeaufforderung hier öffnen“ im Kontextmenü des Projekts

  3. Wenn Sie die Navigation zum Quellcode testen möchten, wählen Sie in der geöffneten Datei server.js den Eintrag createServer aus, und drücken Sie F12, oder klicken Sie mit der rechten Maustaste auf createServer, und wählen Sie im Kontextmenü die Option Zur Definition wechseln aus. Über diesen Befehl gelangen Sie zur Definition der createServer-Funktion in http.d.ts.

    Screenshot: „Zur Definition wechseln“ im Kontextmenü von createServer

  4. Suchen Sie in server.js nach dieser Codezeile: res.end('Hello World\n');, und ändern Sie sie folgendermaßen:

    res.end('Hello World\n' + res.connection.

    Wenn Sie connection. eingeben, stellt IntelliSense Optionen für die automatische Vervollständigung des Codes bereit.

    Screenshot: IntelliSense-Optionen für die automatische Vervollständigung

  5. Wählen Sie localPort aus, und geben Sie ); ein, um die Anweisung zu vervollständigen:

    res.end('Hello World\n' + res.connection.localPort);

  1. Sehen Sie sich im rechten Bereich den Projektmappen-Explorer an.

    • Auf der obersten Ebene befindet sich eine Projektmappe, die standardmäßig denselben Namen wie Ihr Projekt aufweist. Eine Projektmappe, die auf dem Datenträger durch eine SLN-Datei dargestellt wird, ist ein Container für mindestens ein zugehöriges Projekt.
    • Ihr Projekt mit dem Namen, den Sie beim Einrichten verwendet haben, ist fett hervorgehoben. Auf dem Datenträger wird dieses Projekt im Projektordner durch eine NJSPROJ-Datei dargestellt.
    • Der npm-Knoten zeigt installierte npm-Pakete. Sie können mit der rechten Maustaste auf den Knoten npm klicken, um über ein Dialogfeld npm-Pakete zu suchen und zu installieren.

    Screenshot: Bereich „Projektmappen-Explorer“

  2. Um npm-Pakete oder Node.js-Befehle über eine Eingabeaufforderung zu installieren, klicken Sie mit der rechten Maustaste auf den Projektknoten, und klicken Sie dann im Kontextmenü auf Eingabeaufforderung hier öffnen.

    Screenshot: „Eingabeaufforderung hier öffnen“ im Kontextmenü des Projekts

  3. Um die Navigation zum Quellcode zu testen, wählen Sie in der geöffneten Datei server.js den Eintrag http.createServer aus, und drücken Sie F12, oder wählen Sie im Kontextmenü (Rechtsklickmenü) die Option Zur Definition wechseln aus. Über diesen Befehl gelangen Sie zur Definition der createServer-Funktion in http.d.ts.

    Screenshot: „Zur Definition wechseln“ im Kontextmenü von createServer

  4. Suchen Sie in server.js nach dieser Codezeile: res.end('Hello World\n');, und ändern Sie sie folgendermaßen:

    res.end('Hello World\n' + res.connection.

    Wenn Sie connection. eingeben, stellt IntelliSense Optionen für die automatische Vervollständigung des Codes bereit.

    Screenshot: IntelliSense-Optionen für die automatische Vervollständigung

  5. Wählen Sie localPort aus, und geben Sie ); ein, um die Anweisung zu vervollständigen:

    res.end('Hello World\n' + res.connection.localPort);

Ausführen der App

  1. Drücken Sie STRG+F5, oder wählen Sie Debuggen > Ohne Debuggen starten aus, um die App auszuführen.

    Die App wird daraufhin in einem Browser geöffnet.

  2. Vergewissern Sie sich im Browser, dass die Meldung Hallo Welt und die lokale Portnummer angezeigt werden.

Herzlichen Glückwunsch! Sie haben eine einfache Node.js-App mit Visual Studio erstellt. Wenn Sie mehr über dieses Thema erfahren möchten, fahren Sie mit dem Abschnitt Tutorials im Inhaltsverzeichnis fort.

Nächste Schritte