Herramientas para ASP.NET Core Blazor

  • Artículo
  • 10 minutos para leer

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

  2. Cree un nuevo proyecto.

  3. Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

  4. Proporcione un Nombre del proyecto y confirme que el valor de Ubicación es correcto. Seleccione Siguiente.

  5. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional al crear la aplicación Blazor WebAssembly hospedada. Seleccione Crear.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  6. Presione Ctrl+F5 para ejecutar la aplicación.

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

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

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

  1. 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 siguiente comando en un shell de comandos:

    dotnet --version

  2. Instale la versión más reciente de Visual Studio Code.

  3. Instale la extensión de C# para Visual Studio Code más reciente.

  4. Para disfrutar de una experiencia de Blazor WebAssembly, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorwasm -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1 -ho

    Para disfrutar de una experiencia de Blazor Server, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorserver -o WebApplication1

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  5. Abra la carpeta WebApplication1 en Visual Studio Code.

  6. El IDE solicita que agregue recursos para compilar y depurar el proyecto. Seleccione Sí.

    Si Visual Studio Code no ofrece crear los recursos automáticamente, use los siguientes archivos:

    .vscode/launch.json (configurado para el inicio y la depuración de una aplicación Blazor WebAssembly):

    {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "browser": "edge"
    }
  ]
}

    .vscode/tasks.json:

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

    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 soluciones hospedadas de Blazor WebAssembly, 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 (por ejemplo, https://localhost:7268). Tenga en cuenta este valor para usarlo 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 usa Microsoft Edge y Google Chrome no está instalado en el sistema, agregue una propiedad adicional de "browser": "edge" 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 https://localhost:7268.
    • Cambia el explorador predeterminado de Google Chrome, que es el explorador predeterminado, a Microsoft Edge.
    "cwd": "${workspaceFolder}/Server",
"url": "https://localhost:7268",
"browser": "edge"

    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": "https://localhost:7268",
      "browser": "edge"
    }
  ]
}

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

  7. Presione Ctrl+F5 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.

Confianza en un certificado de desarrollo

No existe una manera centralizada de confiar en un certificado en Linux. Normalmente, se adopta uno de los enfoques siguientes:

  • Excluir la dirección URL de la aplicación en la lista de exclusión del explorador.
  • Confiar en todos los certificados autofirmados para localhost.
  • Agregar el certificado a la lista de certificados de confianza en el explorador.

Para más información, consulte las instrucciones proporcionadas por el fabricante de su explorador y la distribución de Linux.

  1. Instale Visual Studio para Mac.

  2. Seleccione Archivo > Nueva solución o cree un proyecto Nuevo desde Ventana de inicio.

  3. En la barra lateral, seleccione Web y consola > Aplicación.

    Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  4. Confirme que la Autenticación esté establecida en Sin autenticación. Seleccione Siguiente.

  5. En el caso de una experiencia de Blazor WebAssembly hospedada, active la casilla ASP.NET Core hospedado.

  6. En el campo Nombre del proyecto, asigne un nombre a la aplicación WebApplication1. Seleccione Crear.

  7. Seleccione Ejecutar > Iniciar sin depurar para ejecutar la aplicación sin el depurador. Ejecute la aplicación con Ejecutar > Iniciar depuración o usando el botón Ejecutar (▶) para ejecutar la aplicación con el depurador.

Si aparece un mensaje para que confíe en el certificado de desarrollo, hágalo y continúe. Las contraseñas de usuario y de cadena de claves son necesarias para confiar en el certificado. Para obtener más información sobre la confianza en el certificado de desarrollo de HTTPS, consulte Aplicación de HTTPS en ASP.NET Core.

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

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 para crear una aplicación Blazor para su desarrollo con Visual Studio Code. Para obtener más información, consulte la versión Linux de este artículo.

Opciones de plantilla de Blazor

El marco de Blazor proporciona plantillas para la creación de aplicaciones para cada uno de los dos modelos de hospedaje de Blazor. 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 para Mac, Visual Studio Code o la CLI de .NET):

  • Plantilla de proyecto de Blazor Server: blazorserver
  • Plantilla de proyecto de Blazor WebAssembly: blazorwasm

Para más información sobre los modelos de hospedaje de Blazor, vea Modelos de hospedaje Blazor en ASP.NET Core. Para obtener más información sobre las plantillas de proyectos de Blazor, consulte 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 artículo Plantillas predeterminadas de .NET para dotnet new en 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

Recarga activa de .NET

Recarga activa de .NET aplica cambios de código, incluidos los cambios en las hojas de estilos, a una aplicación en ejecución sin reiniciar la aplicación y sin perder el estado de la aplicación.

Recarga activa se activa mediante el comando dotnet watch:

dotnet watch

Para forzar la recompilación y el reinicio de la aplicación, use la combinación de teclado Ctrl+R en el shell de comandos.

