Kurz: Vytvoření aplikace Node.js a Express v sadě Visual Studio

V tomto článku se dozvíte, jak pomocí sady Visual Studio vytvořit jednoduchou webovou aplikaci Node.js, která používá architekturu Express.

Než začnete, podívejte se na stručné nejčastější dotazy, které vás seznámí s některými klíčovými koncepty:

• Co je Node.js?

  Node.js je prostředí javascriptového modulu runtime na straně serveru, které spouští kód JavaScriptu.

• Co je npm?

  Správce balíčků usnadňuje používání a sdílení knihoven zdrojového kódu Node.js. Výchozí správce balíčků pro Node.js je npm. Správce balíčků npm zjednodušuje instalaci, aktualizaci a odinstalaci knihoven.

• Co je Express?

  Express je serverová architektura webových aplikací, kterou Node.js používá k vytváření webových aplikací. S Expressem existuje mnoho různých způsobů, jak vytvořit uživatelské rozhraní. Implementace poskytovaná v tomto kurzu používá k vykreslení front-endu výchozí modul šablon generátoru aplikací Express s názvem Pug.

Požadavky

Nezapomeňte nainstalovat následující:

• Visual Studio 2022 verze 17.4 nebo novější s nainstalovanou úlohou vývoje pro ASP.NET a web . Přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma. Pokud potřebujete nainstalovat úlohu a už visual Studio máte, přejděte na Nástroje>Get Tools and Features..., čímž se otevře Instalační program pro Visual Studio. Zvolte ASP.NET a úlohu vývoje webu a pak zvolte Upravit.
• npm (https://www.npmjs.com/), který je součástí Node.js
• npx (https://www.npmjs.com/package/npx)

Vytvoření aplikace

1. V okně Start (otevření zvolte Okno Spustit soubor>) vyberte Vytvořit nový projekt.

   

2. Na panelu hledání v horní části vyhledejte Express a pak vyberte JavaScript Express Application.

   

3. Pojmenujte projekt a řešení.

Zobrazení vlastností projektu

Výchozí nastavení projektu umožňuje sestavit a ladit projekt. Pokud ale potřebujete změnit nastavení, klikněte pravým tlačítkem myši na projekt v Průzkumník řešení, vyberte Vlastnosti a pak přejděte do části Sestavení nebo ladění.

Sestavení projektu

Zvolte Sestavit>řešení pro sestavení a sestavte projekt.

Spuštění aplikace

Stiskněte klávesu F5 nebo vyberte tlačítko Start v horní části okna a zobrazí se příkazový řádek:

• npm se spuštěným příkazem node ./bin/www

Dále by se měla zobrazit základní aplikace Express.

Ladění aplikace

Teď si projdeme několik způsobů, jak můžete ladit aplikaci.

Nejprve, pokud je vaše aplikace stále spuštěná, stiskněte Shift + F5 nebo vyberte červené tlačítko zastavení v horní části okna, aby se zastavila aktuální relace. Můžete si všimnout, že zastavení relace zavře prohlížeč zobrazující vaši aplikaci, ale ponechá okno příkazového řádku se spuštěným procesem Node. Prozatím pokračujte a zavřete všechny přetrvání příkazových výzev. Dále v tomto článku popisujeme, proč můžete chtít nechat proces Node spuštěný.

Ladění procesu uzlu

V rozevíracím seznamu vedle tlačítka Start by se měly zobrazit následující možnosti spuštění:

• localhost (Edge)
• localhost (Chrome)
• Ladění vývojového prostředí Env
• Spuštění uzlu a prohlížeče

Pokračujte a vyberte možnost Spustit uzel a prohlížeč . Před opětovným stisknutím klávesy F5 nebo opětovným výběrem tlačítka Start nastavte zarážku v souboru index.js (ve složce trasy) výběrem levého hřbetu před následujícím řádkem kódu:res.render('index', { title: 'Express' });

Pak stiskněte klávesu F5 nebo vyberte> Spustit ladění a spusťte ladění aplikace.

Na zarážce, kterou jste právě nastavili, by se měl zobrazit pozastavení ladicího programu. Když je pozastavený, můžete zkontrolovat stav aplikace. Když najedete myší na proměnné, můžete prozkoumat jejich vlastnosti.

Po dokončení kontroly stavu pokračujte stisknutím klávesy F5 a aplikace by se měla načíst podle očekávání.

Když se tentokrát zastavíte, všimnete si, že prohlížeč i okna příkazového řádku se zavře. Pokud chcete zjistit proč, podívejte se blíže na soubor launch.json.

Principy souboru launch.json

Soubor launch.json se aktuálně nachází ve složce .vscode . Pokud v Průzkumník řešení nevidíte složku .vscode, vyberte Zobrazit všechny soubory.

Pokud jste dříve pracovali se sadou Visual Studio Code, soubor launch.json bude vypadat dobře. Soubor launch.json zde funguje podobně jako v editoru Visual Studio Code k označení spouštěcích konfigurací používaných k ladění. Každá položka určuje jeden nebo více cílů, které se mají ladit.

První dvě položky jsou položky prohlížeče a měly by vypadat přibližně takto:

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

Ve výše uvedených položkách můžete vidět, že type je nastavená na typ prohlížeče. Pokud spustíte pouze typ prohlížeče jako jediný cíl ladění, Visual Studio bude ladit pouze front-endový proces prohlížeče a proces Node se spustí bez připojeného ladicího programu, což znamená, že všechny zarážky nastavené v procesu Node nebudou svázané.

Po zastavení relace bude proces Node i nadále spuštěný. Záměrně se spustí, když je cílem ladění prohlížeč, protože pokud se práce provádí výhradně na front-endu, proces back-endu nepřetržitě spouští pracovní postup vývoje.

Na začátku této části jste zavřeli okno příkazového řádku, aby se v procesu Node nastavily zarážky. Aby byl proces Node možné ladit, musí se restartovat pomocí připojeného ladicího programu. Pokud je spuštěný neladitelný proces uzlu, pokus o spuštění procesu Node v režimu ladění (bez překonfigurování portu) selže.

Třetí položka v souboru launch.json určuje node jako typ ladění a měla by vypadat přibližně takto:

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

Tato položka spustí pouze proces Node v režimu ladění. Nespouštějí se žádné prohlížeče.

Čtvrtá položka zadaná v souboru launch.json* je následující složená konfigurace spuštění.

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

Tato složená konfigurace je stejná jako konfigurace spouštění složeného kódu vscode a výběr umožňuje ladit front-end i back-end. Vidíte, že jednoduše odkazuje na jednotlivé spouštěcí konfigurace pro procesy node a prohlížeče.

V konfiguraci spuštění můžete použít mnoho dalších atributů. Můžete například skrýt konfiguraci z rozevíracího seznamu, ale přesto ji mít odkazovat, nastavením hidden atributu v objektu presentation na true.

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

Kliknutím na Možnosti zobrazíte seznam atributů, které můžete použít k vylepšení prostředí ladění. Upozorňujeme, že v tuto chvíli se podporují pouze spouštěcí konfigurace. Při každém pokusu o použití konfigurace připojení dojde k selhání nasazení.