Herramientas para ASP.NET Core Blazor

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión .NET 8 de este artículo.

En este artículo se describen las herramientas necesarias para compilar aplicaciones Blazor en varias plataformas. Seleccione una plataforma al comienzo de este artículo.

Para crear una aplicación de Blazor en Windows, siga estas instrucciones:

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

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

    • Blazor Aplicación web: crea una aplicación web Blazor que admite la representación interactiva del lado servidor (SSR interactiva) y la representación del lado cliente (CSR). Se recomienda la plantilla de aplicación web Blazor 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.

Seleccione Siguiente.

  • Instale 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. Seleccione 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. Seleccione Siguiente.

  • Instale 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, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.
    • Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Seleccione Siguiente.
  • Proporcione un Nombre del proyecto y confirme que el valor de Ubicación es correcto.

Nota:

Los términos y conceptos de representación que se usan en la siguiente guía se presentan en las secciones siguientes del artículo de introducción a los Aspectos básicos:

El artículo Modos de representación Blazor de ASP.NET Core proporciona una guía detallada sobre los modos de representación.

  • Para una aplicación web Blazor en el cuadro de diálogo Información adicional:

    • Lista desplegable del modo de representación interactiva

      • La representación interactiva del lado servidor (SSR interactiva) está habilitada de forma predeterminada con la opción Servidor.
      • Para habilitar solo la interactividad con la representación del lado cliente (CSR), seleccione la opción WebAssembly.
      • Para habilitar ambos modos de representación interactiva y la capacidad de cambiar automáticamente entre ellos en el runtime, seleccione la opción de modo de representación automática (Servidor y WebAssembly) (automático).
      • Si la interactividad se establece en None, la aplicación generada no tiene interactividad. La aplicación solo está configurada para la representación estática del lado servidor.

      El modo de representación Automático interactivo utiliza inicialmente la SSR interactiva mientras el lote de aplicaciones .NET y runtime se descargan en el explorador. Una vez activado el entorno de ejecución de WebAssembly de .NET, el modo de representación cambia a la representación de WebAssembly interactivo.

      De forma predeterminada, la plantilla de aplicación web de Blazor habilita la SSR estática e interactiva mediante un solo proyecto. Si también habilita el modo CSR, el proyecto incluye un proyecto de cliente adicional (.Client) para los componentes basados en WebAssembly. La salida compilada del proyecto de cliente se descarga en el explorador y se ejecuta en el cliente. Los componentes que usen los modos de representación automática o WebAssembly deben compilarse a partir del proyecto cliente.

      Para obtener más información, vea Modos de representación de Blazor de ASP.NET Core.

    • Lista desplegable de ubicación de interactividad

      • Por página o componente: el valor predeterminado configura la interactividad por página o por componente.
      • Global: al seleccionar esta opción, se configura la interactividad globalmente para toda la aplicación.

      La ubicación de interactividad solo se puede establecer si el modo de representación interactiva no es None y la autenticación no está habilitada.

    • Para incluir páginas de ejemplo y un diseño basado en el estilo Arranque, active la casilla Incluir páginas de ejemplo. Deshabilite esta opción para el proyecto sin páginas de ejemplo ni estilo Arranque.

    Para obtener más información, vea Modos de representación de Blazor de ASP.NET Core.

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

  • Seleccione Crear.

  • Presione Ctrl+F5 (Windows) o ⌘+F5 (macOS) para ejecutar la aplicación.

Al ejecutar una Blazor WebAssemblysolución hospedada en Visual Studio, el proyecto de inicio de la solución es Server.

Para obtener más información sobre la confianza en el certificado de desarrollo de HTTPS, consulte Aplicar HTTPS en ASP.NET Core.

Importante

Al ejecutar una aplicación hospedada Blazor WebAssembly, ejecute la aplicación desde el proyecto Server de la solución.

Cuando se inicia la aplicación, solo se usa el archivo Properties/launchSettings.json en el proyecto Server.

Para crear una aplicación de Blazor en Linux o macOS, siga estas instrucciones:

Use la interfaz de la línea de comandos (CLI) de .NET para ejecutar comandos en un shell de comandos.

Instale la última versión del SDK de .NET Core. Si ya ha instalado el SDK anteriormente, puede averiguar la versión instalada ejecutando el comando siguiente:

dotnet --version

Instale la versión más reciente de Visual Studio Code para su plataforma.

Instale el kit de desarrollo de C# para Visual Studio Code. Para más información, vea Depuración de aplicaciones de BlazorASP.NET Core.

