Delen via

Zelfstudie: Een Node.js- en Express-app maken in Visual Studio

  • Artikel

In dit artikel wordt gedemonstreert hoe u Visual Studio gebruikt om een eenvoudige Node.js-web-app te bouwen die gebruikmaakt van het Express-framework.

Node.js is een JavaScript-runtimeomgeving aan de serverzijde waarmee JavaScript-code wordt uitgevoerd. Node.js maakt standaard gebruik van npm Package Manager om het eenvoudig te gebruiken en te delen Node.js broncodebibliotheken. Npm Package Manager vereenvoudigt de installatie, het bijwerken en verwijderen van bibliotheken.

Express is een serverwebtoepassingsframework dat Node.js gebruikt om web-apps te bouwen. Met Express zijn er veel verschillende manieren om een gebruikersinterface te maken. De implementatie in deze zelfstudie maakt gebruik van de standaardsjabloonengine van de Express-toepassingsgenerator, pug genoemd, om de front-end weer te geven.

In deze zelfstudie gaat u het volgende doen:

  • Een Node.js-app maken met behulp van een JavaScript-sjabloon
  • De app bouwen en het draaiende proces onderzoeken
  • Fouten opsporen in de app in het Visual Studio-foutopsporingsprogramma

Voorwaarden

  • Visual Studio 2022 versie 17.12 of hoger waarop de ASP.NET- en webontwikkelingsworkload is geïnstalleerd.

    • Als u Visual Studio gratis wilt installeren, gaat u naar de Visual Studio-downloads pagina.

    • Als u Visual Studio al hebt, kunt u de workload installeren vanuit de Interactive Development Environment (IDE):

      1. Selecteer Hulpprogramma's>Hulpprogramma's en onderdelen ophalen.

      2. Selecteer in het installatieprogramma van Visual Studio het tabblad Workloads.

      3. Selecteer de ASP.NET- en webontwikkelingsworkload en selecteer vervolgens Wijzigen.

      4. Volg de aanwijzingen en voltooi de installatie.

  • Node.js met npm-pakketbeheer en het npx-pakket.

    U kunt de installatie van uw Node.js controleren met de opdracht node -v. In de uitvoer van de opdracht moet de geïnstalleerde versie van Node.jsworden weergegeven, zoals v23.4.0. Zie Downloaden en installeren van Node.js en npm-voor meer informatie.

    • De npm-pakketbeheer is opgenomen in de Node.js-installatie. Controleer de installatie met de opdracht npm -v. In de uitvoer van de opdracht moet de geïnstalleerde versie van het pakketbeheer worden weergegeven, zoals 10.9.2.

    • Het npx-pakket maakt deel uit van de NPM CLI. Bevestig de installatie van het pakket met de opdracht npx -v. In de uitvoer van de opdracht moet de geïnstalleerde pakketversie worden weergegeven, zoals 10.9.2.

Uw app maken

Volg deze stappen om een nieuwe Node.js-app te maken in Visual Studio:

  1. Selecteer in het venster Start (Bestand>Startvenster) de optie Een nieuw project maken:

    Schermopname waarin wordt getoond hoe u de optie Een nieuw project maken selecteert in het startvenster van Visual Studio.

  2. Voer in het zoekvak Expressin, en selecteer de sjabloon JavaScript Express Application in de lijst met resultaten:

    Schermopname waarin wordt getoond hoe u de JavaScript Express-toepassingssjabloon kunt zoeken en selecteren in het startvenster van Visual Studio.

  3. Selecteer Volgende om door te gaan naar de configuratiepagina.

  4. Voer een projectnaam in en oplossingsnaam voor uw nieuwe app. Kies de standaardlocatie locatie of blader naar een ander pad in uw omgeving.

  5. Selecteer om te maken voor het nieuwe Node.js-project.

Visual Studio maakt uw nieuwe project en opent de projecthiërarchie in Solution Explorer.

