Použití šablony React projektu s ASP.NET Core

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

Aktualizovaná šablona projektu React poskytuje pohodlný výchozí bod pro aplikace ASP.NET Core pomocí React a konvencí pro vytváření aplikací (CRA), které implementují bohaté uživatelské rozhraní na straně klienta.

Šablona je ekvivalentní k vytvoření projektu ASP.NET Core, který bude fungovat jako back-end rozhraní API, a standardní projekt CRA React, který bude fungovat jako uživatelské rozhraní, ale s výhodou hostování obou v jednom projektu aplikace, který lze vytvořit a publikovat jako jednu jednotku.

Šablona React projektu není určena pro vykreslování na straně serveru (SSR). V případě SSR s React a Node.js zvažte Next.js nebo Razzle.

Vytvoření nové aplikace

Pokud máte nainstalovanou ASP.NET Core 2.1 nebo novější, není nutné instalovat šablonu React projektu.

Na příkazovém řádku vytvořte nový projekt pomocí příkazu dotnet new react v prázdném adresáři. Například následující příkazy vytvoří aplikaci v adresáři my-new-app a přepněte do tohoto adresáře:

dotnet new react -o my-new-app
cd my-new-app

Spusťte aplikaci z Visual Studio nebo .NET Core CLI:

Otevřete vygenerovaný soubor .csproj a spusťte aplikaci jako obvykle.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Následná sestavení jsou mnohem rychlejší.

Šablona projektu vytvoří aplikaci ASP.NET Core a React aplikaci. Aplikace ASP.NET Core určená k přístupu k datům, autorizaci a dalším obavám na straně serveru. Aplikace React, která se nachází v podadresáři ClientApp, je určená pro všechny záležitosti uživatelského rozhraní.

Přidání stránek, obrázků, stylů, modulů atd.

Adresář ClientApp je standardní React CRA. Další informace najdete v oficiální dokumentaci k CAT.

Mezi aplikací vytvořenou touto šablonou a React, kterou vytvořila samotná aplikace CRA, jsou drobné rozdíly. Možnosti aplikace se ale nemění. Aplikace vytvořená šablonou obsahuje rozložení založené na bootstrapua základní příklad směrování.

Instalace balíčků npm

Pokud chcete nainstalovat balíčky npm třetích stran, použijte příkazový řádek v podadresáři ClientApp. Například:

cd ClientApp
npm install --save <package_name>

Publikování a nasazení

Při vývoji se aplikace spouští v režimu optimalizovaném pro usnadnění vývojářů. Například sady JavaScriptu obsahují zdrojové mapy (takže při ladění můžete vidět původní zdrojový kód). Aplikace sleduje změny souborů JavaScriptu, HTML a CSS na disku a automaticky se znovu zkompiluje a znovu načte, když se tyto soubory změní.

V produkčním prostředí služte verzi vaší aplikace, která je optimalizovaná pro výkon. To je nakonfigurované tak, aby k tomu došlo automaticky. Při publikování vysílá konfigurace sestavení minifikované, transpilované sestavení kódu na straně klienta. Na rozdíl od sestavení pro vývoj nevyžaduje produkční sestavení, Node.js na serveru nainstalované.

Můžete použít standardní metody ASP.NET Core hostování a nasazení.

Spusťte server CRA nezávisle na sobě.

Projekt je nakonfigurovaný tak, aby při spuštění aplikace pro vývoj ASP.NET Core na pozadí vlastní instanci vývojového serveru CRA. To je praktické, protože to znamená, že nemusíte spouštět samostatný server ručně.

Toto výchozí nastavení má nevýhodu. Pokaždé, když upravíte kód C# a vaše ASP.NET Core aplikace se musí restartovat, server CRA se restartuje. K zahájení zálohování se vyžaduje několik sekund. Pokud často upravujete kód c# a nechcete čekat, až se server CRA restartuje, spusťte server CRA externě, nezávisle na procesu ASP.NET Core počítače. Postupujte následovně:

  1. Přidejte soubor .env do podadresáře ClientApp s následujícím nastavením:

    BROWSER=none

    Zabráníte tak externímu otevření webového prohlížeče při externím spuštění serveru CRA.

  2. V příkazovém řádku přepněte do podadresáře ClientApp a spusťte vývojový server CRA:

    cd ClientApp
npm start

  3. Upravte svou ASP.NET Core tak, aby místo spouštění vlastní instance serveru CRA místo používání externí instance. Ve třídě Startup nahraďte spa.UseReactDevelopmentServer vyvolání následujícím kódem:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

Když spustíte svou ASP.NET Core, nespustí se server CRA. Místo toho se použije instance, kterou jste s zahájili ručně. To umožňuje rychlejší spuštění a restartování. Už nečeká, až se React aplikace pokaždé znovu sestaví.

Důležité

Vykreslování na straně serveru není podporovanou funkcí této šablony. Naším cílem této šablony je dosáhnout parity s "create-react-app". Scénáře a funkce, které nejsou zahrnuté v projektu "create-react-app" (například SSR), se proto nepodporují a jsou ponechány jako cvičení pro uživatele.

Další materiály