Outils pour ASP.NET Core Blazor

  • 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.

Cet article décrit les outils permettant de créer des applications Blazor sur différentes plateformes. Sélectionnez votre plateforme en haut de cet article.

Pour créer une application Blazor sur Windows, utilisez les instructions suivantes :

  • Installer la dernière version de Visual Studio avec la charge de travail Développement web et ASP.NET.

  • Créez un projet à l’aide de l’un des modèles Blazor disponibles :

    • Application web Blazor : crée une application web Blazor qui prend en charge le rendu interactif côté serveur (SSR interactif) et le rendu côté client (CSR). Le modèle d’application web Blazor est recommandé pour prendre en main Blazor et découvrir les fonctionnalités Blazor côté serveur et côté client.
    • Application Blazor WebAssembly autonome : crée une application web client autonome qui peut être déployée en tant que site statique.

Cliquez sur Suivant.

  • Installer la dernière version de Visual Studio avec la charge de travail Développement web et ASP.NET.

  • Créez un projet :

    • Pour une expérience Blazor Server, choisissez le modèle d’applicationBlazor Server, qui inclut le code de démonstration et Bootstrap, ou le modèle d’application videBlazor Server sans code de démonstration et démarrage. Cliquez sur Suivant.
    • Pour une expérience Blazor WebAssembly autonome, choisissez le modèle Application Blazor WebAssembly, qui inclut le code de démonstration et de démarrage, ou le modèle Application Blazor WebAssembly vide sans code de démonstration ni démarrage. Cliquez sur Suivant.

  • Installer la dernière version de Visual Studio avec la charge de travail Développement web et ASP.NET.

  • Créez un projet :

    • Pour une expérience Blazor Server, choisissez le modèle d’applicationBlazor Server. Sélectionnez Suivant.
    • Pour une expérience Blazor WebAssembly, choisissez le modèle d’applicationBlazor WebAssembly. Sélectionnez Suivant.
  • Indiquez un nom de projet et vérifiez que l’emplacement est correct.

Remarque

Les termes et concepts de rendu utilisés dans les instructions suivantes sont présentés dans les sections suivantes de l’article de vue d’ensemble des Principes de base :

Des instructions détaillées sur les modes de rendu sont fournies par l’article sur les modes de rendu Blazor ASP.NET Core.

  • Pour une application web Blazor dans la boîte de dialogue Informations supplémentaires :

    • Liste déroulante Mode de rendu interactif

      • Le rendu interactif côté serveur (SSR interactif) est activé par défaut avec l’option Serveur.
      • Pour activer uniquement l’interactivité avec le rendu côté client (CSR), sélectionnez l’option WebAssembly.
      • Pour activer les deux modes de rendu interactif et la possibilité de basculer automatiquement entre eux au moment de l’exécution, sélectionnez l’option de mode de rendu (automatique) Automatique (Serveur et WebAssembly).
      • Si l’interactivité est définie sur None, l’application générée n’a aucune interactivité. L’application est configurée uniquement pour le rendu statique côté serveur.

      Le mode de rendu interactif Automatique utilise initialement le SSR interactif tandis que l’ensemble d’applications .NET et le runtime sont téléchargés dans le navigateur. Une fois le runtime WebAssembly .NET activé, le mode de rendu bascule vers le rendu WebAssembly interactif.

      Par défaut, le modèle d’application web Blazor active le SSR statique et interactif en utilisant un seul projet. Si vous activez également le CSR, le projet inclut un projet client supplémentaire (.Client) pour vos composants basés sur WebAssembly. La sortie générée du projet client est téléchargée dans le navigateur et exécutée sur le client. Tous les composants utilisant les modes de rendu WebAssembly ou Automatique doivent être générés à partir du projet client.

      Pour plus d’informations, consultez Modes de rendu ASP.NET Core Blazor.

    • Liste déroulante Emplacement d’interactivité

      • Par page/composant : la valeur par défaut configure l’interactivité par page ou par composant.
      • Global : sélectionner cette option configure l’interactivité globalement pour l’ensemble de l’application.

      L’emplacement d’interactivité ne peut être défini que si le mode d’affichage interactif n’est pas None et que l’authentification n’est pas activée.

    • Pour inclure des pages d’exemples et une disposition basée sur le style Bootstrap, cochez la case Inclure les pages d’exemples. Désactivez cette option pour des projets sans exemples de pages et de style Bootstrap.

    Pour plus d’informations, consultez Modes de rendu ASP.NET Core Blazor.

  • Pour une application hébergéeBlazor WebAssembly, cochez la case ASP.NET Core hébergée dans la boîte de dialogue Informations supplémentaires.

  • Sélectionnez Créer.

  • Appuyez sur Ctrl+F5 (Windows) ou ⌘+F5 (macOS) pour exécuter l’application.