De projecteigenschappen weergeven

Met de standaardprojectinstellingen kunt u het project bouwen en fouten opsporen. U kunt de instellingen indien nodig wijzigen.

  1. Klik in Solution Explorer-met de rechtermuisknop op het project en selecteer Eigenschappen. U kunt deze eigenschappen ook openen door Project>ExpressProject Propertieste selecteren.

  2. Ga in het deelvenster Projecteigenschappen naar de sectie Build en configureer de eigenschappen naar wens.

  3. Als u foutopsporingsinstellingen wilt configureren, selecteert u Foutopsporingseigenschappen>ExpressProject-foutopsporingseigenschappen.

Notitie

In het launch.json-bestand worden de opstartinstellingen opgeslagen die zijn gekoppeld aan de actie Start op de werkbalk Foutopsporing. Op dit moment moet de launch.json zich in de map .vscode bevinden.

Uw project bouwen

Bouw uw project door Build>Build Solutionte selecteren.

Uw app starten

Start je nieuwe app door Ctrl + F5- of Starten zonder foutopsporing te selecteren (icoon met groene pijlomtrek) op de werkbalk.

Er wordt een terminal geopend en de uitvoeropdracht wordt weergegeven:

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

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

Notitie

Controleer de terminaluitvoer voor berichten. Controleer ook het deelvenster Uitvoer in Visual Studio. Bekijk de instructies voor het bijwerken van uw versie van Node.js.

Wanneer de app is gestart, wordt er een browservenster geopend met de Express-app:

Schermopname van de actieve Express-app in de browser.

Fouten opsporen in uw app

U bent nu klaar om manieren te verkennen om fouten in uw app op te sporen.

Als uw app nog steeds actief is, selecteert u Shift + F5 om de huidige sessie te beëindigen of Stop (rood vierkantpictogram) in de debugwerkbalk. U ziet mogelijk dat het beëindigen van de sessie de browser sluit waarin uw app wordt weergegeven, maar het terminalvenster waarop het Node-proces wordt uitgevoerd, blijft geopend. Ga voorlopig verder en sluit eventuele achtergebleven vensters. Verderop in dit artikel bekijkt u scenario's voor wanneer u het Node-proces mogelijk wilt laten draaien.

Debuggen van het Node.js-proces

In de vervolgkeuzelijst links van de actie Start worden de beschikbare startopties voor de app weergegeven:

  • localhost (Edge)
  • localhost (Chrome)
  • ExpressProject starten
  • Node en browser starten

Volg deze stappen om fouten op te sporen in het Node-proces voor de app:

  1. Selecteer in de Start vervolgkeuzelijst Node en Browser starten.

  2. Vouw in Solution Explorerde routes map uit en open het index.js bestand.

  3. Stel in de code-editor een onderbrekingspunt in het index.js-bestand in:

    1. Zoek de codeopdracht res.render('index', { title: 'Express' });.

    2. Selecteer in de linker marge de regel voor de verklaring. Visual Studio voegt een rode cirkel toe in de rugmarge om het ingestelde onderbrekingspunt aan te geven.

    Tip

    U kunt de cursor ook op een regel code plaatsen en F9- selecteren om het onderbrekingspunt voor die regel in te schakelen.

  4. Start uw app in het foutopsporingsprogramma door F5 of Start Debugging (groene pijlpictogram) te selecteren in de werkbalk Foutopsporing.

    Visual Studio start de uitvoering van uw app. Wanneer de debugger jouw ingestelde breakpoint bereikt, pauzeert het foutopsporingsproces.

  5. Terwijl de uitvoering is onderbroken, kunt u de status van uw app inspecteren. Beweeg de muisaanwijzer over variabelen en bekijk de bijbehorende eigenschappen.

  6. Wanneer u klaar bent om door te gaan, selecteert u F5-. De verwerking wordt voortgezet en uw app wordt geopend in de browser.

