A first web app on Microsoft Azure

Cloud Manager 4 min read

In this article you will learn how to create an ASP.NET core app and how to deploy it on an Azure.

Required software

Let's begin with a few mandatory requirements on the development machine. First, we must install .NET Core: it's a cross-platform framework to develop various kinds of apps (i.e., web, desktop, console). The latest version is available for download at this link, and the installer will provide the current version of .NET SDK (including the .NET CLI), the .NET Core runtime, and ASP.NET Core runtime according to the operating system where it is performed.

The installation process is pretty straightforward. To check if the installation has been properly completed, you can open a terminal and run the command:

dotnet

If everything is ok, you will get an output like this:

The .NET CLI
The .NET CLI

Next, we need an IDE. Currently, Visual Studio Code is considered as one of the best and lightweight IDE out there, plus it has a public marketplace offering lots of extensions that help through development. The installer is available at this link.

Once started, on the left side you'll see a few buttons, among which there are "Extensions": this button will open a section where a search feature is available to find an extension on the marketplace. The extensions to install are:

  • C#
  • Azure Tools

Create an Azure Subscription

Microsoft Azure is today one of the leading cloud providers, offering a wide range of services and allowing companies to take full advantage of the cloud. An Azure Subscription is mandatory to start provisioning resources, such as an Azure Web App. Subscriptions are available starting at no cost at this link.

Create the first application

It's time to create an ASP.NET Web app. Let's open the terminal and type the following command:

dotnet new webapp -o myfirstapp

In the same terminal window, run for the first time this app, using the command:

dotnet watch run

Then open a browser and go to https://localhost:5001. The watch command keeps watching for file changes to refresh the page while running.

The first run
The first run

Note that if any warning related to an invalid HTTPs certificate shows up, it is possible to remove it as explained here.

Finally, the code generated from the CLI can be inspected using Visual Studio Code: moving into the app directory and typing the code command will open the IDE into the app folder.

The source code explorer in Visual Studio Code
The source code explorer in Visual Studio Code

Create the Azure WebApp

To host our project on Microsoft Azure, we need a Web App instance. After logging in into the Azure portal, we should be able to create a new resource using the button "Create a resource", then search for "Web App" and click on the "Create" button.

The Web App wizard in Microsoft Azure
The Web App wizard in Microsoft Azure

This step starts a wizard to configure the following settings:

  • Subscription: a valid Azure subscription;
  • Resource group: let's create a new resource group with an explicit name (i.e., "codemotion"). A resource group is just a container for cloud resources;
  • Name: the name of the web app instance (i.e., "cdmt-webapp"). It's interesting to note that Microsoft Azure will assign a subdomain of "azurewebsites.net" to the app;
  • Publish: the options are two, "Code" and "Docker Container". In this example, the first choice is more appropriate;
  • Runtime Stack: defines the technology stack used to develop the app (i.e., ".NET Core 3.0 (Current)");
  • Operating System: set the app hosting platform (i.e., Linux). Bear in mind that .NET Core is cross-platform;
  • Region: defines which datacenter is used to create the resource (i.e., WestEurope). For performance reasons, the closer is the better;
  • App Service Plan: This option is a critical one. It defines the number of resources that the app needs and the amount of money to spend on it. For this sample, we can select the "Create New" link and choose a free tier plan under the "Dev / Test" section.

This section should be similar to the following:

Azure Web App settings
Azure Web App settings

In the next section related to the Monitoring, disable "Application Insight", which is not needed for now. Finally, we can hit the "Review + Create" button and lastly, "Create". Azure Web app creation starts, and a few minutes after, the deployment completes, so we are ready to deploy our web app.

Deploy the app

Let's go back for a moment to Visual Studio Code. Before we have installed the Azure Extension:

Azure Tools extension for Visual Studio Code
Azure Tools extension for Visual Studio Code

From here, we can use the button "Sign in to Azure" to link our subscription, and the app just created will appear. Clicking on "Deploy to Web App" will starts the deploy wizard as in the following image:

Deploy a web app from Visual Studio Code
Deploy a web app from Visual Studio Code

A popup will appear to let us select the folder where our ASP.NET Core app is.

Folder selection from Visual Studio Code
Folder selection from Visual Studio Code

A request of adding a configuration file will pop up, select "Add Config", and then select the Azure Web App from the list that appears. After a few warnings, the deployment will start as in the following images:

Adding a deploy configuration
Adding a deploy configuration
et a binding between the Visual Studio Code workspace and the Azure Web App
10. Set a binding between the Visual Studio Code workspace and the Azure Web App
Deployment completed
Deployment completed
Open the deployed website
Open the deployed website
Dot NET