Ejercicio: Creación y ejecución de una aplicación web Blazor

8 minutos

Vamos a configurar nuestro entorno de desarrollo de .NET y a crear nuestra primera aplicación web Blazor.

Este módulo le ofrece la opción de usar la CLI de .NET, Visual Studio Code o Visual Studio 2022 para el desarrollo local. Si está desarrollando con Visual Studio Code, asegúrese de instalar la extensión del Kit de desarrollo de C#, que usamos en este módulo.

En este módulo se usa el SDK de .NET 8.0. Asegúrese de que tiene instalado .NET 8.0 mediante la ejecución del siguiente comando en el terminal de comandos que prefiera:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 8. Si no aparece ninguna o no se encuentra el comando, instale el SDK más reciente de .NET 8.0.

Creación de una aplicación web Blazor con el kit de desarrollo de C#

Para crear un proyecto de aplicación web Blazor en Visual Studio Code con el kit de desarrollo de C#:

Abra la paleta de comandos con Ctrl+Mayús+P y, a continuación, escriba ".NET".
Busque y seleccione el comando .NET: Nuevo proyecto.
Seleccione aplicación web de Blazor en la lista desplegable.
Seleccione la carpeta en la que desea crear el nuevo proyecto.
Asigne el nombre BlazorApp al proyecto y presione Entrar para confirmar.
Consulte el nuevo proyecto de aplicación Blazor en el Explorador de soluciones.

Opcional: Creación de una aplicación Blazor con la CLI de .NET

Para crear un proyecto de aplicación web Blazor mediante el SDK de .NET desde la línea de comandos, use el siguiente comando:

dotnet new blazor

Independientemente de si ha creado la aplicación Blazor con Visual Studio Code o con la CLI de .NET, el proyecto generado contiene los siguientes archivos y páginas:

Program.cs es el punto de entrada de la aplicación que inicia el servidor y donde se configuran los servicios de la aplicación y el middleware.
App.razor es el componente raíz de la aplicación.
Routes.razor configura el enrutador Blazor.
El directorio Componentes/Páginas contiene algunas páginas web de ejemplo para la aplicación.
BlazorApp.csproj define el proyecto de la aplicación y sus dependencias y puede verse haciendo doble clic en el nodo del proyecto en el Explorador de soluciones.
El archivo launchSettings.json dentro del directorio Propiedades define diferentes configuraciones de perfil para el entorno de desarrollo local. Se asigna automáticamente un número de puerto en la creación del proyecto y se guarda en este archivo.

Ejecución de la aplicación con el depurador integrado

En Visual Studio Code, seleccione en el menú Ejecutar.
A continuación, seleccione Iniciar depuración.
Seleccione C# en la lista desplegable Seleccionar depurador.
Seleccione C#: BlazorApp [configuración predeterminada]

De esta forma se compila y se inicia la aplicación con la depuración habilitada. La aplicación se abrirá de forma automática en su explorador predeterminado. El explorador podría advertirle de que el sitio no es seguro; es seguro continuar.

Opcional: Ejecución de la aplicación con la CLI de .NET

En la ventana de terminal, copie y pegue los comandos siguientes para ejecutar la aplicación y ver cambios de archivo:
```
dotnet watch
```
Este comando compila e inicia la aplicación y, a continuación, aplica los cambios de código a la aplicación en ejecución. La aplicación se abrirá de forma automática en su explorador predeterminado. Es posible que el explorador le avise de que el sitio aún no tiene un certificado válido; es seguro continuar.

¡Ha ejecutado correctamente la primera aplicación Blazor!

Creación de una aplicación Blazor

Visual Studio es un IDE con todas las características para el desarrollo de .NET que facilita la creación de aplicaciones Blazor.

Para usar Visual Studio, cree y trabaje con aplicaciones web Blazor, y asegúrese de instalar la carga de trabajo "ASP.NET y desarrollo web" mediante el instalador de Visual Studio.

Captura de pantalla de la selección de la carga de trabajo ASP.NET y desarrollo web en el instalador de Visual Studio.

Para crear una aplicación web Blazor mediante Visual Studio:

Inicie Visual Studio y seleccione Crear un proyecto.
En la ventana Crear un nuevo proyecto, escriba Blazor en el cuadro de búsqueda y presione Entrar.
Seleccione la plantilla Aplicación web Blazor y seleccione Siguiente.
En la ventana Configure su nuevo proyecto, escriba BlazorApp como nombre del proyecto y seleccione Siguiente:
En la ventana Información adicional, seleccione .NET 8.0 (compatibilidad a largo plazo) en la lista desplegable Marco si aún no está seleccionado y haga clic en el botón Crear.

Al crear una aplicación web Blazor, puede seleccionar entre varias opciones, como si se va a habilitar la autenticación, qué modos de representación interactiva habilitar y qué parte de la aplicación desea que sea interactiva. Para esta aplicación, asegúrese de que los valores predeterminados estén seleccionados de la siguiente manera:
- Tipo de autenticación: Ninguna
- Modo de representación interactiva: Servidor
- Ubicación de interactividad: Por página/componente

El proyecto se crea y se carga en Visual Studio. Eche un vistazo al contenido de su proyecto utilizando Explorador de soluciones.

Captura de pantalla del Explorador de soluciones de Visual Studio 2022 con una lista de los archivos de un proyecto de Blazor predeterminado.

Se han creado varios archivos para ofrecerle una aplicación de Blazor sencilla y lista para funcionar:

Program.cs es el punto de entrada de la aplicación que inicia el servidor y donde se configuran los servicios de la aplicación y el middleware.
App.razor es el componente raíz de la aplicación.
Routes.razor configura el enrutador Blazor.
El directorio Componentes/Páginas contiene algunas páginas web de ejemplo para la aplicación.
BlazorApp.csproj define el proyecto de la aplicación y sus dependencias y puede verse haciendo doble clic en el nodo del proyecto en el Explorador de soluciones.
El archivo launchSettings.json dentro del directorio Propiedades define diferentes configuraciones de perfil para el entorno de desarrollo local. Se asigna automáticamente un número de puerto en la creación del proyecto y se guarda en este archivo.

Ejecutar la aplicación

Haga clic en el botón Iniciar depuración (flecha verde) de la barra de herramientas de depuración de Visual Studio para ejecutar su aplicación.

Una vez que la aplicación se está ejecutando, puede aplicar los cambios de código a la aplicación en ejecución haciendo clic en el botón Recarga activa.

Captura de pantalla de la barra de herramientas depurar en Visual Studio con el botón Recarga activa resaltado.

Puede detener la aplicación en cualquier momento haciendo clic en el botón Detener de la barra de herramientas superior.

Captura de pantalla de la barra de herramientas depurar en Visual Studio con el botón Detener depuración resaltado.

La primera vez que ejecute una aplicación web en Visual Studio, se configurará un certificado de desarrollo para hospedar la aplicación en HTTPS y se le pedirá que confíe en el certificado. Le recomendamos que acepte confiar en el certificado. El certificado solo se usa para el desarrollo local, y sin él la mayoría de los exploradores se quejan de la seguridad del sitio web.

Espere a que la aplicación se inicie en el explorador. Una vez que llegue a la página siguiente, habrá ejecutado correctamente su primera aplicación Blazor.

Captura de pantalla en la que se muestra la aplicación Blazor predeterminada en ejecución en un explorador.

Use esta aplicación Blazor en los ejercicios siguientes.

Continuar