Creación de un proyecto:

  • Para una experiencia de aplicación web Blazor con representación interactiva del lado servidor predeterminada, ejecute el siguiente comando en un shell de comandos que use la plantilla de proyecto blazor:

    dotnet new blazor -o BlazorApp

    Para habilitar solo la representación del lado cliente, use la opción -int|--interactivity configurada en WebAssembly:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Para habilitar la representación interactiva del lado servidor seguida de la representación del lado cliente, use la opción -int|--interactivity establecida en Auto:

    dotnet new blazor -o BlazorApp -int Auto

    Si la interactividad está deshabilitada al establecer la opción -int|--interactivity en None, la aplicación generada no tiene interactividad. La aplicación solo está configurada para la representación estática del lado servidor:

    dotnet new blazor -o BlazorApp -int None

    El modo de representación Automático interactivo usa inicialmente la representación interactiva del lado del servidor (SSR interactiva) mientras que el lote de aplicaciones .NET y runtime se descargan en el explorador. Una vez activado el runtime de WebAssembly de .NET, el modo de representación cambia a WebAssembly interactivo.

    De forma predeterminada, la plantilla de aplicación web de Blazor admite la representación interactiva y estática del lado servidor mediante un solo proyecto. Si también habilita el modo de representación WebAssembly interactivo, el proyecto incluye un proyecto de cliente adicional (.Client) para los componentes basados en WebAssembly. La salida compilada del proyecto de cliente se descarga en el explorador y se ejecuta en el cliente. Los componentes que usen los modos de representación de WebAssembly interactivo o automática interactiva deben compilarse desde el proyecto de cliente.

    Para obtener más información, vea Modos de representación de ASP.NET CoreBlazor.

    Las aplicaciones predeterminadas son la ubicación de interactividad por componente o página. Para establecer la interactividad en toda la aplicación, use la opción -ai|--all-interactive:

    dotnet new blazor -o BlazorApp -ai

    Al seleccionar esta opción, se establece la interactividad para toda la aplicación del componente App especificando un modo de representación para los componentes HeadOutlet y Routes de nivel superior. Al establecer la interactividad en estos componentes, se propaga la interactividad a todos los componentes secundarios de la aplicación.

    La ubicación de interactividad solo se puede establecer si el modo de representación interactiva (-int|--interactivity) no es None y la autenticación no está habilitada.

    Para crear una aplicación sin páginas de ejemplo y estilos, use la opción -e|--empty:

    dotnet new blazor -o BlazorApp -e

  • 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

    Para crear una aplicación independiente Blazor WebAssembly sin páginas de ejemplo ni estilos, use la opción -e|--empty:

    dotnet new blazorwasm -o BlazorApp -e

Cree un nuevo proyecto:

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

    dotnet new blazorserver -o BlazorApp

  • Si lo desea, también puede crear una aplicación de Blazor Server sin código de demostración ni Bootstrap utilizando la plantilla de proyecto blazorserver-empty:

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

  • Si quiere, también puede crear una aplicación independiente de Blazor WebAssembly sin código de demostración ni Bootstrap utilizando la plantilla de proyecto blazorwasm-empty:

    dotnet new blazorwasm-empty -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

  • Como alternativa, cree una aplicación hospedada de Blazor WebAssembly sin código de demostración ni Bootstrap mediante la plantilla blazorwasm-empty con la opción hospedada:

    dotnet new blazorwasm-empty -o BlazorApp -ho

Cree un nuevo proyecto:

  • 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

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

    dotnet new blazorserver -o BlazorApp

Abra la carpeta BlazorApp en Visual Studio Code.

Cuando Visual Studio Code le solicite que agregue recursos de compilación y depuración del proyecto, seleccione Sí.

Si Visual Studio Code no le ofrece automáticamente agregar recursos para compilar y depurar (la carpeta .vscode con los archivos launch.json y tasks.json), seleccione Ver>Paleta de comandos y escriba ".NET" en el cuadro de búsqueda. En la lista de comandos, seleccione el comando ".NET: Generate Assets for Build and Debug".

Nota:

Para obtener más información sobre la configuración y el uso de Visual Studio Code, consulte la documentación de Visual Studio Code.

El archivo Properties/launchSettings.json del proyecto incluye la propiedad inspectUri para el proxy de depuración para cualquier perfil de la sección profiles del archivo:

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

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 .

Importante

Al ejecutar una aplicación hospedada Blazor WebAssembly, ejecute la aplicación desde el proyecto Server de la solución.

Cuando se inicia la aplicación, solo se usa el archivo Properties/launchSettings.json en 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"
    }
  ]
}

