[Paso a paso] Cómo publicar una aplicación web Blazor con Azure Static Web Apps

Al igual que con cualquier SPA ( single-page application ) realizada en ReactAngular o Vue las aplicaciones Blazor WebAssembly se pueden desplegar de manera gratuita o muy económica como sitios web estáticos en GitHub Pages o Azure Storage.

Desde Septiembre de 2020 existe una nueva opción muy práctica y gratuita en su versión preview llamada Azure Static Web Apps:

Para utilizar esta solución nos basta con una cuenta de GitHub y una cuenta gratuita de Azure. El funcionamiento es el siguiente:

El código de nuestra aplicación Blazor WebAssembly estará en un repositorio GitHub privado o público y cada vez que hagamos push automáticamente nos va a generar y desplegar una versión en azurestaticapps.net, sin necesidad de configurar manualmente una GitHub action o de pelearnos con ficheros .yaml.

Pero hay un extra muy interesante desde el punto de vista de CI/CD, cada vez que se realice una pull request automáticamente se va a generar y desplegar otra versión donde podremos probar los cambios antes de aprobarla, algo que nos puede facilitar mucho nuestro día a día.

Creación de nuestra aplicación Blazor WebAssembly

GitHub ofrece unas plantillas para generar un repositorio con una app Blazor WebAssembly, Azure Functions y una librería compartida ( pero en este caso vamos a ver un ejemplo con un proyecto creado por nosotros en Visual Studio 2019:

Es un proyecto Blazor WebAssembly en .NET 5 con la plantilla habitual a la que hemos añadido un buscaminas del GitHub de BlazorGames y que tenemos en un repositorio de GitHub, además hemos creado un fichero routes.json con el contenido que se indica el correcto funcionamiento de nuestra single page application en el servidor.

Configuración en Azure Portal

Entramos en Azure Portal y con nuestra cuenta gratuita añadimos una Static Web App:

En los Build Presets podemos ver todas las opciones que tenemos para generar nuestro sitio web estático donde están los principales frameworks javascript SPA, varios generadores de sitios estáticos y Blazor que será nuestra opción:

En las opciones del build preset de Blazor introducimos en App location el directorio en el que tengamos la carpeta wwwroot y dejamos Api location vacío:

Creamos la Static Web App y ya obtenemos la URL aleatoria de azurestaticapps.net donde estará alojada ( se puede personalizar con un nombre de dominio propio ), sólo queda esperar a que finalice el proceso de la GitHub Action que se ha añadido automáticamente a nuestro repositorio y cuyo estado podemos ver si pulsamos en la notificación:

Una vez finalizado el proceso abrimos la URL y ya tenemos nuestro site automáticamente configurado con https , además se actualizará cada vez que hagamos push a nuestro repositorio:

Site temporal para pull requests

Ahora cada vez que se cree un pull request automáticamente también se creará un site temporal donde podremos comprobar nuestros cambios, como ejemplo añadimos un “-PR” al menú de Buscaminas en una nueva rama y tras crear el pull request:

¿ Puede ser más cómodo para hacer pruebas antes de integrar nuevos cambios en una web app Blazor ?

Tan cómodo que mucha gente está solicitando si pueden añadir Azure Devops como otra alternativa a GitHub y para eso tocará esperar a ver la evolución tras la versión preview, pero ya tenemos una excelente opción para crear en dos minutos y sin esfuerzo adicional por nuestra parte todo un pipeline CI/CD para nuestras aplicaciones web incluido Blazor WebAssembly.