Lors de l’exécution d’une Blazor WebAssemblysolution hébergée dans Visual Studio, le projet de démarrage de la solution est le projet Server.

Pour plus d’informations sur l’approbation du certificat de développement HTTPS ASP.NET Core, consultez Appliquer HTTPS dans ASP.NET Core.

Important

Quand il s’agit d’exécuter une application Blazor WebAssembly hébergée, faites-le depuis le projet Server de la solution.

Lorsque l’application est lancée, seul le fichier Properties/launchSettings.json du projet Server est utilisé.

Pour créer une application Blazor sur Linux et macOS, utilisez les instructions suivantes :

Utilisez l’interface de ligne de commande (CLI) .NET pour exécuter des commandes dans un interpréteur de commandes.

Installez la version la plus récente du SDK .NET Core. Si vous avez déjà installé le Kit de développement logiciel (SDK), vous pouvez déterminer votre version installée en exécutant la commande suivante :

dotnet --version

Installez la dernière version de Visual Studio Code pour votre plateforme.

Installez le kit de développement C# pour Visual Studio Code. Pour plus d’informations, consultez Déboguer des applications Blazor ASP.NET Core.

Créez un projet :

  • Pour une expérience Web App Blazor avec un rendu interactif côté serveur par défaut, exécutez la commande suivante dans un interpréteur de commandes qui utilise le modèle de projet blazor :

    dotnet new blazor -o BlazorApp

    Pour activer uniquement le rendu côté client, utilisez l’option -int|--interactivity définie sur WebAssembly :

    dotnet new blazor -o BlazorApp -int WebAssembly

    Pour activer le rendu interactif côté serveur suivi du rendu côté client, définissez l’option -int|--interactivity sur Auto :

    dotnet new blazor -o BlazorApp -int Auto

    Si l’interactivité est désactivée en définissant l’option -int|--interactivity sur None, l’application générée n’a pas d’interactivité. L’application est configurée uniquement pour le rendu statique côté serveur :

    dotnet new blazor -o BlazorApp -int None

    Le mode de rendu interactif Automatique utilise initialement le rendu interactif côté serveur (SSR) tandis que l’ensemble d’applications .NET et le runtime sont téléchargés dans le navigateur. Une fois le runtime WebAssembly .NET activé, le mode de rendu bascule vers le mode de rendu WebAssembly interactif.

    Par défaut, le modèle d’application web Blazor active le rendu statique et interactif côté serveur en utilisant un seul projet. Si vous activez également le mode de rendu WebAssembly interactif, le projet inclut un projet client supplémentaire (.Client) pour vos composants basés sur WebAssembly. La sortie générée du projet client est téléchargée dans le navigateur et exécutée sur le client. Tous les composants utilisant les modes de rendu WebAssembly interactif ou Automatique interactif doivent être générés à partir du projet client.

    Pour plus d’informations, consultez Modes de rendu ASP.NET Core Blazor.

    Les applications utilisent l’emplacement d’interactivité par composant/page par défaut. Pour établir une interactivité dans l’ensemble de l’application, utilisez l’option -ai|--all-interactive :

    dotnet new blazor -o BlazorApp -ai

    Sélectionner cette option définit l’interactivité pour l’ensemble de l’application dans le composant App en spécifiant un mode de rendu pour les composants HeadOutlet et Routes de niveau supérieur. La définition de l’interactivité sur ces composants propage l’interactivité à tous les composants enfant de l’application.

    L’emplacement d’interactivité ne peut être défini que si le mode d’affichage interactif (-int|--interactivity) n’est pas None et que l’authentification n’est pas activée.

    Pour créer une application sans exemples de pages et de style, utilisez l’option -e|--empty :

    dotnet new blazor -o BlazorApp -e

  • Pour une expérience Blazor WebAssembly autonome, exécutez la commande suivante dans un interpréteur de commandes qui utilise le modèle blazorwasm :

    dotnet new blazorwasm -o BlazorApp

    Pour créer une application Blazor WebAssembly autonome sans exemples de pages et de style, utilisez l’option -e|--empty :

    dotnet new blazorwasm -o BlazorApp -e

