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.
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.
We will then need to fill out the form.
Learn Blazor WebAssembly with our online courses
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.
Once done, we can go ahead and create the server.
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.
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.
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.
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.
