Building a front-end web application by using Azure Web Apps

Prerequisites for this lab : PowerShell / Visual Studio Code / Azure Account / Download Labs Files here

Practical Labs 02: Building a front-end web application by using Azure Web Apps

• In the open browser window, go to the Azure portal (https://portal.azure.com).
• At the sign-in page, enter the email address for your Microsoft account, and then select Next.
• Enter the password for your Microsoft account, and then select Sign in.

Create a web app

• In the Azure portal’s navigation pane, select Create a resource.
• From the Create a resource blade, find the Search services and marketplace text box.
• In the search box, enter Web App, and then select Enter.
• From the Marketplace search results blade, select the Web App result.
• From the Web App blade, select Create.
• From the Create Web App blade, find the tabs from the blade, such as Basics.

Note: Each tab represents a step in the workflow to create a new web app. You can select Review + Create at any time to skip the remaining tabs.

• From the Basics tab, perform the following actions:
  • Leave the Subscription text box set to its default value.
  • In the Resource group drop-down list, select rg-exceed02102021.
  • In the Name text box, enter imgwebexceed02102021.
  • In the Publish section, select Code.
  • In the Runtime stack drop-down list, select .NET Core 3.1 (LTS).
  • In the Operating System section, select Windows.
  • In the Region drop-down list, select the East US region.
  • In the Windows Plan (East US) section, select ASP-exceed02102021 (S1).
  • Select Next: Deployment (Preview).
• From the Deployment (Preview) tab, perform the following actions:

• Select Next: Monitoring.
• From the Monitoring tab, perform the following actions:
  • In the Enable Application Insights section, select No.
  • Select Review + Create.
• From the Review + Create tab, review the options that you selected during the previous steps.

Select Create to create the web app by using your specified configuration. Wait for the creation task to complete before you move forward with this lab.

Configure a web app

• In the Azure portal’s navigation pane, select Resource groups.
• From the Resource groups blade, select the rg-exceed02102021 resource group that you created earlier in this lab.
• From the rg-exceed02102021 blade, select the imgwebexceed02102021 web app that you created earlier in this lab.

Note: If the imgwebexceed02102021 web app is not listed, select Show hidden types to display it.

• From the App Services blade, in the Settings section, select the Configuration link.
• In the Configuration section, perform the following actions:
  • Select the Application settings tab, and then select New application setting.
  • In the Add/Edit application setting pop-up dialog, in the Name text box, enter ApiUrl.
  • In the Value text box, enter the web app URL that you copied earlier in this lab.

Note: Make sure you include the protocol, such as https://, in the URL that you copy into the Value text box for this application setting.

• Leave the Deployment slot setting text box set to its default value.
  • Select OK to close the pop-up dialog, and then return to the Configuration section.
  • Select Save from the blade to persist your settings, and then select Continue.

Wait for your application settings to persist before you move forward with the lab.

Deploy an ASP.NET web application to Web Apps

• On the taskbar, select the Visual Studio Code icon.
• From the File menu, select Open Folder.
• In the File Explorer window, browse to azurelabs01 (F):\Downloads\azurelabs01\01\Starter\Web, and then select Select Folder.
• In the Explorer pane of the Visual Studio Code window, expand the Pages folder, and then select the Index.cshtml.cs file to open the file in the editor.
• In the editor, in the IndexModel class on line 30, observe the OnGetAsync method and the code used to retrieve the list of images from the API.
• In the IndexModel class on line 41, observe the OnPostAsync method and the code used to stream an uploaded image to the back-end API.
• On the taskbar, select the Windows Terminal icon.
• At the open command prompt, enter the following command, and then select Enter to sign in to the Azure CLI:

code

az login

·  In the browser window, perform the following actions:

• Enter the email address for your Microsoft account, and then select Next.
• Enter the password for your Microsoft account, and then select Sign in.

·  Return to the currently open Command Prompt window. Wait for the sign-in process to finish.

·  Enter the following command, and then select Enter to list all the apps in your rg-exceed02102021 resource group:

code

az webapp list --resource-group rg-exceed02102021

·  Enter the following command, and then select Enter to find the apps that have the imgweb* prefix:

code

az webapp list --resource-group rg-exceed02102021 --query "[?starts_with(name, 'imgweb')]"

·  Enter the following command, and then select Enter to render only the name of the single app that has the imgweb* prefix:

code

azwebapplist--resource-grouprg-exceed02102021--query "[?starts_with(name, 'imgweb')].{Name:name}" --outputtsv

·  Enter the following command, and then select Enter to change the current directory to the azurelabs01 (F):\Downloads\azurelabs01\01\Starter\Web directory that contains the lab files:

code

cd F:\Downloads\azurelabs01\01\Starter\Web\

·  Enter the following command, and then select Enter to deploy the web.zip file to the web app that you created earlier in this lab:

code

az webapp deployment source config-zip 

• Note: Replace the <name-of-your-web-app> placeholder with the name of the web app that you created earlier in this lab. You recently queried this app’s name in the previous steps.

Wait for the deployment to complete before you move forward with this lab.

• In the Azure portal’s navigation pane, select Resource groups.
• From the Resource groups blade, select the rg-exceed02102021 resource group that you created earlier in this lab.
• From the rg-exceed02102021 blade, select the imgwebexceed02102021 web app that you created earlier in this lab.
• From the App Services blade, select Browse.
• Observe the list of images in the gallery. The gallery should list a single image that was uploaded to Storage earlier in the lab.

• From the Contoso Photo Gallery webpage, find the Upload a new image section, and then perform the following actions:
  • Select Browse.
  • In the File Explorer window, browse to azurelabs01 (F):\Downloads\azurelabs01\01\Starter\Images, select the bahnmi.jpg file, and then select Open.
  • Select Upload.
• Observe that the list of gallery images has updated with your new image.

Note: In some rare cases, you might need to refresh your browser window to retrieve the new image.

• Return to your browser window with the Azure portal.
• Close the currently running Visual Studio Code and Windows Terminal applications.

Review

In this lab, you created an Azure web app and deployed an existing web application’s code to the resource in the cloud.

Reminder: Don’t forget to delete or shutdown all unused Azure resources after your labs for cost saving