kurz: vytvoření aplikace ASP.NET Core s React v Visual Studio

  • Článek
  • 2 min ke čtení

v tomto článku se naučíte, jak sestavit ASP.NET Core projekt, který bude fungovat jako back-end rozhraní API, a React projekt, který bude fungovat jako uživatelské rozhraní.

v současné době Visual Studio zahrnuje ASP.NET Core šablony jednostránkové aplikace (SPA), které podporují Angular a React. šablony poskytují vestavěnou složku klientské aplikace v projektech ASP.NET Core, které obsahují základní soubory a složky každého rozhraní.

počínaje verzí Visual Studio 2022 Preview 2 můžete pomocí metody popsané v tomto článku vytvářet ASP.NET Core jednostránkové aplikace, které:

  • umístěte klientskou aplikaci do samostatného projektu mimo ASP.NET Core projekt.
  • Vytvořte projekt klienta na základě rozhraní CLI nainstalovaného v počítači.

Poznámka

V současné době musí být projekt front-endu publikován ručně (aktuálně není podporován nástrojem publikování). Další informace najdete v tématu https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135 .

Požadavky

Ujistěte se, že máte nainstalované následující:

  • Visual Studio 2022 Preview 2 nebo novější s nainstalovanou úlohou vývoj ASP.NET a webu . pokud ji chcete nainstalovat zdarma, navštivte stránku Visual Studio ke stažení . pokud potřebujete nainstalovat úlohu a již Visual Studio, pokračujte v nabídce nástroje > získat nástroje a funkce..., čímž se otevře Instalační program pro Visual Studio. zvolte úlohu vývoje ASP.NET a webu a pak zvolte možnost upravit.
  • NPM ( https://www.npmjs.com/ )
  • npx ( https://www.npmjs.com/package/npx )

Vytvoření aplikace front-endu

  1. v dialogovém okně nový Project vyberte vytvořit nový projekt.

    Vytvoření nového projektu

  2. na panelu hledání v horní části vyhledejte React a pak vyberte samostatnou šablonu React javascriptu. (samostatná šablona typescriptu React v tuto chvíli není v tomto kurzu podporovaná.)

    Volba šablony

  3. Zadejte název projektu a řešení. po zobrazení okna další informace nezapomeňte zaškrtnout možnost přidat integraci pro prázdné ASP.NET webové rozhraní API Project . tato možnost přidá soubory do šablony React, aby ji bylo možné připojit později k projektu ASP.NET Core.

    Další informace

    Po vytvoření projektu se zobrazí některé nové a upravené soubory:

    • aspnetcore-https.js
    • aspnetcore-react.js
    • setupProxy.js
    • App.js (upraveno)
    • App.test.js (upraveno)

Vytvoření back-endu aplikace

  1. V Průzkumníku řešení klikněte pravým tlačítkem myši na název řešení, najeďte myší na Přidat a pak vyberte Nový Project.

    Přidat nový projekt

  2. vyhledejte a vyberte projekt webového rozhraní API ASP.NET Core.

    Výběr šablony webového rozhraní API

  3. Zadejte název projektu a řešení. Až se dostanete do okna Další informace , vyberte .NET 6,0 jako cílové rozhraní.

    Po vytvoření projektu by Průzkumník řešení mělo vypadat takto:

    Podívejte se na Průzkumník řešení

Nastavení vlastností projektu

  1. klikněte pravým tlačítkem na projekt ASP.NET Core a vyberte vlastnosti.

    Otevřít vlastnosti projektu

  2. Přejděte do nabídky ladění a vyberte možnost otevřít profily spuštění ladění možnosti uživatelského rozhraní . Zrušte nastavení možnosti spustit prohlížeč .

    Otevřít uživatelské rozhraní pro otevření profilů spuštění ladění

  3. potom klikněte pravým tlačítkem na projekt React a vyberte nabídku vlastnosti a přejděte do části ladění . Změňte ladicí program tak, aby se spustil pro možnost Launch. JSON .

    Zvolit ladicí program (Launch. JSON)

Nastavení spouštěného projektu

  1. Klikněte pravým tlačítkem na řešení a vyberte nastavit spouštěcí Project. Změňte spouštěný projekt z jednoho spouštěného projektu na více projektů po spuštění. Vyberte možnost Spustit pro každou akci projektu.

  2. V dalším kroku vyberte back-end projekt a přesuňte ho nad front-end, aby se spouštěl jako první.

    Výběr spouštěného projektu

Spuštění projektu

  1. Před zahájením projektu se ujistěte, že se čísla portů shodují. v ASP.NET Core projektu (ve složce Properties ) otevřete soubor launchSettings. json . Získá číslo portu z applicationUrl Vlastnosti.

    Pokud existuje více applicationUrl vlastností, hledejte je pomocí https koncového bodu. Měl by vypadat podobně jako https://localhost:7049 .

  2. potom pro projekt React klikněte na setupProxy.js soubor (podívejte se do složky src ). Aktualizujte vlastnost target tak, aby odpovídala applicationUrl vlastnosti v launchSettings. JSON.

  3. Chcete-li spustit projekt, stiskněte klávesu F5 nebo vyberte tlačítko Start v horní části okna. Zobrazí se dva příkazové výzvy:

  • spuštěný projekt rozhraní API ASP.NET Core
  • NPM spuštění příkazu reakce-Scripts Start

měla by se zobrazit React aplikace, která se naplní přes rozhraní API.

Řešení potíží

Může se zobrazit následující chyba:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Pokud se zobrazí tento problém, pravděpodobně byl front-end spuštěn před back-endu. po zobrazení příkazového řádku se systémem back-end v prohlížeči stačí aktualizovat aplikaci React.