Post
Ask Question

Create Web Apps In Azure From Visual Studio

Introduction

This article will help you learn about creating Web Apps in Azure, using Visual Studio (without accessing the Azure Management Portal via Web Browser).

What are Web Apps?

Azure provides us a service called Web Apps which we can use for constructing our website with the tools available or provided by Azure. We too have open source tools, like WordPress, Joomla, etc., by which we don't need to worry about the code and we can construct the websites just by using the templates available, or even by dragging and dropping. We can also control the website performance and other website oriented shared resources using this Web App in Azure.

Developer Requirements

  1. An Azure account (Click here to get a temporary Azure account at free of cost)
  2. Visual Studio 2015 installed on your machine (Click here to get the Azure SDK for Visual Studio)

Follow the below steps, now, to create a Web App in Azure, using Visual Studio:

Step 1: Launch your Visual Studio 2015

Make sure that the same Azure account has been signed in with your Visual Studio at the top right corner. If not, sign in with your Azure credentials in your Visual Studio 2015.

Visual Studio 2015

Go to File - New - File.

Select Visual C# - HTML Page. Name the file and click Add.

New

New

Step 2: Write code for adding a title to the page and some content on the page

If needed, copy the following HTML code into your demovs.html page to add some content.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Demo Microsoft Windows Azure</title>  
  6.     <meta charset="utf-8" />  
  7. </head>  
  8.   
  9. <body>  
  10.     <h1>Demo article on WebApps in Azure</h1>  
  11.     <p>Hi all!!! Welcome to the demo article on WebApps under Windows Azure, we will be creating a WebApp in Visual Studio and will publish it from Visual Studio itself towards Azure</p>  
  12. </body>  
  13.   
  14. </html>  
Code Explanation

Here, in this code, we have added a title “Demo Microsoft Windows Azure” to the page  with a heading Demo article on WebApps in Azure. It contains the following paragraph. “Hi all!!! Welcome to the demo article on WebApps under Windows Azure, we will be creating a WebApp in Visual Studio and will publish it from Visual Studio itself towards Azure”.

<title>…..</title> - is used to give title for the page.
<h1>….</h1> - is used to give heading for the page.
<p>……..</p> - is used to add text in paragraph.

Code Explanation

Run the code. Select the Browser you need to run the code and click on it.

Browser

Get back to Visual Studio now. Stop the Debugging by clicking on Stop option.

Debugging

Step 3: Now, right click on your solution name and select Publish WebApp - Select Microsoft Azure App Service.

Azure App Service

Azure App Service

Step 4: Enter your Azure credentials.

Azure Credentials

Step 5: Select your Hosting Subscription, Resource Group – Select New,

Resource Group

Step 6: Give Web App Name, Subscription, Resource Group. Here, I have created a new app service plan.

app service plan

app service plan

Step 7: Click on Create, followed by Publish.

Create

Publish

Now, the Web App will be published. We can login to the Azure Management Portal to find the Azure Web App that has been created now.


Similar Articles