From Learn Azure in a Month of Lunches, Second Edition by Iain Foulds

This article, adapted from chapter three of Learn Azure in a Month of Lunches, Second Edition, takes a look at an Azure Web App in action. This requires a couple of parts. First, we create the basic Web App and see the default site in our browser. Then we use a sample web page from GitHub and push that to Azure.

Save 37% on Learn Azure in a Month of Lunches, Second Edition. Just enter code fccfoulds2 into the discount code box at checkout at

Create a Web App

Maybe you’re a web developer who has started to build a front-end for your online pizza store, and you have a basic site ready to upload. If you’ve never used GitHub before, don’t worry. You don’t need to understand what GitHub is doing at this point.

Create basic Web App

The first step is to create the Web App in Azure and make sure the default page loads.

Try it now

To create your Web App, complete the following steps:

  1. Open a web browser to and log in to your Azure account.

  2. In the portal, select Create a Resource in the upper-left corner of the dashboard.

  3. Choose Web from the list of resources you can create, and then select Web App.

  4. To help keep things clean and organized, I suggest you create a dedicated resource group for your web app, such as azuremolchapter3.

  5. For the web app name, enter a globally unique name. This name must be unique as it creates the URL to your web app in the form of If you’re wondering, yes-you can apply a custom domain name here. For now, use the default address.

  6. We’re going to push some basic HTML code, not a Docker container, but look at all the different runtime stacks available. You can change this after you’ve created the web app, but for now, choose an ASP.NET runtime that runs on Windows.

  7. Let Azure automatically create an App Service plan, but change the size to the S1 Standard. This tier provides all the core features without providing too many resources for your basic demo website. In real-world deployments, this is where you could manually create and configure your own App Service plans, or select an existing plan.

App Service Plans

Web Apps are part of the wider App Service family in Azure. App Service also includes Mobile Apps, API Apps, and Logic Apps. All but Logic Apps are available in every region that Azure runs. A great resource to check out Azure service availability by region can be found here: Many services are global, but some are dependent on resource availability by region.

When you need to create an App Service resource, such as a Web App, you create or use an existing service plan. The service plan defines the amount of resources available to you, how much automation is available to scale and back up your web app, and how highly available to make your site with staging slots and Traffic Manager. As with anything, you get what you pay for. Each service tier builds on the features of the lower tiers, generally adding more storage and available resources.

The four main service plan tiers are:

  1. Free / Shared – Uses a shared infrastructure, offers minimal storage, and has no options for deploying different staged versions, routing of traffic, or backups. The Shared tier allows you to use a custom domain and incurs a charge for this over the Free tier.

  2. Basic – Provides dedicated compute resources for your Web App. Allows you to use SSL and manually scale the number of Web App instances you run. The free/shared and basic tiers provide a good environment for you test out the Web App service, but I wouldn’t recommend any actual production or development workloads. The performance isn’t a limiting factor, it’s more that you miss some of the automated features like backups and scaling.

  3. Standard – Adds daily backups, automatic scale of web app instances, and deployment slots, and allows you to route users with Traffic Manager. This tier may be suitable for low-demand applications or in development environments where you don’t need a large number of backups or deployment slots.

  4. Premium – Provides more frequent backups, increased storage, and a greater number of deployment slots and instance scaling options. This is ideal tier for most production workloads.

You can do quite a lot with the Free and Basic tiers, though for production workloads you probably should look at the Standard or Premium tiers. In this example, we use the Standard tier to show all the available features. When you need to use Web Apps with your own applications, you can decide how many of these features you need and select the most appropriate service plan tier accordingly.

Try it now

To finish up your Web App, complete the following steps:

  1. Enter an App Service plan name, such as appservice. The name doesn’t need to be unique like your Web App name. Choose the most appropriate Azure region for you.

  2. Select Pricing tier, then choose the S1 Standard tier. This tier provides all the core features without providing too many resources for our basic demo web site.

  3. Choose Select, then OK.

  4. Back on the initial Create Web App blade, leave Application Insights turned off for now. Application Insights allows you to dive deeper in to the performance of your web application and do things like perform live debugging or stream telemetry. If you’re a developer, this is cool stuff to explore when you start to bring your own web applications in to Azure.

  5. To create your Web App, select Create.

  6. It takes a few seconds to create your App Service. Browse to and select App Services from the navigation bar on the left-hand side of the screen. Choose the Web App you created. As it takes a couple of minutes to create the Web App, click the Refresh button until yours appears.

  7. From the overview blade, view and select the URL for your Web App. Figure 1 shows our example of webappmol as our Web App name, and the URL’s

    Figure 1. Select your Web App in the Azure portal. On the right side of the screen are the Essentials of your Web App. These essentials include the current state of the Web App, the location, and its URL.

  8. Once you select the URL to your Web App, a new browser window or tab’s opened. The default Web App page loads as shown in figure 3.4! Still doesn’t look like pizza…

    Figure 2. To see the default Web App page in action, open a web browser to the URL of your site.

