Aplicaciones multiplataforma con ASP.NET Core y Electron.NET

Electron.Net es una interesante librería que nos permite generar aplicaciones multiplataforma basándonos en ASP .Net Core y Electron.

La posibilidad de usar la versatilidad del HTML como Front End, junto con la potencia de ASP .NET Core como backend, para realizar aplicaciones de escritorio multiplataforma, es un sueño de muchos desarrolladores de .NET.

Mientras esperamos que Microsoft nos haga felices con esta integración, Electron.NET plantea una alternativa, actuando como un wrapper en torno a la popular solución Electron.

Electron.NET automatiza el proceso de creación de una aplicación de escritorio en Electron. También proporciona un cierto API que sirve de pasarela entre .NET y Electron, proporcionando métodos para interactuar entre ellos como, por ejemplo, crear ventanas, acceder a dispositivos.

Aunque Electron.NET es una gran herramienta, también tiene ciertas desventajas. Por ejemplo, aunque dispone de herramientas para Debug, no es ni remotamente tan cómodo como con una aplicación normal.

Electron.NET es un proyecto Open Source, y su código está disponible en https://github.com/ElectronNET/Electron.NET. La documentación es algo escasa, y debemos intuir su uso a través de los repositorios, que no están especialmente actualizados.

Está disponible como paquete Nuget, por lo que añadirlo a nuestro proyecto de ASP .NET Core es tan sencillo como hacer

Install-Package ElectronNET.API

A continuación, modificamos nuestro AppBuilder para incluir el método ‘.UseElectron(args)’, quedando de la siguiente forma,

public static IHostBuilder CreateHostBuilder(string[] args) =>
  Host.CreateDefaultBuilder(args)
    .ConfigureWebHostDefaults(webBuilder =>
    {
      webBuilder.UseStartup<Startup>();
      webBuilder.UseElectron(args);
    });

Por otro lado, en la configuración de la aplicación debemos añadir ‘Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());’, por lo que quedaría así,

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  if (env.IsDevelopment())
  {
    app.UseDeveloperExceptionPage();
  }
  else
  {
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
  }
  app.UseHttpsRedirection();
  app.UseStaticFiles();

  app.UseRouting();

  app.UseAuthorization();

  app.UseEndpoints(endpoints =>
  {
    endpoints.MapControllerRoute(
      name: "default",
      pattern: "{controller=Home}/{action=Index}/{id?}");
  });

  // Open the Electron-Window here
  Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}

Para iniciar la aplicación emplearemos el CLI proporcionado, ElectronNET.CLI, que debemos asegurar está instalado globalmente. Para ello deberemos hacer,

dotnet tool install ElectronNET.CLI -g

Si ya tenemos instalado el ElectronNET.CLI, para inicializar el proyecto escribimos el siguiente comando, dentro del directorio de nuestra aplicación ASP .NET Core

electronize init

Esto creará un fichero ‘electronnet.manifest.json’ en la raíz del proyecto. A continuación, para iniciar la aplicación hacemos,

electronize start

La compilación tarda bastante, sobre todo la primera vez que ejecutemos la aplicación. Al final, si todo ha salido correctamente, veremos nuestra aplicación en Electron ejecutándose,

Finalmente, tenemos diversas opciones para realizar la versión de producción (Release/Build) del proyecto. Para ello, por ejemplo, haríamos

electronize build /target win

Existen diversas opciones de compilación para distintos targets. Podéis consultar la página web del proyecto donde se detallan los parámetros a emplear para distintos sistemas operativos.