X
09Nov

Microsoft Azure : Running ASP.NET Web Application

 


Overview


We will deploy ASP.NET web application to web apps in Azure App Service by using Visual Studio. In result, we will have simple web application up and running in cloud.

 


Pre-requisite


  1. Visual Studio
  2. Microsoft Azure Subscription

 


Setting up development environment


To start, set up development environment by installing Azure SDK for Visual Studio.

 


Creating project and web app


Our first step is to create web project in Visual Studio and web app in Azure App Service. When that's done, we'll deploy project to web app to make it available on Internet.

1)      Open Visual Studio

 

1

 

2)      From File menu, click New >> Project.

3)      In New Project dialog box, click C# >> Web >> ASP.NET Web Application. If we prefer, we can choose Visual Basic. Make sure that .NET Framework 4.5.2 is selected as target framework. Azure Application Insights monitors your web app for availability, performance and usage. Clear Add Application Insights to Project check box if we don't want to try it. Name the application. Click OK.

 

2

 

4)      In New ASP.NET Project dialog box, select MVC template.

MVC is ASP.NET framework for developing web apps.

 

5)    Click Change Authentication.

 

3

 

6)    In Change Authentication dialog box, click No Authentication and click OK. Application that we're creating won't enable users to log in.

 

4

 

7)    In New ASP.NET Project dialog box, leave settings under Microsoft Azure unchanged and click OK. Default settings specify that Visual Studio will create Azure web app for our web project.

 

4

 

8)    If we haven't signed in to Azure, Visual Studio prompts us to do so. Sign in with ID and password of account that we use to manage our Azure subscription.

When we're signed in, Configure Microsoft Azure Web App Settings dialog box asks us what resources we want to create.

 

9)    In Configure Microsoft Azure Web App Settings dialog box, enter Web App name that is unique in azurewebsites.net domain. If default web name is created for us, it will be unique and we can use that.

If someone else, already used the name that we enter, we'll see a red exclamation mark to the right instead of green check mark and we'll need to enter different name.

Azure will use this name as the prefix for our application's URL. The complete URL will consist of this name plus .azurewebsites.net. URL has to be unique.

 

10)   In App Service plan drop-down, select Create new App Service plan. Enter name, for the plan. In Resource group drop-down, select Create new resource group. Enter name, for resource group. In Region drop-down list, choose location that is closest to us.

This setting specifies which Azure datacentre our web app will run in.

 

11)   Leave database field unchanged. Click OK. In few seconds, Visual Studio creates web project in folder that we specified and it creates web app in Azure region that we specified.

Solution Explorer window shows files and folders in new project. Azure App Service Activity window shows web app has been created. And we can see web app in Server Explorer.

 

5

 

 6

 


Deploy project to web app


1)      In Solution Explorer, right-click project and choose Publish. In few seconds, Publish Web wizard appears. Wizard opens to publish profile that has settings for deploying web project to new web app. If we wanted to deploy to a different web app, we could click Profile tab to create different profile.

2)      On Connection tab of Publish Web wizard, click Next.

 

7

 

3)      On Settings tab, click Next.

We can accept default values for Configuration and File Publish Options.

We can use Configuration drop-down to deploy Debug build for remote debugging.

 

8

 

4)      On Preview tab, click Publish.

If we want to see what files will be copied to Azure, we can click Start Preview before clicking Publish. When we click Publish Visual Studio begins process of copying files to the Azure server.

Output and Azure App Service Activity windows show what deployment actions were taken and report successful completion of deployment. Upon successful deployment, default browser automatically opens to URL of deployed web app, and application that we created is now running in cloud. The URL in browser address bar shows that web app is loaded from Internet.

 

10

 

11

 

12

 

5)    Keep this browser window open for use in next section.

 

13

 

Tip: We can enable Web One Click Publish toolbar for quick deployment. Click View >> Toolbars and select Web One Click Publish. We can use toolbar to select profile, click button to publish or click button to open Publish Web wizard.

 

