fix bit Boilerplate WebInteropApp's issue in Blazor Weasm Stadalone (#11489)

.github/workflows/admin-sample.cd.yml

@@ -120,11 +120,6 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools
 
-    - name: Enable WebInteropApp route
-      run: |
-          # Uncomment the Route attribute for WebInteropApp component as noted in the WebInteropApp.razor's comments
-          sed -i 's/@\* @attribute \[Route("web-interop-app")\] \*@/@attribute [Route("web-interop-app")]/' AdminPanel/src/Client/AdminPanel.Client.Core/Components/WebInteropApp.razor
-
     - name: Generate CSS/JS files
       run: dotnet build AdminPanel/src/Client/AdminPanel.Client.Core/AdminPanel.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APP_VERSION}}" --no-restore -c Release
 

.github/workflows/todo-sample.cd.yml

@@ -151,11 +151,6 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools
 
-    - name: Enable WebInteropApp route
-      run: |
-          # Uncomment the Route attribute for WebInteropApp component as noted in the WebInteropApp.razor's comments
-          sed -i 's/@\* @attribute \[Route("web-interop-app")\] \*@/@attribute [Route("web-interop-app")]/' TodoSample/src/Client/TodoSample.Client.Core/Components/WebInteropApp.razor
-
     - name: Generate CSS/JS files
       run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APP_VERSION}}" --no-restore -c Release
 
@@ -203,11 +198,6 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools
 
-    - name: Enable WebInteropApp route
-      run: |
-          # Uncomment the Route attribute for WebInteropApp component as noted in the WebInteropApp.razor's comments
-          sed -i 's/@\* @attribute \[Route("web-interop-app")\] \*@/@attribute [Route("web-interop-app")]/' TodoSample/src/Client/TodoSample.Client.Core/Components/WebInteropApp.razor
-
     - name: Configure bswup # Always AlwaysPrerender is the last item, so overriding it has the desired effect
       run: |
           sed -i "s/\/\/ self.mode = 'AlwaysPrerender'/self.mode = 'FullOffline'/g" TodoSample/src/Client/TodoSample.Client.Web/wwwroot/service-worker.published.js
@@ -259,11 +249,6 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools
 
-    - name: Enable WebInteropApp route
-      run: |
-          # Uncomment the Route attribute for WebInteropApp component as noted in the WebInteropApp.razor's comments
-          sed -i 's/@\* @attribute \[Route("web-interop-app")\] \*@/@attribute [Route("web-interop-app")]/' TodoSample/src/Client/TodoSample.Client.Core/Components/WebInteropApp.razor
-
     - name: Generate CSS/JS files
       run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APP_VERSION}}" --no-restore -c Release
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/WebInteropApp.ts

