Migrando una app de Blazor a .Net Maui

Con la llegada de .Net Maui han llegado muchas novedades, una de ellas es la posibilidad de usar un webview que soporta aplicaciones blazor que corren en local, es decir, en el propio dispositivo.

Os dejo un par de enlaces a charlas del evento de Microsoft que hablan sobre el tema.

https://www.youtube.com/watch?v=swwWgFZJvEs&ab_channel=dotNET

La idea es muy llamativa en cuanto a portar apps ya existentes en Blazor a aplicaciones nativas con .Net Maui, y para comprobar realmente la dificultad me propuse elegir una app blazor ya funcionando, y portarla a .Net Maui.

Para elegir que aplicación de blazor portar, hice una pequeña búsqueda en internet y encontre este repositorio que recopila apps de blazor, tanto oficiales de microsoft como otras open source: https://github.com/AdrienTorris/awesome-blazor

Elegí un proyecto muy interesante llamado Nethereum.Explorer, es un wallet de ethereum en Blazor. Os dejo su repositorio: https://github.com/Nethereum/Nethereum-Explorer-Wallet-Template-Blazor

Haciendo el port

Lo primero que hay que hacer es asegurar que el proyecto blazor cumple ciertos criterios:

• La app de Blazor debe ser un contenedor vacío y que todas las páginas y servicios estén en una librería externa, de esta forma app mobile y web usarán las mismas páginas y servicios.

• En el csproj de la librería que contenga las páginas de blazor, debe tener los mismos target frameworks que el proyecto de .Net Maui.

Una vez la librería con las páginas este lista, creamos un nuevo proyecto de .net Maui Blazor.

Tendremos que eliminar algunas cosas, en principio, la carpeta Shared , Pages y Data.Además eliminaremos los estilos de wwwroot. Ya no nos servirán ya que usaremos las páginas y servicios de la misma librería que usa el proyecto web.

Agregamos una referencia a la librería y en el archivo Main.razor del proyecto .net Maui deberemos apuntar al MainLayout de la librería(o el que corresponda). Además deberemos añadir el assembly de la librería. Nuestro archivo quedaría algo así:

<Router AppAssembly="@GetType().Assembly"
AdditionalAssemblies="new[] { typeof(otherProyecto.MainLayout).Assembly}">
	<Found Context="routeData">
		<RouteView RouteData="@routeData" DefaultLayout="@typeof(otherProyecto.MainLayout)" />
	</Found>
	<NotFound>
		<LayoutView Layout="@typeof(otherProyecto.MainLayout)">
			<p>Sorry, there's nothing at this address.</p>
		</LayoutView>
	</NotFound>
</Router>

Ahora le toca el turno al index.html del proyecto de .net Maui, deberemos hacer referencia a los estilos de nuestra libreria que los contiene.

Y ya tendríamos la magia, nuestra app de blazor corriendo como app nativa en Android, Windows, Android, IOS y MacOs. Os dejo una imagen corriendo en Android.

Podéis usar el proyecto del wallet como referencia, ya está el código disponible en Master y con la última preview de Maui.

https://github.com/Nethereum/Nethereum-Explorer-Wallet-Template-Blazor