Cuando se realiza una modificación de código no compatible, denominada edición superficial, dotnet watch le preguntará si quiere reiniciar la aplicación:

  • Sí: reinicia la aplicación.
  • No: no reinicia la aplicación y deja la aplicación en ejecución sin aplicar los cambios.
  • Siempre: reinicia la aplicación según sea necesario cuando se producen ediciones superficiales.
  • Nunca: no reinicia la aplicación y evita mensajes futuros.

Para deshabilitar la compatibilidad con Recarga activa, pase la opción --no-hot-reload al comando dotnet watch:

dotnet watch --no-hot-reload

En el caso de las aplicaciones Blazor WebAssembly, actualmente solo se admite el reemplazo del cuerpo del método. Se agregarán características adicionales en las próximas versiones de ASP.NET Core. Para obtener más información sobre escenarios admitidos, consulte Cambios de código admitidos (C# y Visual Basic).

Recursos adicionales

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

  2. Cree un nuevo proyecto.

  3. Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

  4. Proporcione un Nombre del proyecto y confirme que el valor de Ubicación es correcto. Seleccione Siguiente.

  5. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional al crear la aplicación Blazor WebAssembly hospedada. Seleccione Crear.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  6. Presione Ctrl+F5 para ejecutar la aplicación.

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

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

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

  1. 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 siguiente comando en un shell de comandos:

    dotnet --version

  2. Instale la versión más reciente de Visual Studio Code.

  3. Instale la extensión de C# para Visual Studio Code más reciente.

  4. Para disfrutar de una experiencia de Blazor WebAssembly, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorwasm -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1 -ho

    Para disfrutar de una experiencia de Blazor Server, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorserver -o WebApplication1

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  5. Abra la carpeta WebApplication1 en Visual Studio Code.

  6. El IDE solicita que agregue recursos para compilar y depurar el proyecto. Seleccione Sí.

    Si Visual Studio Code no ofrece crear los recursos automáticamente, use los siguientes archivos:

    .vscode/launch.json (configurado para el inicio y la depuración de una aplicación Blazor WebAssembly):

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "blazorwasm",
            "name": "Launch and Debug Blazor WebAssembly Application",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "browser": "edge"
        }
    ]
}

    .vscode/tasks.json:

    {
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                "build",
                // Ask dotnet build to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary",
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}

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

    En el caso de las soluciones hospedadas de Blazor WebAssembly, 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 .

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

  7. Presione Ctrl+F5 para ejecutar la aplicación.

Confianza en un certificado de desarrollo

No existe una manera centralizada de confiar en un certificado en Linux. Normalmente, se adopta uno de los enfoques siguientes:

  • Excluir la dirección URL de la aplicación en la lista de exclusión del explorador.
  • Confiar en todos los certificados autofirmados para localhost.
  • Agregar el certificado a la lista de certificados de confianza en el explorador.

Para más información, consulte las instrucciones proporcionadas por el fabricante de su explorador y la distribución de Linux.

  1. Instale Visual Studio para Mac.

  2. Seleccione Archivo > Nueva solución o cree un proyecto Nuevo desde Ventana de inicio.

  3. En la barra lateral, seleccione Web y consola > Aplicación.

    Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  4. Confirme que la Autenticación esté establecida en Sin autenticación. Seleccione Siguiente.

  5. En el caso de una experiencia de Blazor WebAssembly hospedada, active la casilla ASP.NET Core hospedado.

  6. En el campo Nombre del proyecto, asigne un nombre a la aplicación WebApplication1. Seleccione Crear.

  7. Seleccione Ejecutar > Iniciar sin depurar para ejecutar la aplicación sin el depurador. Ejecute la aplicación con Ejecutar > Iniciar depuración o usando el botón Ejecutar (▶) para ejecutar la aplicación con el depurador.

Si aparece un mensaje para que confíe en el certificado de desarrollo, hágalo y continúe. Las contraseñas de usuario y de cadena de claves son necesarias para confiar en el certificado. Para obtener más información sobre la confianza en el certificado de desarrollo de HTTPS, consulte Aplicación de HTTPS en ASP.NET Core.

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

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 para crear una aplicación Blazor para su desarrollo con Visual Studio Code. Para obtener más información, consulte la versión Linux de este artículo.

Opciones de plantilla de Blazor

El marco de Blazor proporciona plantillas para la creación de aplicaciones para cada uno de los dos modelos de hospedaje de Blazor. 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 para Mac, Visual Studio Code o la CLI de .NET):

  • Plantilla de proyecto de Blazor WebAssembly: blazorwasm
  • Plantilla de proyecto de Blazor Server: blazorserver

Para más información sobre los modelos de hospedaje de Blazor, vea Modelos de hospedaje Blazor en ASP.NET Core. Para obtener más información sobre las plantillas de proyectos de Blazor, consulte Estructura del proyecto de Blazor de ASP.NET Core.

