Utiliser le modèle de projet React avec ASP.NET Core

Le modèle de projet React mis à jour fournit un point de départ pratique pour les applications ASP.NET Core utilisant les conventions React et create-react-app (CRA) pour implémenter une interface utilisateur (IU) côté client enrichie.

Le modèle revient à créer un projet ASP.NET Core faisant office de backend d’API et un projet React CRA standard en guise d’interface utilisateur, qu’il héberge tous deux dans un projet d’application unique pouvant être généré et publié en tant qu’unité unique.

Le modèle de projet REACT n’est pas destiné au rendu côté serveur (SSR). Pour SSR avec REACT et Node.js, envisagez Next.js ou Razzle.

Créer une application

Si ASP.NET Core 2,1 ou version ultérieure est installé, il n’est pas nécessaire d’installer le modèle de projet REACT.

Créez un projet à partir d’une invite de commandes à l’aide de la commande dotnet new react dans un répertoire vide. Par exemple, les commandes suivantes créent l’application dans un répertoire my-new-app et basculent vers ce répertoire :

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

Exécutez l’application à partir de Visual Studio ou de CLI .NET Core :

Ouvrez le fichier .csproj généré, puis exécutez l’application normalement à partir de là.

Le processus de génération restaure les dépendances npm à la première exécution, ce qui peut prendre plusieurs minutes. Les générations suivantes sont beaucoup plus rapides.

Le modèle de projet crée une application ASP.NET Core et une application React. L’application ASP.NET Core est destinée à être utilisée pour tous les aspects liés au serveur, tels que l’accès aux données et l’autorisation. L’application React, qui réside dans le sous-répertoire ClientApp, est destinée à être utilisée pour tout ce qui touche l’interface utilisateur.

Ajouter des pages, des images, des styles, des modules, etc.

Le répertoire ClientApp est une application React CRA standard. Pour plus d’informations, consultez la documentation CRA officielle.

Il existe de légères différences entre l’application React créée par ce modèle et celle créée par CRA ; toutefois, les fonctionnalités de l’application sont identiques. L’application créée par le modèle contient une mise en page basée sur Bootstrap et un exemple de routage de base.

Installer les packages npm

Pour installer des packages npm tiers, utilisez une invite de commandes dans le sous-répertoire ClientApp. Par exemple :

cd ClientApp
npm install --save <package_name>

Publier et déployer

Pendant le développement, l’application s’exécute en mode optimisé pour des raisons pratiques. Par exemple, les bundles JavaScript incluent des mappages de sources (ce qui vous permet de voir votre code source d’origine pendant le débogage). L’application se recompile et se recharge automatiquement en cas de modification des fichiers JavaScript, HTML et CSS sur le disque.

Dans un environnement de production, fournissez une version de votre application qui est optimisée pour les performances. Ce comportement est configuré pour se produire automatiquement. Quand vous publiez, la configuration de build émet une build transpilée réduite de votre code côté client. Contrairement à la build de développement, la build de production n’a pas besoin que Node.js soit installé sur le serveur.

Vous pouvez utiliser des méthodes d’hébergement et de déploiement ASP.NET Core standard.

Exécuter le serveur CRA indépendamment

Le projet est configuré pour démarrer sa propre instance du serveur de développement CRA en arrière-plan quand l’application ASP.NET Core démarre en mode de développement. Ainsi, vous n’êtes pas obligé d’exécuter un serveur distinct manuellement.

Cette configuration par défaut présente un inconvénient. Chaque fois que vous modifiez votre code C# et que votre application ASP.NET Core doit redémarrer, le serveur CRA redémarre. Quelques secondes sont nécessaires avant de démarrer la sauvegarde. Si vous apportez des modifications fréquentes au code C# et que vous ne souhaitez pas attendre que le serveur CRA redémarre, exécutez ce dernier en externe, indépendamment du processus ASP.NET Core. Pour cela, procédez de la façon suivante :

  1. Ajoutez un fichier . env au sous-répertoire ClientApp avec le paramètre suivant :

    BROWSER=none
    

    Cela empêchera votre navigateur Web de s’ouvrir lors du démarrage du serveur arc en externe.

  2. Dans une invite de commandes, basculez vers le sous-répertoire ClientApp et lancez le serveur de développement CRA :

    cd ClientApp
    npm start
    
  3. Modifiez votre application ASP.NET Core afin qu’elle utilise l’instance de serveur CRA externe au lieu de lancer une instance propre. Dans votre classe Startup, remplacez l’appel spa.UseReactDevelopmentServer par ce qui suit :

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

Quand vous démarrez votre application ASP.NET Core, celle-ci ne lance pas un serveur CRA. L’instance que vous avez démarrée manuellement est utilisée à la place. Cela lui permet de démarrer et de redémarrer plus rapidement. Elle n’attend plus que votre application React soit systématiquement regénérée.

Important

« Rendu côté serveur » n’est pas une fonctionnalité prise en charge de ce modèle. L’objectif de ce modèle est de respecter la parité avec « Create-REACT-App ». Ainsi, les scénarios et les fonctionnalités qui ne sont pas inclus dans un projet « Create-REACT-App » (par exemple, SSR) ne sont pas pris en charge et sont laissés en tant qu’exercice pour l’utilisateur.

Ressources supplémentaires