Herramientas para ASP.NET Core Blazor

• Instala la versión más reciente de Visual Studio con la carga de trabajo Desarrollo de ASP.NET y web.

• Crea un proyecto con una de las plantillas disponibles Blazor:

  • Blazor Web App: crea una aplicación web Blazor que admite la representación interactiva del lado servidor (SSR interactivo) y la representación del lado cliente (CSR). Se recomienda la plantilla de Blazor Web App para empezar a trabajar con Blazor para obtener información sobre las características Blazor del lado servidor y del lado cliente.
  • Blazor WebAssembly Aplicación independiente: crea una aplicación web cliente independiente que se puede implementar como un sitio estático.

Selecciona Siguiente.

• Instala la versión más reciente de Visual Studio con la carga de trabajo Desarrollo de ASP.NET y web.

• Creación de un proyecto:

  • Para una experiencia de Blazor Server, elija la plantilla Blazor Server App, que incluye código de demostración y Bootstrap, o la plantilla Blazor Server App Empty sin código de demostración ni Bootstrap. Selecciona Siguiente.
  • Para obtener una experiencia independiente de Blazor WebAssembly, elija la plantilla Blazor WebAssembly App, que incluye código de demostración y Bootstrap, o la plantilla Blazor WebAssembly App Empty sin código de demostración ni Bootstrap. Selecciona Siguiente.

• Instala la versión más reciente de Visual Studio con la carga de trabajo Desarrollo de ASP.NET y web.

• Creación de un proyecto:

  • Para disfrutar de una experiencia de Blazor Server, elige la plantilla Aplicación Blazor Server. Selecciona Siguiente.
  • Para disfrutar de una experiencia de Blazor WebAssembly, elige la plantilla Aplicación Blazor WebAssembly. Selecciona Siguiente.

• Si se trata de una aplicación Blazor WebAssemblyhospedada, activa la casilla ASP.NET Core Hosted en el cuadro de diálogo Información adicional.

Configuración de inicio y tarea de aplicación Blazor WebAssembly hospedada

En el caso de las Blazor WebAssemblysoluciones hospedadas, agregue o mueva la carpeta .vscode con los archivos launch.json y tasks.json a la carpeta principal de la solución, que es la carpeta que contiene las carpeta de proyecto típicas: Client, Server y Shared. Actualice o confirme que la configuración de los archivos launch.json y tasks.json ejecuta una aplicación Blazor WebAssembly hospedada desde el proyecto Server .

Examine el archivo Properties/launchSettings.json y determine la dirección URL de la aplicación a partir de la propiedad applicationUrl. En función de la versión del marco, el protocolo URL es seguro (HTTPS) https://localhost:{PORT} o no (HTTP), http://localhost:{PORT}donde el marcador de posición {PORT} es un puerto asignado. Anote la dirección URL para usarla en el archivo launch.json.

En la configuración de inicio del archivo .vscode/launch.json:

• Establezca el directorio de trabajo actual (cwd) en la carpeta del proyecto Server .
• Indique la dirección URL de la aplicación con la propiedad url. Use el valor registrado anteriormente desde el archivo Properties/launchSettings.json.

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

En la configuración anterior:

• El marcador de posición {SERVER APP FOLDER} es la carpeta del proyecto Server , normalmente Server.
• El marcador de posición {URL} es la dirección URL de la aplicación, que se especifica en el archivo Properties/launchSettings.json de la aplicación de la propiedad applicationUrl.

Si se prefiere Google Chrome en lugar de Microsoft Edge, actualice o agregue una propiedad adicional de "browser": "chrome" a la configuración.

El siguiente archivo .vscode/launch.json de ejemplo:

• Establece el directorio de trabajo actual en la carpeta Server.
• Establece la dirección URL de la aplicación en http://localhost:7268.
• Cambia el explorador predeterminado de Microsoft Edge a Google Chrome.

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

El archivo .vscode/launch.json completo:

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

En .vscode/tasks.json, agregue un argumento build que especifique la ruta de acceso al archivo del proyecto de la aplicación Server :

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

En el argumento anterior:

• El marcador de posición {SERVER APP FOLDER} es la carpeta del proyecto Server, normalmente Server.
• El marcador de posición {PROJECT NAME} es el nombre de la aplicación, normalmente basado en el nombre de la solución seguido de .Server en una aplicación generada a partir de la plantilla de proyecto de Blazor WebAssembly.

Un archivo .vscode/tasks.json de ejemplo con un proyecto Server llamado BlazorHosted en la carpeta Server de la solución:

{
  "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 (configuración de launch):

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

En la configuración anterior para el directorio de trabajo actual (cwd), el marcador de posición {SERVER APP FOLDER} es la carpeta del proyecto Server , normalmente "Server".

Si se usa Microsoft Edge y Google Chrome no está instalado en el sistema, agregue una propiedad adicional de "browser": "edge" a la configuración.

Ejemplo de una carpeta de proyecto de Server que genera Microsoft Edge como explorador para las ejecuciones de depuración, en lugar del explorador predeterminado Google Chrome:

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

.vscode/tasks.json (argumentos del comando dotnet):

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

En el argumento anterior:

• El marcador de posición {SERVER APP FOLDER} es la carpeta del proyecto Server , normalmente "Server".
• El marcador de posición {PROJECT NAME} es el nombre de la aplicación, normalmente basado en el nombre de la solución seguido de ".Server" en una aplicación generada a partir de la plantilla de proyecto de Blazor.

En el ejemplo siguiente del tutorial para usar SignalR con una aplicación Blazor WebAssembly, se usa un nombre de carpeta de proyecto Server y un nombre de proyecto BlazorWebAssemblySignalRApp.Server:

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

Creación de un proyecto:

• Cambie con el comando cd al directorio donde desea crear la carpeta del proyecto (por ejemplo, cd c:/users/Bernie_Kopell/Documents).

• Para una experiencia de Blazor Web App con representación interactiva del lado servidor predeterminada (SSR interactiva), ejecuta el siguiente comando:

  dotnet new blazor -o BlazorApp
  

• Para obtener una experiencia de Blazor WebAssembly independiente, ejecute el siguiente comando en un shell de comandos que use la plantilla de blazorwasm:

  dotnet new blazorwasm -o BlazorApp
  

Creación de un proyecto:

• Cambie con el comando cd al directorio donde desea crear la carpeta del proyecto (por ejemplo, cd c:/users/Bernie_Kopell/Documents).

• Para una experiencia de Blazor Server con código de demostración y Bootstrap, ejecute el siguiente comando:

  dotnet new blazorserver -o BlazorApp
  

• Para obtener una experiencia de Blazor WebAssembly independiente con código de demostración y Bootstrap, ejecute el siguiente comando:

  dotnet new blazorwasm -o BlazorApp
  

• Para una experiencia hospedada de Blazor WebAssembly con código de demostración y Bootstrap, agregue la opción hospedada (-ho/--hosted) al comando:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Nota:

  La plantilla de proyecto hospedada Blazor WebAssembly no está disponible en ASP.NET Core 8.0 o posterior. Para crear una aplicación hospedada Blazor WebAssembly mediante un SDK .NET 8.0 o posterior, pasa la opción -f|--framework con una plataforma de destino 7.0 (net7.0):

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

Creación de un proyecto:

• Cambie con el comando cd al directorio donde desea crear la carpeta del proyecto (por ejemplo, cd c:/users/Bernie_Kopell/Documents).

• Para disfrutar de una experiencia de Blazor WebAssembly, ejecute el comando siguiente:

  dotnet new blazorwasm -o BlazorApp
  

• En el caso de una experiencia de Blazor WebAssembly hospedada, agregue la opción hospedada (-ho o --hosted) al comando:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Nota:

  La plantilla de proyecto hospedada Blazor WebAssembly no está disponible en ASP.NET Core 8.0 o posterior. Para crear una aplicación hospedada Blazor WebAssembly mediante un SDK .NET 8.0 o posterior, pasa la opción -f|--framework con el moniker de la plataforma de destino (por ejemplo, net6.0):

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

• Para disfrutar de una experiencia de Blazor Server, ejecute el comando siguiente:

  dotnet new blazorserver -o BlazorApp