How to create a static HTML web app by using Azure Cloud Shell?

3. Create a static HTML app through Azure Cloud Shell

This example deploys a static HTML+CSS site to Azure App Service through the Azure CLI and the az webapp up command. The same command can be used for redeployment after updates.

3.1. Command

The az webapp up command is used to create and update web apps. Following actions are performed after its execution:

• Default resource group created if not specified

• Create default app service plan

• Create an app with the specified name

• Deploy zip files from the current working directory to the web app

3.2. Download web app

Let's create a directory, clone the code, and set variables for the resource group and app names. Run the following commands in the sandbox Bash

  
    mkdir statichtmlwebapp
cd statichtmlwebapp
  

Output: It will create a statichtmlwebapp directory and move into it

  
    git clone https://github.com/Azure-Samples/static-html-web-app.git
  

Output: It will clone the app repository to the statichtmlwebapp directory

  
    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM
  

Output: It will set variables to hold the resource group name and the app name

3.3 . Create and Deploy Web App

Let’s deploy the web app

  
    cd static-html-web-app
az webapp up -g $resourceGroup -n $appName --html 
  

Output: It will change the directory to the sample code. Deploy using the az webapp up command

It might take a few minutes to run. During command execution, it displays information like the following:

  
    {
"app_url": "https://<AppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/static-html-web-app",
< JSON data removed for brevity. >
}
  

Output: After the deployment, one can access it from the browser using the URL https://<AppName>.

3.4. Update and Re-deploy web app

Let's update the content and redeploy the app in a simple way.

  
    code index.html
  

Output: The index.html file will be opened in the editor. Here, change the content as you like and save it by using the command Ctrl-S.

Now one can redeploy the app using the same command.

  
    az webapp up -g $resourceGroup -n $appName --html
  

Output: Redeployment will be completed, and then you can view the updated content from the browser page refresh

4. Summary

Here, a static HTML web app has been created by using Azure Cloud Shell with git clone and az webapp up commands.