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
