By Iain Foulds

This article, adapted from chapter three of Learn Azure in a Month of Lunches, 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% off Learn Azure in a Month of Lunches with code fccfoulds at manning.com.

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 https://portal.azure.com and log in to your Azure account.

  2. In the portal, select the green ‘+’ icon for New in the top left-hand corner of the dashboard.

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

  4. Enter a Name for your web app. This name must be unique, as it creates the URL to your web app in the form of http://<name>.azurewebsite.net . If you’re wondering, yes—you can apply a custom domain name here. For now, use the default azurewebsites.net address.

  5. By default, a new resource group is created. To help keep things clean and organized I suggest you name this resource group azuremolwebapp.

  6. Select App Service plan/Location and then choose Create New. Let’s take a minute to go over the available options.


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: https://azure.microsoft.com/regions/services/. 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 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.

  3. Standard – Adds daily backups, automatic scale of Web App instances, deployment slots, and allows you route users with Traffic Manager.

  4. Premium – More frequent backup schedules, increased storage, greater number of deployment slots and instance scaling options.

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 http://webappmol.azurewebsites.net.

    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 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.

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 https://github.com/fouldsy/azure-samples.git
     
    
  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 <your-git-clone-url>
     
    
  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:
 'D:\home\site\wwwroot'
 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-
 deploy@webappmol.scm.azurewebsites.net: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, but if you’re hungry for more, download the free first chapter of Learn Azure in a Month of Lunches and see this slide deck for more info.