Practitioner Level

Hosting Static Content with Azure Storage

1 hour

4 Learning Objectives

About this Hands-on Lab

In this lab, you will simulate the code modifications necessary to point a web frontend to an API in Azure Functions. You will modify the storage account settings for static hosting, create the API inside of Azure Functions, modify the frontend code, rebuild the code, and upload the code to the storage account using the Azure CLI.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Create the API for the Necessary Code Modification: Create an Azure function using the code provided in the Git repository. This will allow the API URL to be generated, which is needed for the frontend code modification.
Prepare the Frontend Code for Azure Storage: Using the Azure Cloud Shell, clone the Git repository, modify the code for Azure Functions, and rebuild the frontend code.
Enable and Configure the Static Website Feature in Azure Storage: Using the Azure portal, enable the static website feature in Azure storage. Then, configure the endpoint to point to the correct file in the code base.
Migrate the Code to Azure Storage: Using the Azure CLI, upload the code into the Azure storage space.

Contact Sales See Pricing

Additional Resources

For this lab, as a systems engineer for Cloudy Solutions, Inc., you are tasked with the basic migration of your on-premises frontend static web app code to an Azure storage account. This will be done utilizing the static website feature. An Azure storage account has been deployed and is ready for use in the migration.

You will log in to the Azure portal to access Azure Cloud Shell. From there, you will download the frontend code, modify the code for the API frontend, install dependencies, and rebuild the web app. This is the first stage of the lab.

Once stage one is completed, you will minimize the Cloud Shell and enable the static website feature. Once the static website feature is enabled, you will return to Cloud Shell, where your “on-premises” frontend web app awaits, and upload the web app to the Azure storage container. The migration of this code is significantly more involved than a basic API code migration.

The goal of this lab is to get a feel for the process of a basic frontend code migration.

Resource Links

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.