Als u deze keer Stopselecteert, ziet u dat zowel de browser- als terminalvensters worden gesloten. Als u wilt weten waarom het gedrag verschilt, bekijkt u het launch.json-bestand.

Het launch.json-bestand onderzoeken

Volg deze stappen om het launch.json-bestand voor het project te onderzoeken:

  1. Vouw in Solution Explorerde map .vscode uit en open het bestand launch.json.

    Tip

    Als u de map .vscode niet in Solution Explorer-ziet, selecteert u de actie Alle bestanden weergeven in de werkbalk van Solution Explorer.

  2. Bekijk het bestand in de code-editor. Als u ervaring hebt met Visual Studio Code, ziet het launch.json bestand er waarschijnlijk bekend uit. Het launch.json-bestand in dit project komt overeen met het bestand dat door Visual Studio Code wordt gebruikt om startconfiguraties aan te geven die worden gebruikt voor foutopsporing. Elke vermelding geeft een of meer doelen op om fouten op te sporen.

  3. Bekijk de eerste twee vermeldingen in het bestand. Deze vermeldingen definiëren gedrag voor verschillende internetbrowsers:

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

    De ondersteunde browsers worden aangegeven met de eigenschap type. Als u de app met alleen een browsertype start als het enige doel voor foutopsporing, worden alleen fouten in het front-endbrowserproces door Visual Studio opgespoord. Het Node-proces wordt gestart zonder dat er een foutopsporingsprogramma is gekoppeld. Visual Studio bindt geen onderbrekingspunten die zijn ingesteld in het knooppuntproces.

    Notitie

    Momenteel zijn edge en chrome de enige ondersteunde browsertypen voor foutopsporing.

    Wanneer u de sessie beëindigt, blijft het Node-proces standaard worden uitgevoerd. Het proces wordt opzettelijk uitgevoerd wanneer een browser het foutopsporingsdoel is. Als er alleen werk wordt uitgevoerd op de front-end, vereenvoudigt het continu uitvoeren van het back-endproces de ontwikkelwerkstroom.

    Aan het begin van deze sectie, sloot u het achtergebleven terminalvenster zodat u onderbrekingspunten in het Node-proces kunt instellen. Als u visual Studio wilt inschakelen om fouten in het Node-proces op te sporen, moet het proces opnieuw worden gestart met het gekoppelde foutopsporingsprogramma. Als er een niet-debugbaar Node.js-proces blijft draaien, mislukt een poging om het Node.js-proces in debugmodus te starten (zonder de poort opnieuw te configureren) .

  4. Controleer de derde vermelding in het launch.json bestand. Deze vermelding geeft node op als het foutopsporingstype:

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

    Met de derde vermelding wordt alleen de Node-proces in foutopsporingsmodus gestart. Visual Studio start de browser niet.

  5. Bekijk de vierde vermelding in het launch.json-bestand, waarmee een samengestelde startconfiguratie wordt gedefinieerd:

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

    Deze samengestelde configuratie is hetzelfde als een samengestelde startconfiguratie van Visual Studio Code. Wanneer u deze configuratie selecteert, kunt u fouten opsporen in zowel de front-end als de back-end. U ziet dat de definitie alleen verwijst naar de afzonderlijke startconfiguraties voor de knooppunt- en browserprocessen.

    Er zijn veel andere kenmerken die u kunt gebruiken in een startconfiguratie. U kunt bijvoorbeeld een configuratie verbergen om deze te verwijderen uit de vervolgkeuzelijst Start, maar verwijzingen naar de configuratie toestaan door het kenmerk hidden in het presentation-object in te stellen op true:

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

  6. Configureer opties met behulp van ondersteunde kenmerken om uw foutopsporingservaring te verbeteren. Op dit moment worden alleen lancering configuraties ondersteund. Elke poging om een koppel configuratie te gebruiken resulteert in een implementatiefout. Zie Optiesvoor meer informatie.