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,
Step 3
Now expand wwwroot folder and delete everything except index.html as shown in the below screenshot,
Step 4
Now your project structure will look something like the 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 the below screenshot,
Step 6
The previous step will open the following screen, Select BlazorComponents project as shown in the below screenshot to add reference.
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.
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,
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.
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