Deploy sample HTML site

You have a Web App in Azure, but it’s the dull, default website. How do you get your own website into Azure? One of the most common cross-platform ways is to use Git.

Most application developers and teams use a source control system. Rather than storing files on your computer and saving changes as you go, source control systems keep track of changes and allow you to work with others, you can also look to do this with other software options such as Filecenter or another that could possibly suit your business model and your employees better, it all depends on what you expect and require from solution software options. You can create test releases that won’t impact your production code, and revert to earlier versions if problems arise. Git is one of the most common source control systems, with GitHub being a cloud-based service that allows you to share and contribute code with the rest of the world. If you do decide to go ahead with this cloud service, its best to read up on the nitty-gritty of how and why to install git!

Create a local copy of the static HTML sample site, and then push the files to your Azure Web App. This workflow can be seen in figure 3.

Figure 3. You create a local copy of the sample files from GitHub with the git clone command. To push these local files to your Azure Web App, use git push

Try it now

To get a copy of the a sample HTML page from GitHub and push it to your Web App, complete the following steps:

  1. Select your Azure Web App in the portal and then choose Deployment options.

  2. Select Choose source, and then choose Local Git Repository. Note the other options you can use for storing your source code for Web Apps, including GitHub itself, Dropbox or OneDrive, and Visual Studio Team Services.

  3. To confirm and create a local Git repository, select OK.

  4. Now select Deployment credentials. You can change the FTP/deployment username if desired, then enter and confirm a Password.

  5. Select Overview to view your Git clone URL. Before we can push to this local Git repository, we need to get the HTML sample site from GitHub.

  6. Open the Cloud Shell in the Azure portal and wait a few seconds for your session to connect. Enter the following command to clone, or copy, the HTML sample site from GitHub, enter the following command:

     git clone
  7. A directory is created for you. Change to this directory with the following command:

     cd azure-samples/3/prod
  8. To get ready to upload this, you must initialize git, then add and commit your files. Don’t worry too much about the Git commands. You need to tell Git what files to track and add, and give yourself a way to track those changes later if needed.

      git init && git add . && git commit -m "Pizza"
  9. Now you can push this HTML sample site to your Web App. In the Azure portal, the Overview blade for your Web App listed the Git clone URL. Copy this URL and set it as a destination for your HTML sample site in the Cloud Shell with the following command:

     git remote add azure 
  10. Finally, push the HTML sample site to your Web App with the following command:

     git push azure master

When prompted, enter the password you created for the deployment credentials. You can see from the output that the existing default Web App site page is removed and your HTML sample site is uploaded and configure to run. A sample output is shown in listing 1.

Listing 1. Sample Git output to push HTML site to Web App

 Counting objects: 6, done.
 Compressing objects: 100% (5/5), done.
 Writing objects: 100% (6/6), 1.24 KiB | 0 bytes/s, done.
 Total 6 (delta 0), reused 0 (delta 0)
 remote: Updating branch 'master'.
 remote: Updating submodules. 
 remote: Preparing deployment for commit id 'a3822aa914'.
 remote: Generating deployment script.
 remote: Generating deployment script for Web Site
 remote: Generated deployment script files
 remote: Running deployment command...
 remote: Handling Basic Web Site deployment.
 remote: KuduSync.NET from: 'D:\home\site\repository' to:
 remote: Deleting file: 'hostingstart.html' 
 remote: Copying file: 'index.html'
 remote: Copying file: 'LICENSE' 
 remote: Finished successfully.
 remote: Running post deployment command(s)... 
 remote: Deployment successful.
 To https://mol-
 [email protected]:443/webappmol.git
 * [new branch]      master -> master

To see your updated Web App, refresh your site in a web browser, or open it again from the Overview blade in the Azure portal. It should look like the wonderful example in figure 4. Yes, the site is basic, but the workflow for deploying the most basic static HTML site to a complex .NET or Node.js web app is the same!

Figure 4. Refresh your web browser to see the default Web App page replaced with the basic static HTML site from GitHub.

There it is! You’ve made your first web app with Azure.

If you want to learn more about the book, check it out on liveBook here and see this slide deck for more info.