Créez un projet :

  • Pour une expérience Blazor Server avec le code de démonstration et Bootstrap, exécutez la commande suivante :

    dotnet new blazorserver -o BlazorApp

  • Vous pouvez également créer une application Blazor Server sans code de démonstration et Bootstrap à l’aide du modèle de projet blazorserver-empty :

    dotnet new blazorserver-empty -o BlazorApp

  • Pour une expérience Blazor WebAssembly autonome avec le code de démonstration et de démarrage, exécutez la commande suivante :

    dotnet new blazorwasm -o BlazorApp

  • Vous pouvez également créer une application Blazor WebAssembly autonome sans code de démonstration ni de démarrage à l’aide du modèle de projet blazorwasm-empty :

    dotnet new blazorwasm-empty -o BlazorApp

  • Pour une expérience Blazor WebAssembly hébergée avec le code de démonstration et Bootstrap, ajoutez l’option hébergée (-ho/--hosted) à la commande :

    dotnet new blazorwasm -o BlazorApp -ho

  • Vous pouvez également créer une application Blazor WebAssembly hébergée sans code de démonstration et Bootstrap à l’aide du modèle blazorwasm-empty avec l’option hébergée :

    dotnet new blazorwasm-empty -o BlazorApp -ho

Créez un projet :

  • Pour une expérience Blazor WebAssembly, exécutez la commande suivante :

    dotnet new blazorwasm -o BlazorApp

  • Pour une expérience hébergée Blazor WebAssembly, ajoutez l’option hébergée (-ho ou --hosted) à la commande :

    dotnet new blazorwasm -o BlazorApp -ho

  • Pour une expérience Blazor Server, exécutez la commande suivante :

    dotnet new blazorserver -o BlazorApp

Ouvrez le dossier BlazorApp dans Visual Studio Code.

Lorsque Visual Studio Code vous demande d’ajouter des ressources pour générer et déboguer le projet, sélectionnez Oui.

Si Visual Studio Code ne propose pas automatiquement d’ajouter des ressources de build et de débogage, (le dossier .vscode avec les fichiers launch.json ettasks.json), sélectionnez Afficher>Palette de commandes et tapez « .NET » dans la zone de recherche. Dans la liste des commandes, sélectionnez la commande « .NET: Generate Assets for Build and Debug ».

Remarque

Pour plus d’informations sur la configuration et l’utilisation de Visual Studio Code, consultez la documentation de Visual Studio Code.

Le fichier Properties/launchSettings.json du projet inclut la propriété inspectUri pour le proxy de débogage pour tous les profils de la section profiles du fichier :

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

Lancement hébergé Blazor WebAssembly et configuration des tâches

Pour les Blazor WebAssemblysolutions hébergées, ajoutez (ou déplacez) le dossier .vscode avec les fichiers launch.json et tasks.json dans le dossier parent de la solution, qui est le dossier qui contient les dossiers de projet standard : Client, Server et Shared. Mettez à jour ou vérifiez que la configuration dans les fichiers launch.json et tasks.json exécute une application Blazor WebAssembly hébergée à partir du projet Server.

