{"id":40014,"date":"2020-12-31T00:43:30","date_gmt":"2020-12-31T07:43:30","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=40014"},"modified":"2020-12-30T10:52:50","modified_gmt":"2020-12-30T17:52:50","slug":"microfrontends-with-blazor-webassembly","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/microfrontends-with-blazor-webassembly\/","title":{"rendered":"MicroFrontends With Blazor WebAssembly"},"content":{"rendered":"<p><a href=\"https:\/\/medium.com\/@waelkdouh\" target=\"_blank\" rel=\"noopener noreferrer\">Wael Kdouh<\/a> embarks on a mission to uncover the details behind the implementation of MicroFrontends under Blazor WebAssembly applications.<\/p>\n<hr \/>\n<p id=\"4b0b\" class=\"hj hk fq hl b hm hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic di dz\" data-selectable-paragraph=\"\">I recently embarked on a mission to uncover the details behind the implementation of MicroFrontends under Blazor WebAssembly applications. This post represents a summary of my findings along with a sample application that should serve as a good starting point as you start your own journey of introducing MicroFrontends to your Blazor WebAssembly project.<\/p>\n<p id=\"56da\" class=\"hj hk fq hl b hm id hn ho hp ie hq hr hs if ht hu hv ig hw hx hy ih hz ia ic di dz\" data-selectable-paragraph=\"\">An excellent place to start understanding Micr<span id=\"rmm\">o<\/span>Frontends is the\u00a0<a class=\"do ii\" href=\"https:\/\/www.youtube.com\/watch?v=npff2NjVXEE&amp;list=PLdo4fOcmZ0oVWop1HEOml2OdqbDs6IlcI&amp;index=51\" rel=\"noopener nofollow\">following<\/a>\u00a0session from .Net Conf 2020 by Florian Rappl. In the session Florian goes through the different options available to introduce MicroFrontends to a Blazor WebAssembly application. I won\u2019t go again over the problem statement of Monolithic Frontends or the possible solutions that Florian discussed as you can refer to his session. Instead in this post I will focus on the details of implementing MicroFrontends in Blazor WebAssembly utilizing the Modular distributed web application model which is demonstrated in the figure below.<\/p>\n<p data-selectable-paragraph=\"\"><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/12\/microfrontends.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-40015\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/12\/microfrontends.png\" alt=\"Image microfrontends\" width=\"624\" height=\"242\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/12\/microfrontends.png 624w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/12\/microfrontends-300x116.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<p data-selectable-paragraph=\"\">Continue reading on <a href=\"https:\/\/medium.com\/@waelkdouh\/microfrontends-with-blazor-webassembly-b25e4ba3f325\">Wael&#8217;s blog.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post we were able to demonstrate how to maintain different components as separate libraries which could be imported into the main shell in order to allow modular distributed development.<\/p>\n","protected":false},"author":582,"featured_media":40017,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10603],"tags":[8496,62],"class_list":["post-40014","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor","tag-blazor","tag-microservices"],"acf":[],"blog_post_summary":"<p>In this post we were able to demonstrate how to maintain different components as separate libraries which could be imported into the main shell in order to allow modular distributed development.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/40014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=40014"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/40014\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/40017"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=40014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=40014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=40014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}