Blazor sur le bureau

Nous explorons comment faire fonctionner les applications Web Blazor sur le bureau.

Blazor est l'une des technologies les plus intéressantes pour les développeurs Web sur la pile .NET et permet de créer des applications Web côté client / serveur entièrement en C #. Blazor n'est pas seulement pour les applications Web et a des implications claires pour les ordinateurs de bureau / mobiles.

Il s'avère qu'il existe de multiples façons de créer des applications de bureau modernes avec Blazor. Les techniques ne sont plus rien maintenant – ce qu'il faut, c'est un shell qui héberge un bac à sable de navigateur de bureau, qui exécute des applications Blazor normales, comme si elles fonctionnaient sur le Web. Cependant, la clé du succès des applications de bureau hybrides réside dans la mise en œuvre et la gestion du gonflement des ressources. Et comme on peut le voir avec le premier aperçu .NET 6 Blazor sur ordinateur devient bientôt une réalité. L'attrait est simple: utilisez la syntaxe Razor et le modèle de composant Blazor bien connu pour créer des applications de bureau natives.

Examinons de plus près les applications de bureau propulsées par Blazor – nous allons explorer deux méthodes populaires pour plus de clarté et voir les coques de bureau en action.

The Electron Way

Le désir de voir des applications Web s'exécuter sur bureau a été longtemps en cours d'exécution. Et étant donné à quel point Blazor a été passionnant pour les développeurs Web .NET, il y a eu beaucoup de zèle pour faire des applications Blazor des solutions de bureau. Entrez la solution la plus omniprésente pour de tels besoins – Electron . ElectronJS est un projet open source pour créer des applications multiplateformes avec des technologies Web et peut cibler n'importe quel poste de travail: Windows, Mac OS et Linux. La plupart des applications de bureau les plus utilisées sont essentiellement des applications Web intégrées au shell Electron, telles que Visual Studio Code, Microsoft Teams, Slack et Figma. Electron existe depuis un certain temps et gagne en crédibilité grâce à une communauté / écosystème de développeurs solide.

Les applications Web Blazor peuvent-elles être enveloppées dans le shell Electron pour les transformer en applications de bureau? Tu paries.

Tout d'abord, nous commençons un projet Web côté serveur Blazor fonctionnant sur .NET Core 3.1. Ensuite, nous ajoutons le package NuGet ElectronNET.API qui permettra à l'application Blazor d'être amorcée dans Electron.

en utilisant System ; using System.Collections.Generic; en utilisant System.IO; using System.Linq; using System.Threading.Tasks; en utilisant ElectronNET.API; en utilisant Microsoft.AspNetCore; en utilisant Microsoft.AspNetCore.Hosting; en utilisant Microsoft.Extensions.Configuration; en utilisant Microsoft.Extensions.Hosting; en utilisant Microsoft.Extensions.Logging; espace de noms BlazorInShell { Programme de classe publique { public static void Main (string [] args) { CreateHostBuilder (args) .Build (). Run (); } public static IHostBuilder CreateHostBuilder (string [] args) => Host.CreateDefaultBuilder (args) .ConfigureWebHostDefaults (webBuilder => { webBuilder.UseElectron (args); webBuilder.UseStartup (); }); } }

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
en utilisant Microsoft.AspNetCore.Builder;
en utilisant Microsoft.AspNetCore.Components;
en utilisant Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
en utilisant Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
en utilisant Microsoft.Extensions.Hosting;
using BlazorInShell.Data;
en utilisant ElectronNET.API;
utilisant ElectronNET.API.Entities;

espace de noms BlazorInShell
{
    Démarrage de classe publique
    {
        Démarrage public (configuration IConfiguration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration {get; }

        public void ConfigureServices (services IServiceCollection)
        {
            services.AddRazorPages ();
            services.AddServerSideBlazor ();
            services.AddSingleton  ();
        }

        public void Configure (application IApplicationBuilder, IWebHostEnvironment env)
        {
            si (env.IsDevelopment ())
            {
                app.UseDeveloperExceptionPage ();
            }
            autre
            {
                app.UseExceptionHandler ("/ Erreur");
                app.UseHsts ();
            }

            app.UseHttpsRedirection ();
            app.UseStaticFiles ();

            app.UseRouting ();

            app.UseEndpoints (points de terminaison =>
            {
                endpoints.MapBlazorHub ();
                endpoints.MapFallbackToPage ("/ _ Host");
            });

            if (HybridSupport.IsElectronActive)
            {
                ElectronBootstrap ();
            }

        }

        public async void ElectronBootstrap ()
        {
            var browserWindow = await Electron.WindowManager.CreateWindowAsync (nouveau BrowserWindowOptions
            {
                Largeur = 1920,
                Hauteur = 1080,
                Afficher = faux
            });

            attendre browserWindow.WebContents.Session.ClearCacheAsync ();

            browserWindow.OnReadyToShow + = () => browserWindow.Show ();
            browserWindow.SetTitle ("Blazor dans Shell");
        }
    }
} 

 dotnet tool install ElectronNET.CLI 

 dotnet run electronize init 

 {
  "iisSettings": {
    "windowsAuthentication": faux,
    "anonymousAuthentication": vrai,
    "iisExpress": {
      "applicationUrl": "http: // localhost: 37307",
      "sslPort": 44311
    }
  },
  "profiles": {
    "Application Electron.NET": {
      "commandName": "Exécutable",
      "executablePath": "électroniser",
      "commandLineArgs": "démarrer",
      "directeur de travail": "."
    },

    "IIS Express":
    {
      "commandName": "IISExpress",
      "launchBrowser": vrai,
      "Variables d'environnement": {
        "ASPNETCORE_ENVIRONMENT": "Développement"
      }
    },

    "Électron":
    {
      "commandName": "Exécutable",
      "executablePath": "dotnet",
      "commandLineArgs": "Electronize start",
      "workingDirectory": "$ (ProjectDir)"
    },
    «BlazorInShell»:
    {
      "commandName": "Projet",
      "launchBrowser": vrai,
      "applicationUrl": "https: // localhost: 5001; http: // localhost: 5000",
      "Variables d'environnement": {
        "ASPNETCORE_ENVIRONMENT": "Développement"
      }
    }
    }
} 

 dotnet new blazorhybrid -o BlazorHybridHW