Important

Quand il s’agit d’exécuter une application Blazor WebAssembly hébergée, faites-le depuis le projet Server de la solution.

Lorsque l’application est lancée, seul le fichier Properties/launchSettings.json du projet Server est utilisé.

Examinez le fichier Properties/launchSettings.json et déterminez l’URL de l’application à partir de la propriété applicationUrl. Selon la version de l’infrastructure, le protocole d’URL est sécurisé (HTTPS) https://localhost:{PORT} ou non sécurisé (HTTP) http://localhost:{PORT}, où l’espace réservé {PORT} est un port affecté. Notez l’URL à utiliser dans le fichier launch.json .

Dans la configuration de lancement du fichier .vscode/launch.json :

  • Définissez le répertoire de travail actuel (cwd) sur le dossier du projet Server.
  • Indiquez l’URL de l’application avec la propriété url. Utilisez la valeur enregistrée précédemment à partir du fichier Properties/launchSettings.json.
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Dans la configuration précédente :

  • L’espace réservé {SERVER APP FOLDER} est le dossier du projet Server, généralement Server.
  • L’espace réservé {URL} est l’URL de l’application, qui est spécifiée dans le fichier Properties/launchSettings.json de l’application dans la propriété applicationUrl.

Si Google Chrome est préféré à Microsoft Edge, mettez à jour ou ajoutez une propriété supplémentaire de "browser": "chrome" à la configuration.

L’exemple suivant .vscode/launch.json fichier :

  • Définit le répertoire de travail actuel sur le dossier Server.
  • Définit l’URL de l’application sur http://localhost:7268.
  • Modifie le navigateur par défaut de Microsoft Edge vers Google Chrome.
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Fichier .vscode/launch.json complet :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

Dans .vscode/tasks.json, ajoutez un argument build qui spécifie le chemin d’accès au fichier projet de l’application Server :

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

Dans l’argument précédent :

  • L’espace réservé {SERVER APP FOLDER} est le dossier du projet Server, généralement Server.
  • L’espace réservé {PROJECT NAME} est le nom de l’application, généralement basé sur le nom de la solution suivi de .Server dans une application générée à partir du modèle de projet Blazor WebAssembly.

Un exemple de fichier .vscode/tasks.json avec un projet Server nommé BlazorHosted dans le dossier Server de la solution :

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

Appuyez sur Ctrl+F5 (Windows) ou ⌘+F5 (macOS) pour exécuter l’application.

Remarque

Seul le débogage de navigateur est pris en charge pour l’instant.

Vous ne pouvez pas reconstruire automatiquement l’application back-end Server d’une solution hébergée Blazor WebAssembly pendant le débogage, par exemple en exécutant l’application avec dotnet watch run.

.vscode/launch.json (configuration launch) :

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

Dans la configuration précédente du répertoire de travail actuel (cwd), l’espace réservé {SERVER APP FOLDER} est le dossier du projet Server, généralement «Server».

Si Microsoft Edge est utilisé et que Google Chrome n’est pas installé sur le système, ajoutez une propriété supplémentaire de "browser": "edge" à la configuration.

Exemple pour un dossier de projet de Server et qui génère Microsoft Edge en tant que navigateur pour le débogage s’exécute au lieu du navigateur par défaut Google Chrome :

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (Arguments de la commande dotnet) :

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

Dans l’argument précédent :

  • L’espace réservé {SERVER APP FOLDER} est le dossier du projet Server, généralement «Server».
  • L’espace réservé {PROJECT NAME} est le nom de l’application, généralement basé sur le nom de la solution suivi de «.Server» dans une application générée à partir du modèle de projet Blazor.

L’exemple suivant du tutoriel pour l’utilisation de SignalR avec une application Blazor WebAssembly utilise un nom de dossier de projet de Server et un nom de projet deBlazorWebAssemblySignalRApp.Server :

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Appuyez sur Ctrl+F5 (Windows) ou ⌘+F5 (macOS) pour exécuter l’application.

