Microsoft Azure has multiple services for hosting HTTP-based web applications. Visual Studio developers can directly publish web applications to the cloud. Azure supports a wide range of programming languages like .NET Core, .NET, Java, Ruby, Node.js, PHP, Python, and more. Applications hosted on Azure App Service can run and scale seamlessly in both Windows and Linux-based environments. In this article, I will create a .NET Core app and deploy it in Azure App Service using Visual Studio.

Setting up dev environment

To set up the development environment, the following are prerequisites:

  1. Visual Studio Community edition

  2. Azure Free Subscription

  3. Azure SDK for Visual Studio

Creating an ASP.NET Core Web App

Step 1 – Open Visual Studio. In the start page search ASP.NET core web application as depicted in Figure 1 below.

Figure 1 – New Visual Studio Project

Step 2 – Select the ASP.NET Core Web application template as in Figure 2. 

Figure 2 – Search ASP.NET Core Project

Step 3 – Name your project & browse the location where you want to save the project file:

Figure 3 – ASP.NET Core New MVC Project

Step 4 – Select Web application (Model-View-Controller) template as depicted in Figure 4 below.

Figure 4 – New Web Application (Model – View – Controller)

Step 5 – Change Authentication when dialog appears. Select Individual User Accounts. Select OK to return to the New ASP.NET Core Web Application, and then select create, as in Figure 5.

Figure 5 – Individual User Account Authentication

Step 6 – Visual Studio solution explorer will open with a sample ASP.NET Core MVC project template, as below.

Figure 6 – Visual Studio Solution Explorer with ASP.NET Core Project

Step 7 – Press Ctrl-F5 to run the app locally. Click the Home and Register links, as in Figure 7 below.

Figure 7 – Execution of Web Application in Browser

Click register a new user. You can use a sample email address to register. When you submit, you will get the following error. To fix, click Apply Migrations and, once the page updates, refresh the page, as in Figure 8.

Figure 8 – Web Application Database Connection Error

Deploying ASP.NET Core Web App

Step 1 – Right-click on the project in Solution Explorer and select Publish, as in Figure 9.

Figure 9 – Publish Web Application

Step 2 – In the Publish target dialog select Azure cloud, as in Figure 10.

Figure 10 – Publish Web Application in Azure

Step 3 – Next, In the Publish target dialog select Microsoft Azure App Service (Windows) (Figure 11).

Figure 11 – Azure App Service (Windows)

Step 4 – Next, In the Publish dialog, select create a new Azure App service (Figure 12).

Figure 12 – Azure New App Service (Windows)

Step 5 – Next, In the create App Service dialog, enter or select App Name, Resource Group, and App Service Plan. You can keep these names or change them, as in Figure 13.

Figure 13 – Azure New App Service

Step 6 – Next, once creation is completed, the dialog is automatically closed and the Publish dialog gets focus. New instance will be automatically selected, as in Figure 14.


Figure 14 – Azure New App Service Publish

Step 7 – Next, publish profile summary page. Visual Studio will detect that this application requires a SQL Server database and will ask you to configure it. Select Configure (Figure 15 below). 

Figure 15 – Azure New SQL Database

Step 8 – In the Configure dependency, select Azure SQL Database & Select Create New SQL Server, as in Figure 16.

Figure 16 – Azure New SQL Database Configuration

Step 9 –Database name, Resource Group, Database server and App Service Plan entry fields are pre-populated. You can change them if required. Enter the Database administrator username and Database administrator password for the selected Database server, see Figure 17.

Figure 17 – Azure New SQL Database Creation

Step 10 – Click create new, refer to Figure 18 below.

Figure 18 –New SQL Database

Step 10 – Wait for the SQL Server DB to be created, as in Figure 19.

Figure 19 –New SQL Database Creation In Progress

Step 11 – Click publish. Visual Studio publishes your app to Azure. When the deployment completes, the app will be opened in a browser, see Figure 20.

Figure 20 – New Web App Published in Azure

After the app is published, verify that the changes you made are available on Azure, as in Figure 21.

Figure 21 – Review Changes of App published in Azure

Conclusion 

I hope this article has been helpful. Let us review what we have covered:

  • Azure App Service

  • Deploy ASP.NET Core web app into an Azure App Service from Visual Studio

  • Test the App Service and examine it in the portal






This article was originally published on February 23, 2021