Hosting Web Applications On The Azure Platform

Creating an ASP.NET Web App by Using Azure Web Apps

Web Apps is a low friction Platform-as-a-Service (PaaS) offering to host your web applications in the Azure platform. In this article I will show how to create, deploy and configure azure web app.

The first step is we need to create Web App instance by using the Azure portal, and to do that we need to follow these steps:

  1. Go to Azure portal. In the email address box, type the email address of your Microsoft account. In the password box, type the password for your Microsoft account. Then click Sign In.

    Azure
  1. In the navigation panel on the left side of the screen Click on Resource Group then click on +Add option and then enter the value [Resource Group Name] and select the subscription and location into the dialog box.

    Azure
  1. In the navigation panel on the left side of the screen, click App Service

    Azure

  2. In the New blade that appears Click on + Add

    Azure

  3. Select Web App and then Click on Create Button.

    Azure

  4. Fill the app name and select the created resource group then click on app service plan to create new plan.

    Azure

  5. In New Service plan dialog fill the name and click on pricing tier to select one

    Azure

  6. Select F1 then click Apply.

    Azure

  7. Wait until it finishes.

    Azure

  8. Now we need to create a new Web App through Visual Studio 2017. Open visual studio from file cand lick new project. From cloud section select ASP.NET Web Application (.NET Framework), change the name and then click OK

    Azure

  9. Select MVC and then click OK button.

    Azure

  10. Modify the web as you need, after finishing right click on project solution and select publish

    Azure

  11. In publish dialog select “select existing” option, then click on publish button, the select the subscription, recourse group and target web app instance.

    Azure

  12. Select publish to start publishing the web to azure.

    Azure

  13. After completing the publishing you can open the web from recourse group, open web app, from app service dashboard you can find the URL.

    Azure

Configuring an Azure Web App

Now we need to configure the web app by adding a new app setting in web config and reflect that in Azure.

  1. From Visual Studio, Open the web.config, in appSettings section, add new app settings tag

    Azure

  2. Create new class and replace the code with the below code,
    1. public static class HRHelper {  
    2.     public static string CompanyName {  
    3.         get {  
    4.             return ConfigurationManager.AppSettings["CompanyName"];  
    5.         }  
    6.     }  
    7. }  
  1. Open _Layout.cshtml from shared folder and replace the footer section with the following code,
    1. <footer>  
    2.    <p>© @DateTime.Now.Year - @HRWebApp.Helper.HRHelper.CompanyName</p>  
    3. </footer>  
  1. Now publish the project to Azure by clicking in publish context menu, in publish dialog click on Edit App Service Settings and then add the app setting key and value. Then click publish.

    Azure

    Azure
  1. To modify the value from Azure, open your app service, under settings click in application settings, now you can find the app, and see and change the key and value.

    Azure