Extending Futuristic Architecture To Blazor WASM

In my previous Blazor blog, we learned about how we can create an external component library with the same code 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 a previous Blazor Blog, let's delete the pages and shared folders along with _Imports.Razor and App.Razor files as shown in the below screenshot,
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 3
 
Now expand wwwroot folder and delete everything except index.html as shown in the below screenshot,
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 4
 
Now your project structure will look something like the following screenshot,
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 5
 
In order to use the external component library, right click on the project and select Add=> Reference as as shown in the below screenshot,
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 6
 
The previous step will open the following screen, Select BlazorComponents project as shown in the below screenshot to add reference.
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 7
 
The next step is to update the code, so open Startup.cs and add the using BlazorComponents; at the top as highlighted in the below code screenshot, so that the application uses the App class from component library.
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 7
 
Similarly update the CSS using code of index.html in wwwroot folder to use CSS from components library as highlighted in the below code screenshot,
 
Extending Futuristic Architecture To Blazor WASM 
 
Step 8
 
Your Blazor WebAssembly application using external component support is ready. Now when you execute the application, you will get the following output which is exactly the same as the output from the default Blazor Template.
 
Extending Futuristic Architecture To Blazor WASM
 
In this blog we learned about how we can use an external component library with code in the same way as the Blazor Default template in Blazor WebAssembly application. The code of this project template is available here at Github