In previous post, we have seen there are two types of Blazor WebAssembly apps, – Hosted App and Standalone app. In this article, we are going to create a Blazor WebAssembly Standalone App and we will try to make an API call from that application.

Hosted vs Standalone Apps

A hosted app provides an ASP .NET Core website at the server, which can serve requests for the Blazor WebAssembly app and it can also host the APIs. It is one way to keep all your application (backend APIs + frontend) together at one place in one solution.

If you are developing a new application, it may be easy to go for hosted app, but if you have an existing API application already, then you may lean towards standalone app.

Again, this decision depends upon the architecture you are adopting and technical roadmap and many other things. For the sake of this article, we already have created minimal API solution and we are going to use that. And I do not want to create another API project. That’s why we are going to use Blazor Standalone app.

Creating Web API

We already have created a minimal API in previous posts. If you want to have a look, then below is the list of posts. You can follow the instructions there to get the minimal API to a working state.

• .NET 7 – Getting started on Minimal APIs
• .NET 7 – Configure Minimal APIs to use EF Core Database
• .NET 7 – Minimal APIs with Serilog Logging Providers
• .NET 7 – Minimal API and Dependency Injection
• .NET 7 – Using Configurations with Minimal API

Create Blazor Standalone App

Let’s open the MinimalApiDemo solution and let’s try to add a new Blazor WebAssembly App project, by right clicking on the solution node in solution explorer and then selecting Add -> New Project from the context menu.

So, in previous article we have seen how to create Standalone app using Visual Studio. After coming on create new project wizard, search for Blazor WebAssembly App and then click on next.

Then on next screen provide project name (let’s say BlazorWasmApp). As we are adding project to an existing solution, there is no input box for providing solution name. On the next screen in wizard, ensure that ASP .NET Core Hosted option is unselected as shown in the below snapshot. Then click on Create.

Enable CORS in API

Our API server has different base address than the web app. Hence, the requests originated from web app would not be entertained by our API. In order to enable the requests from web app, we need to enable CORS on API host.

The code given below shows how I enabled CORS. Of course, the CORS policy should be a lot stricter than shown below. For example, ideally, it should specify specific host names, which are allowed. But as CORS is not main topic of today’s post and I am goin to run my applications locally, I would leave it as shown below.

Create Service Client

If we open Program.cs and check the main method in Blazor WebAssembly App, we can see that an HttpClient is already registered in the services container. The base address for this HttpClient is set to be the base address where the Blazor App is running – as shown in the code snippet given below.

So, HttpClient dependency is already registered in the container. The base addresses of the client needs to be updated, but let’s do that later. First, let’s create a folder named Services in the Blazor WebAssembly project. In that folder, let’s add StudentsApiClient class. This class would depend on HttpClient to make call to the API. Let’s add a method GetStudentsAsync, which makes an HTTP GET request to our API.

The code snippet given below shows the complete code in this StudentsApiClient class.

Register New Dependency

We have created a new class StudentsApiClient, which would be used by FetchData.razor page to make API call. Hence this dependency would be injected in FetchData. In order to be able to inject dependency in FetchData page, we need to register it.

Also, as said before – in our case, the API application is different than the web app, so they have different addresses. So, we will need to setup HttpClient to use the base address of the API project.

The code snippet given below is the modified Main method from the Blazor WebAssembly project. Notice that the base address for HttpClient has been updated. It should be the host and port on which API is running. Also, we have registered the service client dependency.

Modify Razor Page

Now, we have new service client, which is registered with DI container. We also have corrected base address of HttpClient. So, it’s now time to modify FetchData.razor file.

We are going to inject StudentsApiClient in this file using @inect. Then we are going to trigger a call to GetStudentsAsync on an event – OnInitializedAsync – which automatically gets triggered when the page is initialized.

The complete code from FetchData.razor is given below:

Run and Verify !

Now, in the solution, we can set multiple projects as Startup Projects (MinimalApiDemo and BlazorWasmApp).

This can be done by right clicking on the solution and then selecting Properties from the context menu. Then select the radio button “Multiple startup projects” as shown below. Ensure action “Start” is selected in the action column for Blazor project and Web API project.

Then we can hit the run button in Visual Studio. In the browser window where Blazor app is loaded, select Fetch data option from the navigation and we can see that students list is shown on the UI.

Final Notes

Here, we have a running demonstration of how the API calls can be made from Blazor WebAssembly application. We have used HttpClient directly in the service client, but we can use HttpClientFactory and then get Named or Typed clients as well.

I hope you find this information helpful. Let me know your thoughts.