Skip to main content
Create & Deploy Azure Web Apps using Visual Studio

Create and Deploy Azure Web Apps using Visual Studio

Coursera Purple CS Design 3

Introduction

Productivity is what matters when it comes to Development, and productivity comes with smart use of technologies available. In this article, I will be showing you all, How to Create Microsoft Azure Web App & deploy an ASP.NET MVC web Application on Microsoft Public Cloud i.e. Microsoft Azure through Microsoft Visual Studio.

Create and Deploy Azure Web Apps using Visual Studio #azure #visualstudio #aspnet #cloud… Click To Tweet

Prerequisites

Having our web application on Cloud, needs minimal requirements.

  • Microsoft Azure Account
  • Visual Studio (Any Edition). In this article, I will be using Visual Studio 2015.

Let’s Begin

Open Microsoft Visual Studio and create new ASP.NET MVC Web Application as shown below.

Open Microsoft Visual Studio and create new ASP.NET MVC Web Application.

Note: Don’t select the check-box ‘Host in the Cloud’ , as we will accomplish our task from Solution Explorer window.

There two options to host your web application. They are:

  • Web APP
  • Virtual Machine (VM associated with your Azure account would get listed in dropdown as shown in below image).

But this selection matters when you tick ‘Host in the Cloud’ checkbox.

Just select MVC from Templates section and click OK to create an application.

Just select MVC from Templates section and Click OK to create the application

Browse the application from Visual Studio.

step-3

Perfect! Now let’s deploy the application to cloud.

Deploying Application to Cloud

Open Solution Explorer => Right Click on Project => Click on Publish

step-4

You will get a pop up window called ‘Publish Web’, shown below.

There are 4 sections or Tabs we can go through, out of which ‘Profile’ tab is initially enabled and rest 3 are disabled. These remaining three tabs will be enabled once we complete all the settings with respect to Profile tab.

Let’s go with ‘Microsoft Azure Web Apps’ as Publish Target, as we are deploying the web application into Azure Web Apps.

Other options that can be used as Publish Target:

  • Azure API Apps ( Preview )
  • Import : This is used when you have already created a Web App in Azure portal.
  • Custom

As mentioned earlier, we can deploy our application to associated Azure Virtual Machines.

Select ‘Microsoft Azure Web Apps’ => Click on Next

Select ‘Microsoft Azure Web Apps’ => Click on Next

Creating Web App on Azure

This part is important in this entire process.

Here, I will be creating a new web app for deploying MVC Web Application.

It has following details:

  • Web App Name :  Enter a Unique name for your Application. This name is unique across Azure.
  • App Service Plan :  You can select existing App service plan or create new.
  • Resource Group :  Group of related Azure products/service created in Azure Portal. You can select existing resource group or create new.
  • Region :  Your Web App will be deployed/hosted at this given Location.
  • Database Server :  If associated, can provide details right here. In this article, I am not using any Database, so selecting ‘No Database’ option.

Select ‘Microsoft Azure Web Apps’ => Click on Next

Enter details and click on ‘Create’

This will create Azure Web Apps with entered details. It could take several seconds to get on to next tab.

Details

Web App created can be seen  in Azure Portal as below:

Web App created in Azure Portal

 

Web App details in Azure Portal
Once Azure Web App is created, as mentioned earlier, other tabs ‘Connection’, ‘Settings’, ‘Preview’ will get enabled. Now window moves to Connection tab.

Deploying or Publishing the Web App

These are the publish settings, used for publishing files over Azure Web App. You need not worry about this, as Azure and Visual Studio will very well take care of these settings.

Click on Validate Connection button to verify all things are set well.

Will recommend developers to practice validating connection once, at least during initial configuration.

Different options for publishing are shown below, will be selecting method as ‘Web Deploy’.

Publish Options

Validate and click on Next.

Validate and Click on Next.

Now comes the ‘Settings’ Tab.

Here, you can select between Release or Debug modes. I am selecting Release mode. Click on Next.

Setting Tab

Preview Tab deals with files details, ready for deployment in project.

Start Preview, will list all files which will be deployed once clicked on Publish.

When publishing for first time, it would list entire files details present in project.

Done with all tabs, now click => Publish.

Validate and Click on Next.

You can view publish status along with files details in Azure App Service Activity window, part of Visual Studio, along with public cloud URL.

Azure App Service Activity window

Once publish succeeds, it will open browser with our web application.

Cool, Our Application is now live!

Web Application Live in Public Cloud : Azure

Modifying our Application

  • Will add one controller and view, named Demo.
  • Modify text in Index view for Home controller.

Once done with changes, Right click on Project => Publish

Navigate to Preview Tab => Click on Start Preview button.

Files would be listed as shown below, with details of Add/Update action being carried out in projects files. You can also select/deselect files needs to be deployed.

This feature mainly helps to recollect all modified files from the last deployment time.

Click on Publish.

step-12

Again, Azure App Service Activity window in Visual Studio will start displaying the status, along with files details getting deployed.

Refer below Image.

Azure App Service Activity window

Done! Modified changes are now Live.

step-13

 

step-13-1

Summary

With few clicks we saw, how seamlessly we created Azure Web Apps and deployed ASP.Net MVC web application through Visual Studio. Also, modifying web application, re-deploying it to Azure was accomplished with minimal efforts.

Do read, Azure Web Apps Overview for diving into more features.

Would highly recommend to try this out once in your DEV environment.

Sitewide-15dollars728x90

What do you think?

Dear Readers,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.

Happy Coding!

Kasam Shaikh

Hello! I am Kasam Shaikh, aspiring Technical Architect, Working as Microsoft CoE .NET, along being part of Research and Development team for Cloud in Hexaware Technologies Ltd. Mumbai, India and responsible for Building Architecture, Supporting RFPs, Client convincing with Technical aspects , Coding , Reviewing, Technical Mentoring to Delivery Teams. .

Microsoft Azure, Microsoft Bot Framework, Microsoft Cognitive Systems, Universal Windows Platform Development, Xamarin Forms, MVC, AngularJS and ASP.NET are my core areas of interest.

Wanna reach : E-mail me : codewithkasam@outlook.com or Connect with me on LinkedIn: https://in.linkedin.com/in/kasamshaikh