Ejecute Blazor WASM como Blazor Server-Side

Question

NOTA : Esta es una publicación de "Comparta sus conocimientos: estilo de preguntas y respuestas". Probablemente recibí un voto negativo porque alguien malinterpretó el contexto de esta publicación :(

Problema

Blazor WASM podría haberse preferido fácilmente a Blazor Server-Side sin sus desventajas en cuanto al desarrollo. Actualmente, Blazor WASM no admite una experiencia de depuración con todas las funciones y tiene un inicio muy lento. Esto ralentiza el desarrollo mucho más que con Blazor Server-Side. Aunque, honestamente, personalmente creo que la experiencia de depuración ralentiza el desarrollo mucho más que el inicio lento.

Solución propuesta

NOTA: Incluí la palabra "propuesta" allí porque no estoy seguro de las desventajas que puede causar esta solución, así que no dude en comentar mi respuesta a continuación.

La solución es simplemente crear un proyecto Blazor Server-Side adicional y luego hacer referencia al proyecto Blazor WASM al proyecto Blazor Server-Side. Luego, agregue algunos ajustes al Startupy _Host.cshtmldel lado del servidor de Blazor para usar correctamente los archivos de afeitar Blazor WASM y los archivos wwwroot. Consulte mi respuesta propuesta a continuación para obtener una explicación paso a paso de esta solución.

En términos más simples, esta solución simplemente agrega y configura el proyecto Blazor Server-Side sin realizar ningún cambio ni duplicación significativa de código en el proyecto Blazor WASM.

Answer 1

NOTA: En este ejemplo, estoy usando Visual Studio 2019 16.7.2 y la versión de las plantillas está actualmente en 3.1.8

1. Cree un proyecto Blazor WASM. La opción ASP.NET Core Hosted o Standalone funcionará bien, pero tendrán configuraciones diferentes más adelante que se discutirán. El resto de opciones no tendrán ningún efecto. En este ejemplo, iré con ASP.NET Core Hosted para explicar más adelante acerca de tener controladores API. Después, cree también el proyecto Blazor Server-Side.

   
   

---

1. A partir de este momento, la estructura de su proyecto debería ser similar a la primera captura de pantalla a continuación.

   Elimine los elementos resaltados en el proyecto Blazor Server-Side que se muestra en la segunda captura de pantalla a continuación.

   
   

---

1. Haga referencia al proyecto Blazor WASM al proyecto Blazor Server-Side.

   • ASP.NET Core alojado : haga referencia tanto al BlazorWasm.Client& BlazorWasm.Serverproject.
   • Independiente : haga referencia al proyecto único Blazor WASM tal como está.

---

1. Vaya a la Startupclase del proyecto Blazor Server-Side. En ConfigureServices(), elimine el WeatherForecastServicejunto con el BlazorServer.Dataespacio de nombres y luego agregue un servicio para HttpClientque lo utilicen los archivos de afeitar del proyecto Blazor WASM.

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   NOTA En producción, no sugiero crear una instancia de HttpClient. Utilice en su IHttpClientFactorylugar. Visite este artículo Use IHttpClientFactory para implementar solicitudes HTTP resistentes .

   Para proyectos ASP.NET Core WASM

   En Configure(), mapee los puntos finales de los controladores. Esto usará los controladores en el proyecto X.Server/ BlazorWasm.Server.

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. Ir a la _Host.cshtmlde la / Páginas de la carpeta del proyecto Blazor del lado del servidor. Cambie la referencia de css/site.cssa css/app.cssya que los nombres de archivo para el archivo CSS principal para el proyecto Blazor WASM son diferentes.

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. Por último, cambiar el Appen el typeatributo de la componentetiqueta y haga referencia al Apparchivo de clase de la maquinilla de afeitar en el proyecto Blazor WASM. En este ejemplo, la Appclase se encuentra en el BlazorWasm.Clientproyecto:

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

¡Eso es! Cuando ejecuta el proyecto del lado del servidor de Blazor, debe cargarse sin el texto "Cargando ...".

• No se realizaron cambios en el (los) proyecto (s) Blazor WASM y no se realizó una duplicación significativa de código.
• Las únicas cosas que pueden cambiar son las referencias y el launchSettings.json& appsettings.json.
• En cuanto a las configuraciones en el Startuplado del servidor de Blazor, puede crear métodos de extensión en los proyectos de Blazor WASM y usarlos en el proyecto del lado del servidor de Blazor.

NOTA: Honestamente, creo que esto es ideal (?) Solo para depurar durante el desarrollo, ya que los archivos de afeitado WASM no utilizarán completamente la capacidad de un verdadero Blazor Server-Side porque todavía usaría solicitudes HTTP.

---

¡Esperando retroalimentación abajo! : DD