search

jsakamoto / BlazorWasmPreRendering.Build

When you publish your Blazor Wasm app, this package pre-renders and saves the app as static HTML files in your public folder.
https://jsakamoto.github.io/BlazorWasmPreRendering.Build/
Mozilla Public License 2.0
261 stars 15 forks source link

Error when publishing to GitHub pages #13

Closed nakigoe closed 1 year ago

nakigoe commented 2 years ago

Here are my messages on publish from GitHub repo:

Start fetching...[http://127.0.0.1:5050/]
[18](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:18)
  Getting http://127.0.0.1:5050/...
[19](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:19)
Error: ROR] The HTTP status code was not OK. (it was (500)InternalServerError.)
[20](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:20)
      System.InvalidOperationException: Cannot provide a value for property 'Analytics' on type 'Blazor.Analytics.Components.NavigationTracker'. There is no registered service of type 'Blazor.Analytics.IAnalytics'.
[21](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:21)
         at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
[22](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:22)
         at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
[23](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:23)
         at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
[24](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:24)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
[25](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:25)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
[26](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:26)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
[27](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:27)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
[28](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:28)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
[29](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:29)
         at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
[30](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:30)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
[31](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:31)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
[32](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:32)
      --- End of stack trace from previous location ---
[33](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:33)
         at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
[34](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:34)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
[35](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:35)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()
[36](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:36)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
[37](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:37)
         at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
[38](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:38)
         at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
[39](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:39)
         at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
[40](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:40)
         at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)
[41](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:41)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.HandleExceptionViaErrorBoundary(Exception error, ComponentState errorSourceOrNull)
[42](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:42)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task, ComponentState owningComponentState)
[43](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:43)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
[44](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:44)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)
[45](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:45)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
[46](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:46)
         at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)
[47](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:47)
         at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