@@ -1,4 +1,4 @@
-// Read Components/WebInteropApp.razor comments.
+// Read Client.web/wwwroot/web-interop-app.html comments.
 
 declare class BitButil {
     static webAuthn: {

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/Contracts/IExternalNavigationService.cs

@@ -1,6 +1,6 @@
 namespace Boilerplate.Client.Core.Services.Contracts;
 
-// Check out WebInteropApp.razor's comments.
+// Check out Client.web/wwwroot/web-interop-app.html's comments.
 public interface IExternalNavigationService
 {
     Task NavigateToAsync(string url);

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Boilerplate.Client.Maui.csproj

@@ -119,6 +119,10 @@
 
     <ItemGroup>
 
+        <Content Include="..\Boilerplate.Client.Web\wwwroot\web-interop-app.html" Link="wwwroot\web-interop-app.html">
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </Content>
+
         <Using Include="Microsoft.AspNetCore.Components.WebView.Maui" />
         <Using Include="Boilerplate.Client.Core.Components.Layout" />
         <Using Include="Boilerplate.Client.Core.Components.Pages" />

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Services/MauiLocalHttpServer.cs

@@ -8,10 +8,9 @@
 
 namespace Boilerplate.Client.Maui.Services;
 
-// Checkout WebInteropApp.razor's comments.
+// Checkout Client.web/wwwroot/web-interop-app.html's comments.
 public partial class MauiLocalHttpServer : ILocalHttpServer
 {
-    [AutoInject] private HtmlRenderer htmlRenderer;
     [AutoInject] private PubSubService pubSubService;
     [AutoInject] private IExceptionHandler exceptionHandler;
 
@@ -143,13 +142,6 @@ await MainThread.InvokeOnMainThreadAsync(() =>
 
                 await GoBackToApp();
             }))
-            .WithModule(new ActionModule("/web-interop-app", HttpVerbs.Get, async ctx =>
-            {
-                var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
-                    (await htmlRenderer.RenderComponentAsync<WebInteropApp>()).ToHtmlString());
-
-                await ctx.SendStringAsync(html, "text/html", Encoding.UTF8);
-            }))
             .OnAny(async ctx =>
             {
                 var ctxImplementation = (IHttpContextImpl)ctx;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/Services/MauiWebAuthnService.cs

@@ -15,7 +15,7 @@ public override async ValueTask<JsonElement> GetWebAuthnCredential(JsonElement o
 
         ((MauiLocalHttpServer)localHttpServer).WebAuthnService = this;
 
-        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/web-interop-app?actionName=GetWebAuthnCredential");
+        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/{PageUrls.WebInteropApp}?actionName=GetWebAuthnCredential");
 
         return await GetWebAuthnCredentialTcs.Task;
     }
@@ -30,7 +30,7 @@ public override async ValueTask<JsonElement> CreateWebAuthnCredential(JsonElemen
 
         ((MauiLocalHttpServer)localHttpServer).WebAuthnService = this;
 
-        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/web-interop-app?actionName=CreateWebAuthnCredential");
+        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/{PageUrls.WebInteropApp}?actionName=CreateWebAuthnCredential");
 
         return await CreateWebAuthnCredentialTcs.Task;
     }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js

@@ -97,7 +97,7 @@ self.serverHandledUrls = [
     /\/products.xml/,
     //#endif
     /\/sitemap_index.xml/,
-    /\/web-interop-app/
+    /\/web-interop-app.html/
 ];
 
 // self.mode = 'FullOffline'; // Traditional PWA app that **first** downloads all assets and **then** runs the app.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/WebInteropApp.razor → src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/web-interop-app.html

@@ -1,6 +1,4 @@
-@*+:cnd:noEmit*@
-@*
-Most web features like animations, videos, or Google reCAPTCHA work fine in Blazor Hybrid.
+<!-- Most web features like animations, videos, or Google reCAPTCHA work fine in Blazor Hybrid.
 However, since Blazor Hybrid uses Web View with an IP-based Origin (http://0.0.0.1)
 more sensitive features like Social Sign-in and Face-ID/Fingerprint Sign-in using WebAuthn do not function properly in Web View.
 To address this, within a Blazor Hybrid App, you can use a Local HTTP Server to load a lightweight WebInteropApp component that
@@ -13,13 +11,7 @@
 allowing the main Window to resume its operations.
 
 When publishing Client.Web (BlazorWebAssembly Standalone) and Server.Api, there won't be any WebInteropAppEndpoint,
-in this case, uncomment the Route attribute below to make this component accessible via /web-interop-app route.
-*@
-@* @attribute [Route("web-interop-app")] *@
-
-@code {
-    [Inject] public IStringLocalizer<AppStrings> Localizer { get; set; } = default!;
-}
+in this case, uncomment the Route attribute below to make this component accessible via /web-interop-app route. -->
 
 <html>
 <head>
@@ -86,7 +78,7 @@
                 animation: rotate-three 1s linear infinite;
             }
 
-        @@keyframes rotate-one {
+        @keyframes rotate-one {
             0% {
                 transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
             }
@@ -96,7 +88,7 @@
             }
         }
 
-        @@keyframes rotate-two {
+        @keyframes rotate-two {
             0% {
                 transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
             }
@@ -106,7 +98,7 @@
             }
         }
 
-        @@keyframes rotate-three {
+        @keyframes rotate-three {
             0% {
                 transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
             }
@@ -116,15 +108,10 @@
             }
         }
     </style>
-
-    @*#if (appInsights == true)*@
-    <link rel="preconnect" href="https://js.monitor.azure.com" crossorigin />
-    <!-- Perform the initial static render of ApplicationInsightsInit to start App Insights ASAP. -->
-    <BlazorApplicationInsights.ApplicationInsightsInit />
-    @*#endif*@
 </head>
 <body>
-    <div class="title">@Localizer[nameof(AppStrings.PleaseWait)]</div>
+    <div class="title">Please wait</div>
+
     <div class="loader">
         <div class="inner one"></div>
         <div class="inner two"></div>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Boilerplate.Client.Windows.csproj

@@ -49,6 +49,9 @@
         <Content Include="..\Boilerplate.Client.Maui\wwwroot\index.html" Link="wwwroot\index.html">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>
+        <Content Include="..\Boilerplate.Client.Web\wwwroot\web-interop-app.html" Link="wwwroot\web-interop-app.html">
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </Content>
         <Content Include=".config\dotnet-tools.json" />
     </ItemGroup>
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Services/WindowsLocalHttpServer.cs

@@ -8,10 +8,9 @@
 
 namespace Boilerplate.Client.Windows.Services;
 
-// Checkout WebInteropApp.razor's comments.
+// Checkout Client.web/wwwroot/web-interop-app.html's comments.
 public partial class WindowsLocalHttpServer : ILocalHttpServer
 {
-    [AutoInject] private HtmlRenderer htmlRenderer;
     [AutoInject] private PubSubService pubSubService;
     [AutoInject] private IExceptionHandler exceptionHandler;
     [AutoInject] private ClientWindowsSettings clientWindowsSettings;
@@ -111,13 +110,6 @@ async Task GoBackToApp()
 
                 await GoBackToApp();
             }))
-            .WithModule(new ActionModule("/web-interop-app", HttpVerbs.Get, async ctx =>
-            {
-                var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
-                    (await htmlRenderer.RenderComponentAsync<WebInteropApp>()).ToHtmlString());
-
-                await ctx.SendStringAsync(html, "text/html", Encoding.UTF8);
-            }))
             .OnAny(async ctx =>
             {
                 var ctxImplementation = (IHttpContextImpl)ctx;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Windows/Services/WindowsWebAuthnService.cs

@@ -16,7 +16,7 @@ public override async ValueTask<JsonElement> GetWebAuthnCredential(JsonElement o
 
         ((WindowsLocalHttpServer)localHttpServer).WebAuthnService = this;
 
-        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/web-interop-app?actionName=GetWebAuthnCredential");
+        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/{PageUrls.WebInteropApp}?actionName=GetWebAuthnCredential");
 
         return await GetWebAuthnCredentialTcs.Task;
     }
@@ -32,7 +32,7 @@ public override async ValueTask<JsonElement> CreateWebAuthnCredential(JsonElemen
 
         ((WindowsLocalHttpServer)localHttpServer).WebAuthnService = this;
 
-        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/web-interop-app?actionName=CreateWebAuthnCredential");
+        await externalNavigationService.NavigateToAsync($"http://localhost:{localHttpServer.Port}/{PageUrls.WebInteropApp}?actionName=CreateWebAuthnCredential");
 
         return await CreateWebAuthnCredentialTcs.Task;
     }

src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Identity/IdentityController.SocialSignIn.cs

@@ -99,10 +99,10 @@ public async Task<ActionResult> SocialSignInCallback(string? returnUrl = null, i
             await Request.HttpContext.SignOutAsync(IdentityConstants.ExternalScheme); // We'll handle sign-in with the following redirects, so no external identity cookie is needed.
         }
 
-        var redirectRelativeUrl = $"web-interop-app?actionName=SocialSignInCallback&url={Uri.EscapeDataString(signInPageUri!)}&localHttpPort={localHttpPort}";
+        var redirectRelativeUrl = $"{PageUrls.WebInteropApp}?actionName=SocialSignInCallback&url={Uri.EscapeDataString(signInPageUri!)}&localHttpPort={localHttpPort}";
 
         if (localHttpPort is not null) 
-            return Redirect(new Uri(new Uri($"http://localhost:{localHttpPort}"), redirectRelativeUrl).ToString()); // Check out WebInteropApp.razor's comments.
+            return Redirect(new Uri(new Uri($"http://localhost:{localHttpPort}"), redirectRelativeUrl).ToString()); // Check out Client.web/wwwroot/web-interop-app.html's comments.
 
         return Redirect(new Uri(Request.HttpContext.Request.GetWebAppUrl(), redirectRelativeUrl).ToString());
     }

src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/appsettings.json

@@ -16,15 +16,15 @@
         //#if (filesStorage == "AzureBlobStorage")
         "azureblobstorage": "UseDevelopmentStorage=true",
         //#elif (filesStorage == "S3")
-        "smtp": "Endpoint=smtp://smtp.ethereal.email:587;UserName=madisen7@ethereal.email;Password=QYcYfjBXjqxMAZfZya",
-        "smtp_Comment": "You can also use https://ethereal.email/create for testing purposes.",
         "s3": "Endpoint=http://localhost:9000;AccessKey=minioadmin;SecretKey=minioadmin;",
         "s3__MinIOSample": "Endpoint=http://localhost:9000;AccessKey=minioadmin;SecretKey=minioadmin;",
         "s3__ContaboSample": "Endpoint=https://eu2.contabostorage.com;BucketName=files;Region=eu2;AccessKey=XXX;SecretKey=XXX;",
         "s3__HetznerSample": "Endpoint=https://hel1.your-objectstorage.com;BucketName=files;Region=eu-central;AccessKey=XXX;SecretKey=XXX;",
         "s3__DigitalOceanSample": "Endpoint=https://ams3.digitaloceanspaces.com;BucketName=myBucketName;Region=ams3;AccessKey=XXX;SecretKey=XXX;",
         "s3__CloudflareR2Sample": "Not supported yet: https://github.com/robinrodricks/FluentStorage/issues/114",
         //#endif
+        "smtp": "Endpoint=smtp://smtp.ethereal.email:587;UserName=madisen7@ethereal.email;Password=QYcYfjBXjqxMAZfZya",
+        "smtp_Comment": "You can also use https://ethereal.email/create for testing purposes.",
         "ConnectionStrings_Comment": "The ConnectionStrings section contains database connection strings used by the application."
     },
     //#if (signalR == true)

src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Program.Middlewares.cs

@@ -14,7 +14,6 @@
 using Boilerplate.Server.Api.Filters;
 using Boilerplate.Server.Api.Services;
 //#endif
-using Boilerplate.Server.Web.Endpoints;
 
 namespace Boilerplate.Server.Web;
 
@@ -155,7 +154,6 @@ public static void ConfigureMiddlewares(this WebApplication app)
         //#endif
 
         app.UseSiteMap();
-        app.UseWebInteropApp();
 
         // Handle the rest of requests with blazor
         var blazorApp = app.MapRazorComponents<Components.App>()

src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/PageUrls.cs

@@ -44,4 +44,6 @@ public static partial class PageUrls
     //#if (offlineDb == true)
     public const string OfflineDatabaseDemo = "/offline-database-demo";
     //#endif
+
+    public const string WebInteropApp = "/web-interop-app.html";
 }