Outils pour ASP.NET Core Blazor

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

  • Blazor Web App : 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 Blazor Web App est recommandé pour bien démarrer avec 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.

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

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.

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"
    }
  ]
}

.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",
    ...
],
...

Créez un projet :

• Accédez au répertoire à l’aide de la commande cd vers l’emplacement dans lequel vous souhaitez créer le dossier du projet (par exemple cd c:/users/Bernie_Kopell/Documents).

• Pour une expérience Blazor Web App avec le rendu interactif côté serveur par défaut (SSR interactif), exécutez la commande suivante :

  dotnet new blazor -o BlazorApp
  

• 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
  

Créez un projet :

• Accédez au répertoire à l’aide de la commande cd vers l’emplacement dans lequel vous souhaitez créer le dossier du projet (par exemple cd c:/users/Bernie_Kopell/Documents).

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

  dotnet new blazorserver -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
  

• 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
  

  Remarque

  Le modèle de projet Blazor WebAssembly hébergé n’est pas disponible dans ASP.NET Core 8.0 ou version ultérieure. Pour créer une application Blazor WebAssembly hébergée à l’aide d’un kit de développement logiciel (SDK) .NET 8.0 ou version ultérieure, passez l’option -f|--framework avec une version cible de .NET Framework 7.0 (net7.0) :

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

Créez un projet :

• Accédez au répertoire à l’aide de la commande cd vers l’emplacement dans lequel vous souhaitez créer le dossier du projet (par exemple cd c:/users/Bernie_Kopell/Documents).

• 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
  

  Remarque

  Le modèle de projet Blazor WebAssembly hébergé n’est pas disponible dans ASP.NET Core 8.0 ou version ultérieure. Pour créer une application Blazor WebAssembly hébergée à l’aide d’un SDK .NET 8.0 ou version ultérieure, passez l’option -f|--framework avec le moniker de framework cible (par exemple, net6.0) :

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

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

  dotnet new blazorserver -o BlazorApp