[48](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:48)
         at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c__11`1.<<InvokeAsync>b__11_0>d.MoveNext()
[49](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:49)
      --- End of stack trace from previous location ---
[50](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:50)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
[51](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:51)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.StaticComponentAsync(HttpContext context, Type type, ParameterView parametersCollection)
[52](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:52)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, Object parameters)
[53](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:53)
         at AspNetCoreGeneratedDocument.Pages__Host.ExecuteAsync() in C:\Projects\Blazor\BlazorWasmPreRendering.Build\BlazorWasmPreRendering.Build\Pages\_Host.cshtml:line 5
[54](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:54)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
[55](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:55)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
[56](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:56)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
[57](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:57)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
[58](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:58)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
[59](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:59)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
[60](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:60)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
[61](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:61)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
[62](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:62)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
[63](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:63)
      --- End of stack trace from previous location ---
[64](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:64)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
[65](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:65)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
[66](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:66)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
[67](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:67)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
[68](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:68)
      --- End of stack trace from previous location ---
[69](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:69)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
[70](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:70)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
[71](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:71)
         at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
[72](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:72)
         at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
[73](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:73)

[74](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:74)
      HEADERS
[75](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:75)
      =======
[76](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:76)
      Host: 127.0.0.1:5050
[77](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:77)

[78](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:78)

[79](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:79)
  INFORMATION
[80](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:80)
  ===========
[81](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:81)
  The crawler encountered errors and/or warnings.
[82](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:82)
  If you want to keep running the pre-rendering server process for debugging it on live, you can do that by setting the "BlazorWasmPrerenderingKeepServer" MSBuild property to "true".
[83](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:83)

[84](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:84)
  ex) dotnet publish -p:BlazorWasmPrerenderingKeepServer=true
[85](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:85)

[86](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:86)
  Fetching complete.
[87](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:87)
/home/runner/.nuget/packages/blazorwasmprerendering.build/1.0.0-preview.23.0/build/BlazorWasmPreRendering.Build.targets(56,5): error MSB3073: The command "dotnet "/home/runner/.nuget/packages/blazorwasmprerendering.build/1.0.0-preview.23.0/build/../tools/net6.0/blazorwasm-prerendering-server.dll" -a "angelblaze" -t "angelblaze.App" --selectorofrootcomponent "#app,app" --selectorofheadoutletcomponent "head::after" -p "/home/runner/work/angelblaze/angelblaze/bin/Release/net6.0/publish" -i "/home/runner/work/angelblaze/angelblaze/obj/Release/net6.0/." -m "" -f "net6.0" --serviceworkerassetsmanifest "" -e "Prerendering" -o "AppendHtmlExtension"  -u "" -r "Static"" exited with code 1. [/home/runner/work/angelblaze/angelblaze/angelblaze.csproj]
[88](https://github.com/nakigoe/angelblaze/runs/5672208861?check_suite_focus=true#step:4:88)
Error: Process completed with exit code 1.
jsakamoto commented 2 years ago

@nakigoe

I guessed your Program.cs maybe like below:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
...
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddGoogleAnalytics("UA-111742878-2");
...
await builder.Build().RunAsync();

If that is true, you must rewrite your Program.cs to be like the below:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
...
// 👇 Please extract the service registration code into a static method named "ConfigureServices".
//    (Be careful that the static method name must be "ConfigureServices" exactly. Don't miss-spelling.)
ConfigureServices(builder.Services, builder.HostEnvironment);
...
await builder.Build().RunAsync();

static void ConfigureServices(IServiceCollection services, IWebAssemblyHostEnvironment hostEnvironment)
{
    services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(hostEnvironment.BaseAddress) });
    services.AddGoogleAnalytics("UA-111742878-2");
}

Could you try that out?

Or, if my guessing is false, please disclose your Program.cs code to me to reproduce and investigate this problem.

fingers10 commented 1 year ago

@nakigoe Refer Program.cs of ilovedotnet. I use use the Blazor.Analytics package in my project and it works fine. If you still face an issue please share your Program.cs or feel free to close this if your issue is resolved as this is in open sate for long time awaiting your response.

nakigoe commented 1 year ago

@jsakamoto 様 いつもお世話になっております。 Nakigoeです、凄く感謝いたします。

What I loved about Your project, is that the index.html files that are generated are claimed to be hidden from the user. Are they?

The NuGet is working for the basic project, but

1) the initial loading time with VPN enabled seems to be slower with this NuGet, it stucks for a long time on 95% and then after about 5 seconds more finally loads. That's odd for the basic template. Any recommendations? The initial loading is unacceptably slow when the VPN connection is enabled. I know that's the way Blazor WebAssembly operates, but is there a smart workaround?

2) 日本語が話せますけれど、Could You please utilize the LanguageTool or Grammarly or an alternative to correct your English to have clearer instructions in all of your articles

My code for a basic template: https://github.com/nakigoe/blazorwasm

The website that is generated: https://blazorwasm.nakigoe.org/

Does Your app work with Cookies, Globalization, and Localization? (the standard, a bit simplified Microsoft Globalization and Localization via the .resx files) I do have a serious Blazor WebAssembly website for Your NuGet: https://nakigoe.org Might I have your email to send the program.cs

Please cast an eye on my website:

NAKIGOE.ORG Nakigoe Academy NAKIGOE.ORG

nakigoe commented 1 year ago

Now I have an error in GitHub Actions when trying to utilize Your NuGet on that larger website. It seems to be about JSinterop

Compressing Blazor WebAssembly publish artifacts. This may take a while...
  angelblaze -> /home/runner/work/angelblaze/angelblaze/bin/Release/net7.0/publish/
  Start fetching...[http://127.0.0.1:5050/]
  Getting http://127.0.0.1:5050/...
Error: ROR] The HTTP status code was not OK. (it was (500)InternalServerError.)
      System.InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.
         at Toolbelt.Blazor.WebAssembly.PreRendering.Build.WebHost.Services.ServerSideRenderingJSRuntime.InvokeAsync[TValue](String identifier, Object[] args) in C:\Projects\My\Blazor\PreRendering\BlazorWasmPreRendering.Build.WebHost\Services\ServerSideRenderingJSRuntime.cs:line 39
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeAsync[TValue](IJSRuntime jsRuntime, String identifier, Object[] args)

  INFORMATION
  =============================
  The crawler encountered errors and/or warnings.

Error: X [ERROR] JavaScript interop calls cannot be issued at this time
  -----------------------------
  if you are calling JavaScript code in "OnInitializedAsync()" like this:

    @inject IJSRuntime JS
    ...
    protected async Task OnInitializedAsync() {
      await this.JS.InvokeVoidAsync("...", ...);
      ...

  Please consider changing the above code to like below.

    @inject IJSRuntime JS
    ...
    protected async Task OnAfterRenderAsync(bool firstRender) {
      if (firstRender) {
        await this.JS.InvokeVoidAsync("...", ...);
        ...

  For more detail, see also: https://docs.microsoft.com/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet#prerendering

  TIPS
  -----------------------------
  If you want to keep running the pre-rendering server process for debugging it on live, you can do that by setting the "BlazorWasmPrerenderingKeepServer" MSBuild property to "true".

  ex) dotnet publish -p:BlazorWasmPrerenderingKeepServer=true

  Fetching complete.
/home/runner/.nuget/packages/blazorwasmprerendering.build/2.0.0-preview.8/build/BlazorWasmPreRendering.Build.targets(62,5): error MSB3073: The command "dotnet "/home/runner/.nuget/packages/blazorwasmprerendering.build/2.0.0-preview.8/build/../tools/net7.0/BlazorWasmPreRendering.Build.dll" -a "angelblaze" -t "angelblaze.App" --selectorofrootcomponent "#app,app" --selectorofheadoutletcomponent "head::after" -p "/home/runner/work/angelblaze/angelblaze/bin/Release/net7.0/publish" -i "/home/runner/work/angelblaze/angelblaze/obj/Release/net7.0/." -m "" -f "net7.0" --serviceworkerassetsmanifest "" --environment "Prerendering" --emulateauthme "true" --locale "en" -o "IndexHtmlInSubFolders"  -u "" -r "Static" --serverport "5050-5[99](https://github.com/nakigoe/angelblaze/actions/runs/5104513967/jobs/9175488795#step:5:100)9" --bwapoptionsdllext "bin"" exited with code 1. [/home/runner/work/angelblaze/angelblaze/angelblaze.csproj]
Error: Process completed with exit code 1.
jsakamoto commented 1 year ago

@nakigoe

Now I have an error in GitHub Actions when trying to utilize Your NuGet on that larger website. It seems to be about JSinterop

This error will happen if you use the JavaScript interop feature of Blazor in the OnInitializedAsync life cycle. You can only call JavaScript code after OnAfterRenderAsync is invoked. That is a limitation of the BlazorWasmPreRendering.Build package.

See also: https://docs.microsoft.com/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet#prerendering

Please understand that the pre-rendering process runs outside the web browser, inside any PC locally, like a usual console app. Therefore, there is no JavaScript engine during the publishing process. This is the reason for the limitation that the JavaScript interop can not use in the OnInitializedAsync life cycle on pre-rendering.

日本語

このエラーは、「OnInitializedAsync」ライフ サイクルで Blazor の JavaScript 相互運用機能を使用する場合に発生します。 JavaScript コードは、「OnAfterRenderAsync」が呼び出された後にのみ呼び出すことができます。 これは、BlazorWasmPreRendering.Build パッケージの制限です。

参照: https://docs.microsoft.com/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet#prerendering

プリレンダリング プロセスは、通常のコンソール アプリと同様に、Web ブラウザーの外部、ローカルの PC 内で実行されることを理解してください。 したがって、公開プロセス中に JavaScript エンジンは存在しません。 これが、プリレンダリング時の OnInitializedAsync ライフサイクルで JavaScript 相互運用機能が使用できない制限の理由です。

jsakamoto commented 1 year ago

@nakigoe

is that the index.html files that are generated are claimed to be hidden from the user. Are they?

No. I've not intended to tell users that the generated HTML files are hidden from users. It might be your misunderstanding due to my English is terrible. I'll appreciate it if you pointed out where a paragraph of this package's document (README) lets you feel so.

日本語

生成された HTML ファイルがユーザーに対して非表示になることをユーザーに伝えるつもりはありません。 私の英語がひどいので誤解があるかもしれません。 このパッケージのドキュメント (README) のどの段落でそう感じられるかを指摘していただければ幸いです。

jsakamoto commented 1 year ago

@nakigoe

the initial loading time with VPN enabled seems to be slower with this NuGet, it stucks for a long time on 95% and then after about 5 seconds more finally loads.

I can't imagine that the loading time of a pre-rendered Blazor application will be significantly affected by whether it is connected to a VPN or not.

Could you verify the following link, Microsoft's demo site for the QuickGrid component, is also slow or not in your VPN connection environment? This site also utilizes the BlazorWasmPreRendering.Build package.

https://aspnet.github.io/quickgridsamples/

日本語

プリレンダリングされた Blazor アプリケーションの読み込み時間が、VPN に接続されているかどうかによって大きな影響を受けるとは想像できません。

次のリンク (QuickGrid コンポーネントの Microsoft のデモ サイト) も、あなたの VPN 接続環境で遅いかどうかを確認していただけますか? このサイトも、BlazorWasmPreRendering.Build パッケージを利用しています。

https://aspnet.github.io/quickgridsamples/

jsakamoto commented 1 year ago

@nakigoe

Does Your app work with Cookies, Globalization, and Localization? (the standard, a bit simplified Microsoft Globalization and Localization via the .resx files)

If you mean the "app" is this "BlazorWasmPreRendering.Build" package, the answer might be "Yes", but it depends on what you expect.

Please understand the working principle of the BlazorWasmPreRendering.Build package. The BlazorWasmPreRendering.Build package just makes your Blazor WebAssembly app run as a Blazor Server app with some tricks. Therefore, there is no difference in the pre-rendering process with the usual Blazor Server pre-rendering. It might be hard to understand if you are unfamiliar with the server-side pre-rendering on Blazor Server apps, but The BlazorWasmPreRendering.Build package isn't doing something special over the usual Blazor Server apps doing.

From that perspective, the BlazorWasmPreRendering.Build package supports all features as usual Blazor Server apps with server-side pre-rendering, such as Cookies, Globalization, and Localization. (However, the Cookie support doesn't make sense during the pre-rendering process because the pre-rendering process doesn't involve any HTTP request. Cookies are always empty during the pre-rendering process.)

日本語

アプリは Cookie、グローバリゼーション、ローカリゼーションに対応していますか? (.resx ファイルを使用した、標準の少し簡略化された Microsoft グローバリゼーションおよびローカリゼーション)

「アプリ」がこの「BlazorWasmPreRendering.Build」パッケージであるということであれば、答えは「はい」かもしれませんが、それはあなたが何を期待しているかによって異なります。

BlazorWasmPreRendering.Build パッケージの動作原理を理解してください。 BlazorWasmPreRendering.Build パッケージは、いくつかのトリックを使用して Blazor WebAssembly アプリを Blazor Server アプリとして実行するだけです。 したがって、プリレンダリング プロセスには、通常の Blazor Server のプリレンダリングと違いはありません。 Blazor Server アプリでのサーバー側のプリレンダリングに慣れていない場合は、理解するのが難しいかもしれませんが、BlazorWasmPreRendering.Build パッケージはそれ以上の特別なことをしているわけではありません。

その観点から、BlazorWasmPreRendering.Build パッケージは、サーバー側の事前レンダリングを備えた通常の Blazor サーバー アプリと同様に、Cookie、グローバリゼーション、ローカリゼーションなどのすべての機能をサポートします。 (ただし、プリレンダリング プロセスには HTTP リクエストが含まれないため、プリレンダリング プロセス中は Cookie サポートは意味を持ちません。プリレンダリング プロセス中、Cookie は常に空です。)

nakigoe commented 1 year ago

Your English is great、英語はも大丈夫でいらっしゃるのです。

jsakamoto commented 1 year ago

@nakigoe

Could You please utilize the LanguageTool or Grammarly or an alternative to correct your English to have clearer instructions in all of your articles

Thank you for your feedback! Actually, I'm a paid user of the grammarly.com premium subscription for now, so I'll refine the README document of the "BlazorWasmPreRendering.Build" package by using those tools later. And of course, I will always welcome it if you correct the README of the "BlazorWasmPreRendering.Build" and send pull requests for me.

jsakamoto commented 1 year ago

@nakigoe

Might I have your email to send the program.cs

You can send your files to me from the following link.

https://infragisticsinc297-my.sharepoint.com/:f:/g/personal/jsakamoto_infragistics_com/Ej0-9GtU6phJm5l2LM7BuhsB7isV6ELH_sSLEqy7Whn6CQ

jsakamoto commented 1 year ago

@nakigoe If you or your app is hard to make pre-rendered by using "BlazorWasmPreRendering.Build" due to its architecture, I can propose another method based on another architecture to pre-render it.

That method uses the react-snap. This approach runs your Blazor WebAssembly app as is, browses it with a built-in Chromium browser, collects rendered HTML in a browser, and saves them to static pre-rendered HTML files during publishing.

For more details about this method, please follow the article written by Niels Swimburger.NET 🍔 below. https://dev.to/swimburger/pre-render-blazor-webassembly-at-build-time-to-optimize-for-search-engines-359c

Generally, this method is more complex than adding a single NuGet package because you have to write a few script codes. However, in some cases, making the app to be server-side renderable to correspond to the "BlazorWasmPreRendering.Build" package will be more complex than using react-snap. So it will be better to know the using react-snap way to the second option.

nakigoe commented 1 year ago

HTML that is generated has errors according to https://validator.w3.org/nu/ Trailing slash on void elements has no effect and interacts badly with unquoted attribute values. The automatically generated trailing slash inside HTML tags prevents images from displaying when sharing the website on social networks (LinkedIn)

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0"/>
<title>Blazor WebAssembly .NET 7 Starting Template</title>
<meta name="description" content="Blazor WebAssembly .NET 7 production-ready starting template, coming from GitHub Actions and Vercel. Compression, linking, pre-rendering and analytics enabled."/>
<base href="/"/>
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet"/>
<link href="nakigoe.styles.css" rel="stylesheet"/>
<link rel="image_src" href="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg" type="image/jpeg"/>
<meta name="image_width" content="2048"/>
<meta name="image_height" content="2048"/>
<meta property="og:image:secure_url" content="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg"/>
<meta property="og:image" content="https://nakigoe.org/_SRC/nakigoe-academy-night-2048.jpg"/>
<meta property="og:image:type" content="image/jpeg"/>
<meta property="og:image:width" content="2048"/>
<meta property="og:image:height" content="2048"/>
<meta name="theme-color" content="#260040"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#260040"/>
<meta name="msapplication-navbutton-color" content="#260040"/>
<meta name="msapplication-TileColor" content="#260040"/>
<meta name="msapplication-TileImage" content="_SVG/icon.svg"/>
<link rel="icon" href="_SVG/icon.svg" sizes="any" type="image/svg+xml"/>
<link rel="apple-touch-icon-precomposed" href="_SVG/icon.svg" sizes="any" type="image/svg+xml"/>
<link rel="apple-touch-startup-image" href="_SVG/icon.svg" type="image/svg+xml"/>
jsakamoto commented 1 year ago

@nakigoe I split this issue to #31 to be easy to handle and save me from confusion.

nakigoe commented 1 year ago

Your extension is working for my website https://nakigoe.org, confirmed I did not try it in the giant complex website with APIs, Libraries, and databases, it is the next target for testing.