Extending Futuristic Architecture to Blazor WASM

In my previous Blazor blog, we learned about how we can create a external component library with code same as the Blazor Default template and use that external component library in Blazor Server application. 

In this blog article we will extend that solution to use that component library in Blazor Wasm (short name commonly used for WebAssembly) application in step by step fashion.  

Step-1: Create a Blazor.WebAssembly App following the steps mentioned in this blog

Step-2:  Since we will be using the external Razor Class library for UI which we created in previous Blazor Blog, Let's delete the Pages, Shared folders along with _Imports.Razor and App.Razor files as shown in below screenshot

Step-3:  Now expand wwwroot folder and delete everything except index.html as shown in below screenshot:

Step-4:  Now your project structure will look something like following screenshot

Step-5: In order to use the external component library, right click on the project and select Add=> Reference as  as shown in below screenshot:

Step-6: Previous step will open following screen, Select BlazorComponents project as shown in below screenshot to add reference.

Step-7:  Next step is to update the code, so open Startup.cs and add the using BlazorComponents;  at the top as highlighted in below code screenshot, so that the application uses the App class from component library.

Step-7:  Similarly update the CSS using code of index.html in wwwroot folder to use CSS from components library as highlighted in below code screenshot:

Step-8:  Your Blazor WebAssembly application using external component support is ready. Now when you execute the application, you will get following output which is exactly same as the output from default Blazor Template.


In this blog we learned about how we can use an external component library with code same as the Blazor Default template in Blazor WebAssembly application. The code of this project template is available here at Github




S Ravi Kumar

Ravi is an experienced IT professional with over 15 years of IT services experience using Microsoft technologies including like ASP.Net, C#, .Net Core, Xamarin.Forms, Azure etc.

Add a new comment

 

Comments