Approuver un certificat de développement

Pour plus d’informations, consultez Appliquer HTTPS dans ASP.NET Core.

Fichier de solution Visual Studio (.sln)

Une solution est un conteneur pour organiser un ou plusieurs projets de code associés. Visual Studio utilise un fichier de solution (.sln) pour stocker les paramètres d’une solution. Les fichiers solution utilisent un format unique et ne sont pas destinés à être modifiés directement.

Les outils en dehors de Visual Studio peuvent interagir avec les fichiers de solution :

  • L’interface CLI .NET peut créer des fichiers solution et répertorier/modifier les projets dans les fichiers de solution via la dotnet sln commande. D’autres commandes CLI .NET utilisent le chemin d’accès du fichier solution pour diverses commandes de publication, de test et d’empaquetage.
  • Visual Studio Code peut exécuter la dotnet sln commande et d’autres commandes CLI .NET via son terminal intégré, mais n’utilise pas directement les paramètres d’un fichier solution.

Tout au long de la documentation Blazor, solution est utilisée pour décrire les applications créées à partir du modèle de projet Blazor WebAssembly avec l’option ASP.NET Core Hosted activée ou à partir d’un modèle de projet Blazor Hybrid. Les applications produites à partir de ces modèles de projet incluent un fichier de solution (.sln) par défaut. Pour les applications hébergées Blazor WebAssembly où le développeur n’utilise pas Visual Studio, le fichier de solution peut être ignoré ou supprimé s’il n’est pas utilisé avec des commandes CLI .NET.

Pour plus d’informations, consultez les ressources suivantes dans la documentation de Visual Studio :

Utiliser Visual Studio Code pour le développement multiplateforme Blazor

Visual Studio Code est un environnement de développement intégré (IDE) multiplateforme open source qui peut être utilisé pour développer des applications Blazor. Utilisez l’interface CLI .NET pour créer une application Blazor pour le développement avec Visual Studio Code. Pour plus d’informations, consultez la Version Linux/macOS de cet article.

Pour plus d’informations sur la configuration et l’utilisation de Visual Studio Code, consultez la documentation de Visual Studio Code.

Options de modèle Blazor

L’infrastructure Blazor fournit des modèles pour la création d’applications. Les modèles sont utilisés pour créer de nouveaux projets et solutions Blazor, quel que soit l’outil que vous sélectionnez pour le développement Blazor (Visual Studio, Visual Studio Code ou l’interface de ligne de commande (CLI).NET) :

  • BlazorModèle de projet Application web : blazor
  • Blazor WebAssembly Modèle de projet d’application autonome : blazorwasm
  • Modèles de projet Blazor Server : blazorserver, blazorserver-empty
  • Blazor WebAssemblymodèles de projet : blazorwasm, blazorwasm-empty
  • Blazor Server modèle de projet : blazorserver
  • Modèle de projet Blazor WebAssembly : blazorwasm

Pour plus d’informations sur les modèles de projet Blazor, consultez ASP.NET structure de projet principale Blazor.

Pour plus d’informations sur les options de modèle, consultez les ressources suivantes :

  • L’article Modèles .NET par défaut pour dotnet new de la documentation .NET Core :
  • Passage de l’option d’aide (-h ou --help) à la commande CLI dotnet new dans un interpréteur de commandes :
    • dotnet new blazor -h
    • dotnet new blazorwasm -h
  • L’article Modèles .NET par défaut pour dotnet new de la documentation .NET Core :
  • Passage de l’option d’aide (-h ou --help) à la commande CLI dotnet new dans un interpréteur de commandes :
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h
  • L’article Modèles .NET par défaut pour dotnet new de la documentation .NET Core :
  • Passage de l’option d’aide (-h ou --help) à la commande CLI dotnet new dans un interpréteur de commandes :
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Ressources supplémentaires