Create and Configure a Blazor Wasm App with a ASP.NET Core Web API in Azure: Dev To Azure - Part 3

28th October 2020

Now it's time to create and configure our Blazor Wasm application into Azure.

In part 2, we set up an Azure server for our ASP.NET Core Web API. We are going to integrate our Blazor Wasm application with that Web API.

Before that in part 1, we set up both our ASP.NET Core Web API and Blazor Wasm applications into Azure Devops.

For this tutorial, we are going to build the Blazor Wasm application from our Azure Devops repository. Then, we will set up a pipeline where we can release it to an Azure server.

Then, we need to make sure that the Blazor Wasm application can communicate with the Web API.

How To Setup a Blazor Wasm Application in Azure?

Now it's time to run through the steps to set up the Blazor Wasm application in Azure.

Search for "Web App" in Azure to create a new one.

Create a New Web App in Azure
Create a New Web App in Azure by searching for it

We will then need to fill out the form.

We need to give it a name and state that we are publishing code.

For the Runtime stack, we need to select .NET Core 3.1 (LTS). At time of writing, .NET Core 3.1 is the highest version available. Obviously, if we were to be using a higher version of .NET Core, we would need to select that.

In addition, we have to select which operating system we wish to run and where to host the server.

Create a new Blazor Web App in Azure
Create a new Blazor Web App in Azure. Make sure the Runtime stack is set to .NET Core

Once done, we can go ahead and create the server.

What About Deploying The Blazor Wasm Application To Azure?

The next job is to get the application from our Blazor Wasm repository in Azure Devops, and deploy it to Azure.

By setting up a deployment, if a commit is made to that particular branch in that repository, it will automatic do a deployment to Azure.

This is known as continuous integration and deployment.

Inside the Blazor Wasm Web App in Azure, we can go to Deployment and Deployment Center.

Setup Continous Integration for Blazor Wasm in Azure
Setup Continous Integration for Blazor Wasm in Azure

We have a number of steps which we need to go through.

The first is to select which source control we are using. Source control systems like GitHub and Bitbucket are available here. However, we are using Azure Devops, so we select that.

Select Azure Pipelines and we need to select our Azure organisation. This will bring up the relevant Azure Devops project, repository and branch.

Once we have pressed the Released button, it will create a new pipeline in our Blazor Wasm repo in Azure Devops.

It will checkout and build our repository from Azure Devops. Thereafter, it will do a release and deploy the files to our Blazor Wasm app in Azure.

This takes a little bit of time, but once done, our Blazor Wasm should be working in Azure.

It Looks Like The Blazor Wasm Application Can't Connect to the Web API

Assuming the Web API URL is correct in our Blazor Wasm application, the other likely reason why our Blazor Wasm application can't connect to the application is down to Cross-Origin Resource Sharing (CORS).

There is more information about CORS in my article entitled "Getting Started with CORS in ASP.NET Core".

We have two options here. We can set up CORS in our ASP.NET Core Web API application. Or, we can do it directly in Azure.

Watch our tutorial below to see how to do it in Azure.

In addition to CORS, we demonstrate the steps to set up a Blazor Wasm in Azure.

Afterwards, we walk through the steps on how to set up continuous integration in Azure. This is where we deploy an Azure Devops repository to an Azure server.

How To Fix Internal Server Errors In Azure

In the final part, we will have a look at how to fix ASP.NET Core errors in Azure.

We will have a look at application logging and how we can install it onto our Azure server.

In addition, we will have a look at security and how we can IP restrict an API in Azure so it's locked down to certain IP addresses.

About the author

David Grace

David Grace

Senior .NET web developer | ASP.NET Core | C# | Software developer

Free .NET videos

  • Do you want to watch free videos featuring .NET 7 new features?
  • How about what's new in C# 11?
  • Or a recap on the SOLID principles?
Watch our .NET videos