11

We would like to develop a client-side Blazor component for one of our clients to embed on a page in their website. The website is written with Drupal, but really my question refers to integrating Blazor into any non-ASP.NET website.

This image from https://www.nativoplus.studio/blog/blazor-introduction/ seems to suggest that this should be possible as none of the runtime parts are relying on a .NET host:

Blazor architecture diagram showing dev time and runtime elements

As I understand it, a client-side Blazor component is run using a combination of WASM and JavaScript for interop so it seems like it should be possible to embed a Blazor component on any website, not just one written with .NET?

(Possibly Mono.wasm might also need to be also present, I'm not sure if that's only used for compiling our C# client-app to wasm, or if that's needed when running the app too?)

Is this theoretically possible, or am I missing something obvious that makes that a non-starter?

If so, could anyone give an example of what files we would need to tell our client's website company to add to the site and where those files should be located?

Improve this question
4
  • You will need mono.wasm, it is a .NET Host (runtime). Commented Jul 30, 2019 at 14:48
  • @HenkHolterman Oh I see, so in the example image above all the .net libraries (System etc.) called by YourApp.wasm are residing in the mono.wasm file? Commented Jul 30, 2019 at 14:51
  • 1
    Your C# client-app is not compiled to wasm, and it needs the mono runtime, which is itself compiled to assembly. As far as I know, future plans to enable your Blazor app to be compiled to assembly AOT Commented Jul 30, 2019 at 15:07
  • 1
    Yes, in the current form there is no YourApp.wasm, just YourApp.dll . Commented Jul 30, 2019 at 16:10

2 Answers 2

Reset to default
4

Yes. This is possible. Once you publish client-side Blazor application using dotnet publish resulting files can be served from any static file hosting. For example you could serve the results using http-server . from the folder where results are published.

To control appearance where Blazor application would be visible in the final HTML application, you can augment index.html as you see fit. <app> tag would be replaced by Blazor application.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Is there a way to then say which DOM element the Blazor app should be rendered into? E.g. the equivalent of app.AddComponent<App>("app"); ?
If you look at index.html in the wwwroot, this is example how you can embed Blazor in regular HTML pages. if you have tag <app> it will be converted to Blazor application.
I thought the app.AddComponent<App>("app") line in Startup.cs caused that substitution to occur?
Yes. You are correct. but think that way. You have static HTML page with well known for Client Blazor tags. Once Client Blazor initializes, it run Program.cs and setup itself. Pretty much like any jQuery plugin instantiates themselves. Program.cs in Client Blazor look for tags registered using app.AddComponent and convert these tags into Blazor components. That's it. I suspect that we think the same, just use different words.
Oh yes of course! I'm so used to server-side Blazor that I'm forgetting that for client side Blazor there's a Startup.cs in the client app project too, and that one is part of the code running in the browser. I was thinking of it as code running on the server (where it couldn't run if there was no .NET running).
2

Should be possible. From here: https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0:

An ASP.NET Core web server isn't required to host the app. Serverless deployment scenarios are possible (for example, serving the app from a CDN).

If I publish a client-side Blazor project within Visual Studio to the file system then I get the index.html, css folder and a _framework folder containing the js and wasm files.

I guess it should be possible to serve those from wherever, but not tried it.

Improve this answer

1 Comment

Yes, but Blazor brings a router, I'm not sure how (if) the navigation will work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.