Las opciones de plantilla están disponibles 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 blazorwasm -h
dotnet new blazorserver -h

Recursos adicionales

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

  2. Cree un nuevo proyecto.

  3. Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

  4. Proporcione un Nombre del proyecto y confirme que el valor de Ubicación es correcto. Seleccione Siguiente.

  5. Active la casilla ASP.NET Core hospedado del cuadro de diálogo Información adicional al crear la aplicación Blazor WebAssembly hospedada. Seleccione Crear.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  6. Presione Ctrl+F5 para ejecutar la aplicación.

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

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

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

  1. 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 siguiente comando en un shell de comandos:

    dotnet --version

  2. Instale la versión más reciente de Visual Studio Code.

  3. Instale la extensión de C# para Visual Studio Code más reciente.

  4. Para disfrutar de una experiencia de Blazor WebAssembly, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorwasm -o WebApplication1

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

    dotnet new blazorwasm -o WebApplication1 -ho

    Para disfrutar de una experiencia de Blazor Server, ejecute el siguiente comando en un shell de comandos:

    dotnet new blazorserver -o WebApplication1

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  5. Abra la carpeta WebApplication1 en Visual Studio Code.

  6. El IDE solicita que agregue recursos para compilar y depurar el proyecto. Seleccione Sí.

    Si Visual Studio Code no ofrece crear los recursos automáticamente, use los siguientes archivos:

    .vscode/launch.json (configurado para el inicio y la depuración de una aplicación Blazor WebAssembly):

    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "blazorwasm",
            "name": "Launch and Debug Blazor WebAssembly Application",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "browser": "edge"
        }
    ]
}

    .vscode/tasks.json:

    {
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                "build",
                // Ask dotnet build to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary",
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}

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

    En el caso de las soluciones hospedadas de Blazor WebAssembly, 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 .

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

  7. Presione Ctrl+F5 para ejecutar la aplicación.

Confianza en un certificado de desarrollo

No existe una manera centralizada de confiar en un certificado en Linux. Normalmente, se adopta uno de los enfoques siguientes:

  • Excluir la dirección URL de la aplicación en la lista de exclusión del explorador.
  • Confiar en todos los certificados autofirmados para localhost.
  • Agregar el certificado a la lista de certificados de confianza en el explorador.

Para más información, consulte las instrucciones proporcionadas por el fabricante de su explorador y la distribución de Linux.

  1. Instale Visual Studio para Mac.

  2. Seleccione Archivo > Nueva solución o cree un proyecto Nuevo desde Ventana de inicio.

  3. En la barra lateral, seleccione Web y consola > Aplicación.

    Para disfrutar de una experiencia de Blazor WebAssembly, elija la plantilla Aplicación Blazor WebAssembly . Para disfrutar de una experiencia de Blazor Server, elija la plantilla Aplicación Blazor Server . Seleccione Siguiente.

    Para obtener información sobre los dos modelos de hospedaje de Blazor, Blazor WebAssembly (independiente y hospedado) y Blazor Server , consulte Modelos de hospedaje Blazor en ASP.NET Core.

  4. Confirme que la Autenticación esté establecida en Sin autenticación. Seleccione Siguiente.

  5. En el caso de una experiencia de Blazor WebAssembly hospedada, active la casilla ASP.NET Core hospedado.

  6. En el campo Nombre del proyecto, asigne un nombre a la aplicación WebApplication1. Seleccione Crear.

  7. Seleccione Ejecutar > Iniciar sin depurar para ejecutar la aplicación sin el depurador. Ejecute la aplicación con Ejecutar > Iniciar depuración o usando el botón Ejecutar (▶) para ejecutar la aplicación con el depurador.

Si aparece un mensaje para que confíe en el certificado de desarrollo, hágalo y continúe. Las contraseñas de usuario y de cadena de claves son necesarias para confiar en el certificado. Para obtener más información sobre la confianza en el certificado de desarrollo de HTTPS, consulte Aplicación de HTTPS en ASP.NET Core.

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

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 para crear una aplicación Blazor para su desarrollo con Visual Studio Code. Para obtener más información, consulte la versión Linux de este artículo.

Opciones de plantilla de Blazor

El marco de Blazor proporciona plantillas para la creación de aplicaciones para cada uno de los dos modelos de hospedaje de Blazor. 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 para Mac, Visual Studio Code o la CLI de .NET):

  • Plantilla de proyecto de Blazor WebAssembly: blazorwasm
  • Plantilla de proyecto de Blazor Server: blazorserver

Para más información sobre los modelos de hospedaje de Blazor, vea Modelos de hospedaje Blazor en ASP.NET Core. Para obtener más información sobre las plantillas de proyectos de Blazor, consulte Estructura del proyecto de Blazor de ASP.NET Core.

Las opciones de plantilla están disponibles 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 blazorwasm -h
dotnet new blazorserver -h

Recursos adicionales