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
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.
Open Microsoft Visual Studio and create new ASP.NET MVC Web Application as shown below.
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.
Browse the application from Visual Studio.
Perfect! Now let’s deploy the application to cloud.
Deploying Application to Cloud
Open Solution Explorer => Right Click on Project => Click on Publish
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.
As mentioned earlier, we can deploy our application to associated Azure Virtual Machines.
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.
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.
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’.
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.
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.
You can view publish status along with files details in Azure App Service Activity window, part of Visual Studio, along with public cloud URL.
Once publish succeeds, it will open browser with our web application.
Cool, Our Application is now live!
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.
Again, Azure App Service Activity window in Visual Studio will start displaying the status, along with files details getting deployed.
Refer below Image.
Done! Modified changes are now Live.
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.
What do you think?
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.