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?

tomRedox
  • 28,092
  • 24
  • 117
  • 154
  • You will need mono.wasm, it is _a_ .NET Host (runtime). – H H Jul 30 '19 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? – tomRedox Jul 30 '19 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 – enet Jul 30 '19 at 15:07
  • 1
    Yes, in the current form there is no YourApp.wasm, just YourApp.dll . – H H Jul 30 '19 at 16:10

2 Answers2

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.

codevision
  • 5,165
  • 38
  • 50
  • 1
    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");` ? – tomRedox Jul 30 '19 at 15:34
  • 1
    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 `` it will be converted to Blazor application. – codevision Jul 30 '19 at 15:54
  • 1
    I thought the `app.AddComponent("app")` line in Startup.cs caused that substitution to occur? – tomRedox Jul 30 '19 at 16:08
  • 1
    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. – codevision Jul 31 '19 at 06:17
  • 1
    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). – tomRedox Jul 31 '19 at 06:25
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.

robaker
  • 1,028
  • 7
  • 11
  • Yes, but Blazor brings a router, I'm not sure how (if) the navigation will work. – H H Jul 30 '19 at 16:09