Create a static HTML web app by using Azure Cloud Shell

In this exercise, you deploy a basic HTML+CSS site to Azure App Service by using the Azure CLI az webapp up command. Next, you update the code and redeploy it by using the same command.

The az webapp up command makes it easy to create and update web apps. When executed, it performs the following actions:

• Create a default resource group if one isn't specified.

• Create a default app service plan.

• Create an app with the specified name.

• Zip deploy files from the current working directory to the web app.

Download the sample app

1. Create a directory and then navigate to it.

    dbeniteza_dev [ ~ ]$ mkdir mywebapp
    dbeniteza_dev [ ~ ]$ cd mywebapp/
   

2. Clone the sample app repository (using git command) to your mywebapp directory.

    dbeniteza_dev [ ~/mywebapp ]$ git clone https://github.com/Azure-Samples/html-docs-hello-world.git
    Cloning into 'html-docs-hello-world'...
    remote: Enumerating objects: 50, done.
    remote: Total 50 (delta 0), reused 0 (delta 0), pack-reused 50 (from 1)
    Receiving objects: 100% (50/50), 342.09 KiB | 12.22 MiB/s, done.
    Resolving deltas: 100% (10/10), done.
   
    dbeniteza_dev [ ~/mywebapp ]$ ls
    html-docs-hello-world
    dbeniteza_dev [ ~/mywebapp ]$ ls -l html-docs-hello-world/
    total 28
    drwxr-xr-x 2 dbeniteza_dev dbeniteza_dev 4096 Apr  4 06:58 css
    drwxr-xr-x 2 dbeniteza_dev dbeniteza_dev 4096 Apr  4 06:58 fonts
    drwxr-xr-x 2 dbeniteza_dev dbeniteza_dev 4096 Apr  4 06:58 img
    -rw-r--r-- 1 dbeniteza_dev dbeniteza_dev 1760 Apr  4 06:58 index.html
    drwxr-xr-x 2 dbeniteza_dev dbeniteza_dev 4096 Apr  4 06:58 js
    -rw-r--r-- 1 dbeniteza_dev dbeniteza_dev 1183 Apr  4 06:58 LICENSE
    -rw-r--r-- 1 dbeniteza_dev dbeniteza_dev  608 Apr  4 06:58 README.md
   

3. Set variables to hold the resource group and app names by running the following commands.

    dbeniteza_dev [ ~/mywebapp ]$ resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
    appName=az204app$RANDOM
   
    dbeniteza_dev [ ~/mywebapp ]$ echo $resourceGroup
    learn-ee876653-3347-44a8-a26e-1b17a70f0adb
   
    dbeniteza_dev [ ~/mywebapp ]$ echo $appName
    az204app23426
   

Create the web app

1. Change to the directory that contains the sample code and run the az webapp up command.

    dbeniteza_dev [ ~/mywebapp ]$ cd html-docs-hello-world
   
    dbeniteza_dev [ ~/mywebapp/html-docs-hello-world ]$ az webapp up -g $resourceGroup -n $appName --html
    The webapp 'az204app23426' doesn't exist
    Creating AppServicePlan 'dbeniteza.dev_asp_9735' or Updating if already exists
    Creating webapp 'az204app23426' ...
    Configuring default logging for the app, if not already enabled
    Creating zip with contents of dir /home/dbeniteza_dev/mywebapp/html-docs-hello-world ...
    Getting scm site credentials for zip deployment
    Starting zip deployment. This operation can take a while to complete ...
    Deployment endpoint responded with status code 202
    Polling the status of async deployment. Start Time: 2025-04-04 07:04:00.307429+00:00 UTC
    You can launch the app at http://az204app23426.azurewebsites.net
    Setting 'az webapp up' default arguments for current directory. Manage defaults with 'az configure --scope local'
    --resource-group/-g default: learn-ee876653-3347-44a8-a26e-1b17a70f0adb
    --sku default: F1
    --plan/-p default: dbeniteza.dev_asp_9735
    --location/-l default: canadacentral
    --name/-n default: az204app23426
    {
      "URL": "http://az204app23426.azurewebsites.net",
      "appserviceplan": "dbeniteza.dev_asp_9735",
      "location": "canadacentral",
      "name": "az204app23426",
      "os": "Windows",
      "resourcegroup": "learn-ee876653-3347-44a8-a26e-1b17a70f0adb",
      "runtime_version": "-",
      "runtime_version_detected": "-",
      "sku": "FREE",
      "src_path": "//home//dbeniteza_dev//mywebapp//html-docs-hello-world"
    }
   

   This command might take a few minutes to run. While the command is running, it displays information similar to the following example.

    {
      "URL": "http://az204app23426.azurewebsites.net",
      "appserviceplan": "dbeniteza.dev_asp_9735",
      "location": "canadacentral",
      "name": "az204app23426",
      "os": "Windows",
      "resourcegroup": "learn-ee876653-3347-44a8-a26e-1b17a70f0adb",
      "runtime_version": "-",
      "runtime_version_detected": "-",
      "sku": "FREE",
      "src_path": "//home//dbeniteza_dev//mywebapp//html-docs-hello-world"
    }
   

