Azure  

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

Article Overview

  1. Introduction

    1. Static HTML Web Application

    2. Azure Cloud Shell

    3. Azure App Service

  2. Prerequisite

  3. Create a static HTML app through Azure Cloud Shell

    1. Command

    2. Download web app

    3. Create and Deploy a web app

    4. Update and Re-deploy the web app

  4. Summary

1. Introduction

In this example, a basic HTML web app to Azure App Service has been deployed by using the Azure CLI. Later on, update the code and redeploy it.

1.1. Static HTML Web Application

A static HTML website is a web application that delivers content directly from the server to the client's web browser. Content is pre-built and remains the same for all users. There is no server-side processing or any dynamic content generation.

1.2. Azure Cloud Shell

It is an integrated command-line interface. It is a browser-based shell experience through the Azure Portal. One can manage and configure Azure resources directly from the web browser.

Azure Cloud Shell Architecture Diagram

Image 1: Azure Cloud Shell Architecture Diagram

1.3. Azure App Service

It is a platform-as-a-service (PaaS). Service is provided by Microsoft Azure. One can build, deploy, and scale web applications, RESTful APIs, or mobile backends.  

It supports various programming languages and frameworks such as .NET, .NET Core, Java, Node.js, PHP, Python, and Ruby.

2. Prerequisite

This sample requires a sandbox to complete. Sandbox is used to access free resources. Note that, sandbox may only be used to complete the training of Microsoft Learn.

Activate Sandbox

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.

Membership not found