Setup Your Blazor Wasm and ASP.NET Core Web API in Azure Devops: Dev To Azure - Part 1

12th October 2020

We are going to look at how you can set up a Blazor Wasm and ASP.NET Core Web API in Azure Devops.

Both our Blazor Wasm and ASP.NET Core Web API already have a local Git repository set up, so it will be a case of setting up a remote origin and pushing the changes up to Azure Devops.

The whole point of using Azure is to make it easier and simpler to deploy your applications.

Gone are the days where you have to set up the whole server by yourself. With Azure, you can set up different types of servers depending on what you are hosting.

Azure does all the software installation. You just have to configure it in the way you wish.

How to Create an Azure Organisation & Project

Before we can push our repositories up to Azure, we have to go ahead and create an organisation and a project for each repository.

We can go to the Azure Devops page and sign up. It will prompt you to add a username and where to host your projects.

From there, the system will go ahead and create the Azure Devops Organisation for us.

Create an Organisation in Azure
Create an Organisation in Azure by putting in a name and where to host the projects

Once done, we can go ahead and create our projects.

Now, we created a separate project for both the Blazor Wasm and the ASP.NET Core Web API application. However, you can have more than one repo in each project if you wish.

Once the project is set up, you will have a section that contains your repos.

The Repos Section Inside a Azure Devops Project.png
The Repos section inside an Azure Devops project

How Do We Get The Applications into Azure Devops?

To get the applications into Azure Devops, we will need to run a "push" command in Git.

But before that, we need to generate an SSH key.

We are going to use Git For Windows to do this, and the Git Bash command.

In Git Bash, run the following command:

ssh-keygen -t rsa

It will prompt us for a filename and passphrase, but we can leave those empty.

Git Bash will then generate the SSH keys for us.

Assuming you leave them empty, it will create both a private key and a public key. If you are using Windows, the SSH keys should be located in C:\Users\{username}\.ssh. The private key will be named "id_rsa" and the public key will be named "id_rsa.pub".

Now that we have the keys generated, we need to supply the public key into our Azure Devops organisation.

We can open the "id_rsa.pub" file and copy the contents. Or, we can use a tool called PuTTY Key Generator. We will have to load in the private key which will display the public key.

In-order to add the public key into Azure, we can click on the Manage SSH Keys link when inside the Repos section in your Azure project.

Manage SSH Keys For Your Azure Organisation
Click on the "Manage SSH Keys" inside the Repos section in your Azure project

Then it's a case of adding our key.

Afterwards, we need to run a couple of Git commands. The first is to add the remote repository to our local Git repository. The second is to push the changes to Azure Devops.

You will see what you need to run in your Azure Devops repo.

Then, it's a case of copying it and running it in Git Bash.

Copy the Code in your Azure Devops Repo to Push Changes
Copy the Code in your Azure Devops Repo to Push Changes

How To See It In Action?

You can watch us demonstate how to set up your repos in Azure by watching the video below.

We start off by creating an Azure organisation.

From there, we go ahead and create a project for our ASP.NET Core Web API application. Afterwards, we go and create an SSH key and copy it over to our Azure Devops organisation.

In addition, we also set up our Blazor Wasm application into Azure Devops.

How Do We Deploy To Azure?

We will talk you through how to deploy the ASP.NET Core Web API to Azure in our next part.

In addition, we will set up a SQL Server database in Azure and allow the Web API to communicate with the database.

Lastly, we will look at how we set up continuous integration in Azure.

This is covered in part 2 where we learn how to deploy to Azure.

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