2. Open a new tab in your browser and navigate to the app URL (https://<myAppName>.azurewebsites.net) and verify the app is running - take note of the title at the top of the page. Leave the browser open on the app for the next section.

3. 💡

   You can copy <myAppName>.azurewebsites.net from the output of the previous command, or select the URL in the output to open the site in a new tab.

   

Update and redeploy the app

• In the Cloud Shell, type code index.html to open the editor. In the <img> image tag, change the src attribute to any URL that you'd like. You can always use the vi editor:

    dbeniteza_dev [ ~/mywebapp/html-docs-hello-world ]$ vi index.html
  

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
  
        <title>Azure App Service - Sample Static HTML Site</title>
  
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
      </head>
  
      <body>
        <div class="navbar-wrapper">
          <div class="container">
              <h1>Azure App Service - Sample Static HTML Site</h1>
              <hr/>
          </div>
        </div>
  
        <!-- Wrap the rest of the page in another container to center all the content. -->
  
        <div class="container">
  
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3hwODA2aDMxYXBmbG10d3lrMTVwanZsN21ieHVxbjZzM2N3aTR2NCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/KGd6ns7MR1gPCRT52z/giphy.gif">
              <h2>Azure App Service Web Apps</h2>
              <p>App Service Web Apps is a fully managed compute platform that is optimized for hosting websites and web applications. This platform-as-a-service (PaaS) offering of Microsoft Azure lets you focus on your business logic while Azure takes care of the infrastructure to run and scale your apps.</p>
            </div>
          </div>
        </div>
  
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
  

  In my case, I used this GIF from GIPHY:

  

• Use the commands ctrl-s to save and ctrl-q to exit (or Esc + :x when using vi editor).

• Redeploy the app with the same az webapp up command you used earlier.

    dbeniteza_dev [ ~/mywebapp/html-docs-hello-world ]$ az webapp up -g $resourceGroup -n $appName --html
    Webapp 'az204app23426' already exists. The command will deploy contents to the existing app.
    Creating AppServicePlan 'dbeniteza.dev_asp_9735' or Updating if already exists
    Creating zip with contents of dir /home/dbeniteza_dev/mywebapp/html-docs-hello-world ...
    Getting scm site credentials for zip deployment
    Starting zip deployment. This operation can take a while to complete ...
    Deployment endpoint responded with status code 202
    Polling the status of async deployment. Start Time: 2025-04-04 07:22:36.226903+00:00 UTC
    You can launch the app at http://az204app23426.azurewebsites.net
    Setting 'az webapp up' default arguments for current directory. Manage defaults with 'az configure --scope local'
    --resource-group/-g default: learn-ee876653-3347-44a8-a26e-1b17a70f0adb
    --sku default: F1
    --plan/-p default: dbeniteza.dev_asp_9735
    --location/-l default: canadacentral
    --name/-n default: az204app23426
    {
      "URL": "http://az204app23426.azurewebsites.net",
      "appserviceplan": "dbeniteza.dev_asp_9735",
      "location": "canadacentral",
      "name": "az204app23426",
      "os": "Windows",
      "resourcegroup": "learn-ee876653-3347-44a8-a26e-1b17a70f0adb",
      "runtime_version": "-",
      "runtime_version_detected": "-",
      "sku": "FREE",
      "src_path": "//home//dbeniteza_dev//mywebapp//html-docs-hello-world"
    }
  

After deployment is completed switch back to the browser and refresh the page (https://<myAppName>.azurewebsites.net)

Source

• AZ-204: Implement Azure App Service web apps

• Exercise: Create a static HTML web app by using Azure Cloud Shell