Suggestions to make js-spa-frameworks more accessible

[MarkStega]

Description

Documentation Needs a Boost

The only documentation available for creating Blazor based custom elements is the official Microsoft documentation. It is sparse on details and does not really give enough guidance to actually deploy
a Blazor WASM custom element. This is of course subjective, but having gone through the process of trial and error to get this working, I believe that more detailed documentation would be very helpful to others trying to do the same thing.

I am referring to one page in particular: js-spa-framework

• Concrete example 1: in the section 'Angular sample apps' the apps are welcome but as .Net 7 apps expecting someone to
  migrate them to .Net 10 is a big ask. It would be much better to have .Net 10 sample apps. So much has changed
  that the .Net 7 apps are not very helpful for someone trying to do this in .Net 10.
• Concrete example 2: in the section 'Blazor WebAssembly registration' it would be more clear to
  to show the actual code to register the custom element, rather than the multiple snippets.
  Add the narrative about each snippet after the complete example.

using BlazorSample.Pages;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// register the counter component as a custom element
builder.RootComponents.RegisterCustomElement<Counter>("my-counter");

await builder.Build().RunAsync();

• Concrete example 3: There is no section 'Blazor WebAssembly build'. Presuming it is obvious that the
  path to success is to use the
  dotnet publish -c Release command is used to build the Blazor WASM custom element is a bit much. At least a reference toHost and Deploy saying that the process is to publish the app and to see that page for details.
• Concrete example 4: On review I think the page could be broken into four sections; 1) Render Razor components from JavaScript 2) Blazor custom elements 3) Generate Angular and React components 4) Sample applications. Then use the title "Use Razor components in JavaScript apps and SPA frameworks" to group them together.
• Opinions all, but I really think that more detailed documentation would be very helpful to others trying to create Blazor based custom elements.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?view=aspnetcore-10.0&preserve-view=true

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/components/js-spa-frameworks.md

Document ID

444b03b4-f910-656a-642c-6c9064d6ce28

Platform Id

7a780b6c-439a-f08a-982d-59818d9cda2c

Article author

@guardrex

Metadata

• ID: 444b03b4-f910-656a-642c-6c9064d6ce28
• PlatformId: 7a780b6c-439a-f08a-982d-59818d9cda2c
• Service: aspnet-core
• Sub-service: blazor

Related Issues

[github-actions]

🦃 Happy Thanksgiving! 🍽️

Stand-by! A green dinosaur 🦖 will be along shortly to assist.

[guardrex]

Thanks, @MarkStega ... SUPER helpful! 🎷

cc: @maraf

Most, if not all of this, I can handle. I'll ping if I get stuck along the way. Timing is unclear at the moment because we're in the midst of the .NET 10 release. Let's see if I can reach this within a week or two 🤞🍀.