Utiliser React avec ASP.NET Core

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

Visual Studio fournit des modèles de projet pour la création d’applications monopages (SPA) basées sur des infrastructures JavaScript telles que Angular, React et Vue qui ont un back-end ASP.NET Core. Ces modèles :

  • Créent une solution Visual Studio avec un projet front-end et un projet back-end.
  • Utilisent le type de projet Visual Studio pour JavaScript et TypeScript (.esproj) pour le front-end.
  • Utilisent un projet ASP.NET Core pour le back-end.

Les projets créés à l’aide des modèles Visual Studio peuvent être exécutés à partir de la ligne de commande sur Windows, Linux et macOS. Pour exécuter l’application, utilisez dotnet run --launch-profile https pour exécuter le projet de serveur. L’exécution du projet de serveur démarre automatiquement le serveur de développement JavaScript frontal. Le profil de lancement https est actuellement requis.

Tutoriel Visual Studio

Pour commencer, suivez le tutoriel Créer une application ASP.NET Core avec React dans la documentation Visual Studio.

Pour plus d’informations, consultez JavaScript et TypeScript dans Visual Studio

Modèles SPA ASP.NET Core

Visual Studio inclut des modèles de création d’applications ASP.NET Core avec un front-end JavaScript ou TypeScript. Ces modèles sont disponibles dans Visual Studio 2022 version 17.8 ou ultérieure sur laquelle est installée la charge de travail ASP.NET et développement web.

Les modèles Visual Studio de création d’applications ASP.NET Core avec un front-end JavaScript ou TypeScript offrent les avantages suivants :

  • Nettoyer la séparation de projet du front-end et du back-end.
  • Rester à jour des dernières versions de l’infrastructure front-end.
  • Intégrer le dernier outillage de commande en ligne de l’infrastructure front-end, tels que Vite.
  • Modèles pour JavaScript et TypeScript (uniquement TypeScript pour Angular).
  • Expérience de modification de code JavaScript et TypeScript enrichie.
  • Intégrer des outils de génération JavaScript au build .NET.
  • IU de gestion des dépendances npm.
  • Compatible avec le débogage et la configuration de lancement de Visual Studio Code.
  • Exécuter des tests unitaires front-end dans l’Explorateur de tests à l’aide d’infrastructures de tests JavaScript.

Modèles SPA ASP.NET Core hérités

Les versions antérieures du kit de développement logiciel (SDK) .NET incluaient ce que sont désormais des modèles hérités de création d’applications SPA avec ASP.NET Core. Pour obtenir une documentation sur ces modèles plus anciens, consultez la version ASP.NET Core 7.0 de l’Aperçu SPA et les articles Angular et React.

Le modèle de projet ASP.NET Core avec React fournit un point de départ pratique pour les applications ASP.NET Core utilisant React et Create React App (CRA) pour implémenter une interface utilisateur (IU) côté client enrichie.

Le modèle de projet est équivalent à la création d’un projet ASP.NET Core en tant qu’API web et d’un projet CRA React en tant qu’interface utilisateur. Cette combinaison de projets offre la commodité d’héberger les deux projets dans un seul projet ASP.NET Core qui peut être généré et publié en tant qu’unité unique.

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

Créer une application

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 <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 exécuter le serveur CRA en externe, basculez vers le sous-répertoire ClientApp dans une invite de commandes et lancez le serveur de développement de CRA :

cd ClientApp
npm start

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.

Configurer l’intergiciel de proxy pour SignalR

Pour plus d’informations, consultez http-proxy-middleware.

Ressources supplémentaires

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 d’utiliser Next.js ou Razzle.

Créer une application

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 :

  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 CRA 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

Le « rendu côté serveur » n’est pas une fonctionnalité prise en charge de ce modèle. Notre objectif avec ce modèle est d’atteindre la parité avec « create-react-app ». Par conséquent, les scénarios et fonctionnalités non inclus dans un projet « create-react-app » (par exemple, SSR) ne sont pas pris en charge et sont laissés pour servir d’exercice à l’utilisateur.

Configurer l’intergiciel de proxy pour SignalR

Pour plus d’informations, consultez http-proxy-middleware.

Ressources supplémentaires