14

 


Open remote files in Server Explorer


When we're testing and debugging web app, we can do quick temporary changes on remote site by opening and editing files in Server Explorer.

1)    In Server Explorer, navigate to Azure >> App Service and expand node for our web app.

2)    Expand Files >> Views >> Home and double-click Index.cshtml file.

 

15

 

16

 

3)    Change

ASP.NET

 

 

16

 

4)    Save file.

 

17

 

5)    Refresh browser window that has site running in Azure. This change is now in deployed site but not local project. If we redeploy project, site will revert to way it was before we made this change.

This feature is handy for temporarily turning off customErrors in Web.config file in order to get a detailed error message.

 

18

 

In Server Explorer we can also right-click web app node and get access to web app settings in Visual Studio window, start remote debugging session and view application logs in real time as application writes them.

 

24

 


Monitor and manage web app in Azure portal


Azure portal is web interface that we can use to manage and monitor our Azure services.

1)    In our browser, log in to http://portal.azure.com

 

20

 

2)    Click Web Apps and click name of our web app.

The Web app blade displays overview of settings and usage statistics for our web app. At this point, our web app hasn't had much traffic and may not show anything in graph. If we browse to our application, refresh page few time and refresh the portal page, we'll see some statistics show up.

 

21

 

3)    Click Settings to see more options for configuring our web app.

 

22

 

4)    Click Application settings to see the kinds of settings that we can configure in portal.

These are just a few of the portal's features. We can create new web apps, delete existing web apps, stop and restart web apps and manage other kinds of Azure services.

 

23

 

Related

Azure Blob Storage: The PowerShell Way!

Hi folks!Great to see you again.This blog post is purely based on Azure Blob Storage: The PowerShell...

Read More >

Create a Windows Server 2012 R2 VM using ARM in Azure PowerShell

Hi Folks,In this Blog Post we will learn how to create an Azure ARM Virtual Machine using Azure Powe...

Read More >

Continuous Integration/ Continuous Deployment VSTS

Following the below steps you can build and deploy your ASP.NET  app to Azure from either Visua...

Read More >

How to Sync On-premise AD with Windows Azure AD using Azure AD Connect tool

 Azure AD is a service that provides identity and access management capabilities in the cloud. ...

Read More >

Creating a Point-to-Site Connectivity using Azure Resource Manager

Configure a Point-to-Site connectivity to a VNet using PowerShell (ARM Mode)Task 1: Create a Self-Si...

Read More >

How to Create an Azure Virtual Network by using a Deployment Template

Hello Folks!In this Blog post, we will try to learn how to create an Azure V-Net using an ARM templa...

Read More >

Locking VMs and Resources Groups with Azure Resource Manager using Azure PowerShell

Hello Folks!In this blog post we will be talking about locking down your Azure Resources with Azure ...

Read More >

Microsoft Azure: Implementing Internet Facing Load Balancers using Azure Resource Manager

Howdy Folks!I was exploring Network Load Balancer in Azure Resource Manager and found out that you c...

Read More >

Microsoft Azure Stack : Power of Azure in our datacentre

Why Azure Stack?Microsoft Azure Stack is a new hybrid cloud platform product that enables our organi...

Read More >

Microsoft Azure : Mobile Services - Xamarian.Android with .Net

NOTE: Microsoft Azure recommends Azure App Service Mobile Apps for all new mobile backend deployment...

Read More >

Share

Comments

Thank you for sharing such a nice and informative Blog.online food ordering app development
1/27/2021 2:51:25 PM | Reply
Nice blog, Ashish. The blog nicely explains how to create a project and deploy it to a ASP.NET web application. The step of monitoring a web app in Azure portal is also explained nicely. The information will help the developers to build a web application that runs in cloud. Click here for more details: https://www.metasyssoftware.com/
7/27/2020 1:46:08 PM | Reply

Post a Comment

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *