3

EDIT 2022-08-18: I haven't tested this myself, but this should now be possible by leveraging web components. Can we consume a Blazor component as a Web Component within a regular non-Blazor HTML page? https://youtu.be/kesUNeBZ1Os?t=970 (I recommend the whole video by the way, excellent content!)

Having an existing ASP.NET MVC5 app which is not feasible to rewrite all in one go, how can we start incorporating (client-side) Blazor to replace parts of that app?

EDIT: We would need to have pages where parts of it are MVC5 and other parts are Blazor where this would work seamless for the end user.

From what I have found so far the best (and only?) option would be to host Blazor in a different site and include it as an iframe in the original site using JavaScript interop to communicate data between the two sites.

I haven't found any examples for this, please let me know if you know of any or have another idea that might work!

Trygve
  • 2,445
  • 1
  • 19
  • 23

2 Answers2

3

Just wanted to update this question with what we have found as a satisfying solution now. We have developed a working proof-of-concept of this way of combining Blazor and any other client side technology. It is using a separate IFrame for the Blazor application and the JavaScript PostMessage API to avoid issues with security (same-origin). It actually works quite well and is a nice way to swap out parts of the old MVC5 application with parts written in Blazor. I'll get around to do a quick writeup of it in a blogpost soon hopefully.

Trygve
  • 2,445
  • 1
  • 19
  • 23
  • 1
    So where's that blog post? – Ian Kemp Feb 19 '21 at 12:17
  • @IanKemp, no time :( But hopefully the hints given in the answer will get people started. The most important part is the PostMessage javascript API with a tiny bit of JS on both the main window and in the Blazor app in the iframe. We now have this running in production and the only issue so far is with (very) old browsers and long initial loading time for the Blazor app for people on slow connections. To alleviate the issue it is possible to start downloading the Blazor bits in a hidden iframe on the first page IF the page where the Blazor iframe is not the first page the users will access – Trygve Jun 16 '21 at 13:52
  • Would really love some more information about your solution. We have the exact same issue where I work. – user1784297 Sep 30 '21 at 15:10
0

The iFrame seems clunky, but to my knowledge there's no way for the MVC 5 app to reference and use the Blazor WASM App.

Wouldn't it be possible for you to just set up a third proxy MVC application to manage the routing and state between the two applications? You could abstract your business logic from the current MVC app to a .Net Standard library that both projects could share.

And if they both consumed the same backend API you wouldn't need to do much to start transferring over. Once everything was moved to the new Blazor client app you could kill of the MVC app and the proxy.

This would be similar to implementing a Strangler Pattern to transfer from a monolithic web api to microservices.

Shawn Deggans
  • 34
  • 2
  • Why would MVC5 need to reference a Blazor app at all? The Blazor app would be running on the client side, just like any Angular/React/Vue/VanillaJS app would be. The server side is irrelevant. – mason Nov 13 '19 at 15:39
  • I am not the one who asked the original question. – mason Nov 13 '19 at 16:42
  • Yes, Mason, you're correct that the server side is irrelevant, but my point was that being able to reference a WebAssembly would be a nice feature to have - a bit like being able to reference a Razor Class, but that's not a possibility. – Shawn Deggans Nov 13 '19 at 17:26
  • A third proxy MVC app sounds interesting, do you have any examples or articles to give me a head start for implementing that? I have edited my question to specify that I will need a page to consist of parts from both the original MVC5 app and Blazor. – Trygve Nov 14 '19 at 11:46
  • 1
    With your edit, I don't think you'll have much of a choice but to use iFrames. The proxy really only works if you can create an MVC app that hands off routing to the two applications hosted on different servers. You would have your legacy application and then the blazor application, but the proxy would manage the routing. But since you need to mix page components, the iFrame is probably the way to go. – Shawn Deggans Nov 15 '19 at 17:05