Presione Ctrl+F5 (Windows) o ⌘+F5 (macOS) para ejecutar la aplicación.

Nota

Solo la depuración del explorador se admite en este momento.

No puede recompilar automáticamente la aplicación Server de back-end de una solución Blazor WebAssembly hospedada durante la depuración, por ejemplo, mediante la ejecución de la aplicación con dotnet watch run.

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

Presione Ctrl+F5 (Windows) o ⌘+F5 (macOS) para ejecutar la aplicación.

Confianza en un certificado de desarrollo

Para más información, vea Aplicación de HTTPS en ASP.NET Core.

Archivo de solución de Visual Studio (.sln)

Una solución es un contenedor para organizar uno o varios proyectos de código relacionados. Visual Studio usa un archivo de solución (.sln) para almacenar la configuración de una solución. Los archivos de solución usan un formato único y no están diseñados para editarse directamente.

Las herramientas fuera de Visual Studio pueden interactuar con archivos de solución:

  • La CLI de .NET puede crear archivos de solución y enumerar o modificar los proyectos en los archivos de solución mediante el comando dotnet sln. Otros comandos de la CLI de .NET usan la ruta de acceso del archivo de solución para varios comandos de publicación, pruebas y empaquetado.
  • Visual Studio Code puede ejecutar el comando dotnet sln y otros comandos de la CLI de .NET a través de su terminal integrado, pero no usa la configuración de un archivo de solución directamente.

A lo largo de la documentación de Blazor, la solución se usa para describir las aplicaciones creadas a partir de la plantilla de proyecto Blazor WebAssembly con la opción ASP.NET Core hospedado habilitada o desde una plantilla de proyecto Blazor Hybrid. Las aplicaciones generadas a partir de estas plantillas de proyecto incluyen un archivo de solución (.sln) de forma predeterminada. En el caso de las aplicaciones hospedadas Blazor WebAssembly en las que el desarrollador no usa Visual Studio, el archivo de solución se puede omitir o eliminar si no se usa con comandos de la CLI de .NET.

Para más información, consulte los recursos siguientes en la documentación de Visual Studio:

Uso de Visual Studio Code para el desarrollo multiplataforma de Blazor

Visual Studio Code es un entorno de desarrollo integrado (IDE) multiplataforma de código abierto que se puede usar para desarrollar aplicaciones Blazor. Use la CLI de .NET a fin de crear una aplicación Blazor para su desarrollo con Visual Studio Code. Para obtener más información, consulte la versión de Linux/macOS de este artículo.

Para obtener más información sobre la configuración y el uso de Visual Studio Code, consulte la documentación de Visual Studio Code.

Opciones de plantilla de Blazor

El marco Blazor tiene plantillas para crear nuevas aplicaciones a disposición de los usuarios. Las plantillas se usan para crear soluciones y proyectos de Blazor independientemente de las herramientas que seleccione para el desarrollo de Blazor (Visual Studio, Visual Studio Code o la interfaz de la línea de comandos [CLI] de .NET):

  • Blazor Plantilla de proyecto de aplicación web: blazor
  • Plantilla de proyecto de aplicación independiente Blazor WebAssembly: blazorwasm
  • Plantillas de proyecto de Blazor Server: blazorserver, blazorserver-empty
  • Plantillas de proyecto de Blazor WebAssembly: blazorwasm, blazorwasm-empty
  • Plantilla de proyecto de Blazor Server: blazorserver
  • Plantilla de proyecto de Blazor WebAssembly: blazorwasm

Para más información sobre las plantillas de proyecto de Blazor, vea Estructura del proyecto de Blazor de ASP.NET Core.

Para obtener más información acerca de las opciones de plantilla, consulte los siguientes recursos:

  • El nuevo artículo de plantillas predeterminadas de .NET para dotnet de la documentación de .NET Core:
  • Si se pasa la opción de ayuda (-h o --help) al comando dotnet new de la CLI en un shell de comandos:
    • dotnet new blazor -h
    • dotnet new blazorwasm -h
  • El nuevo artículo de plantillas predeterminadas de .NET para dotnet de la documentación de .NET Core:
  • Si se pasa la opción de ayuda (-h o --help) al comando dotnet new de la CLI en un shell de comandos:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h
  • El nuevo artículo de plantillas predeterminadas de .NET para dotnet de la documentación de .NET Core:
  • Si se pasa la opción de ayuda (-h o --help) al comando dotnet new de la CLI en un shell de comandos:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Recursos adicionales