{"id":322,"date":"2021-10-23T18:02:36","date_gmt":"2021-10-23T17:02:36","guid":{"rendered":"http:\/\/192.168.8.123\/?p=322"},"modified":"2022-02-11T11:22:22","modified_gmt":"2022-02-11T11:22:22","slug":"building-a-front-end-web-application-by-using-azure-web-apps","status":"publish","type":"post","link":"https:\/\/exceedthecloud.com\/?p=322","title":{"rendered":"Building a front-end web application by using Azure Web Apps"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Prerequisites for this lab : PowerShell \/ Visual Studio Code \/ Azure Account \/&nbsp;<a href=\"https:\/\/github.com\/marcelin-ndjila\/Practical-Labs-Series\/blob\/master\/azurelabs01.zip\" target=\"_blank\" rel=\"noreferrer noopener\">Download Labs Files here<\/a><\/p>\n\n\n\n<p><strong>Practical Labs 02:<\/strong>&nbsp;<strong>Building a front-end web application by using Azure Web Apps<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the open browser window, go to the Azure portal (<a href=\"https:\/\/portal.azure.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/portal.azure.com<\/a>).<\/li><li>At the sign-in page, enter the email address for your Microsoft account, and then select&nbsp;<strong>Next<\/strong>.<\/li><li>Enter the password for your Microsoft account, and then select&nbsp;<strong>Sign in<\/strong>.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"create-a-web-app\">Create a web app<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>In the Azure portal\u2019s navigation pane, select&nbsp;<strong>Create a resource<\/strong>.<\/li><li>From the&nbsp;<strong>Create a resource<\/strong>&nbsp;blade, find the&nbsp;<strong>Search services and marketplace<\/strong>&nbsp;text box.<\/li><li>In the search box, enter&nbsp;<strong>Web App<\/strong>, and then select Enter.<\/li><li>From the&nbsp;<strong>Marketplace<\/strong>&nbsp;search results blade, select the&nbsp;<strong>Web App<\/strong>&nbsp;result.<\/li><li>From the&nbsp;<strong>Web App<\/strong>&nbsp;blade, select&nbsp;<strong>Create<\/strong>.<\/li><li>From the&nbsp;<strong>Create Web App<\/strong>&nbsp;blade, find the tabs from the blade, such as&nbsp;<strong>Basics<\/strong>.<\/li><\/ul>\n\n\n\n<p><strong>Note<\/strong>: Each tab represents a step in the workflow to create a new web app. You can select&nbsp;<strong>Review + Create<\/strong>&nbsp;at any time to skip the remaining tabs.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>From the&nbsp;<strong>Basics<\/strong>&nbsp;tab, perform the following actions:<ul><li>Leave the&nbsp;<strong>Subscription<\/strong>&nbsp;text box set to its default value.<\/li><li>In the&nbsp;<strong>Resource group<\/strong>&nbsp;drop-down list, select&nbsp;<strong>rg-exceed02102021<\/strong>.<\/li><li>In the&nbsp;<strong>Name<\/strong>&nbsp;text box, enter&nbsp;<strong>imgwebexceed02102021<\/strong>.<\/li><li>In the&nbsp;<strong>Publish<\/strong>&nbsp;section, select&nbsp;<strong>Code<\/strong>.<\/li><li>In the&nbsp;<strong>Runtime stack<\/strong>&nbsp;drop-down list, select&nbsp;<strong>.NET Core 3.1 (LTS)<\/strong>.<\/li><li>In the&nbsp;<strong>Operating System<\/strong>&nbsp;section, select&nbsp;<strong>Windows<\/strong>.<\/li><li>In the&nbsp;<strong>Region<\/strong>&nbsp;drop-down list, select the&nbsp;<strong>East US<\/strong>&nbsp;region.<\/li><li>In the&nbsp;<strong>Windows Plan (East US)<\/strong>&nbsp;section, select&nbsp;<strong>ASP-exceed02102021 (S1)<\/strong>.<\/li><li>Select&nbsp;<strong>Next: Deployment (Preview)<\/strong>.<\/li><\/ul><\/li><li>From the&nbsp;<strong>Deployment (Preview)<\/strong>&nbsp;tab, perform the following actions:<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Select&nbsp;<strong>Next: Monitoring<\/strong>.<\/li><li>From the&nbsp;<strong>Monitoring<\/strong>&nbsp;tab, perform the following actions:<ul><li>In the&nbsp;<strong>Enable Application Insights<\/strong>&nbsp;section, select&nbsp;<strong>No<\/strong>.<\/li><li>Select&nbsp;<strong>Review + Create<\/strong>.<\/li><\/ul><\/li><li>From the&nbsp;<strong>Review + Create<\/strong>&nbsp;tab, review the options that you selected during the previous steps.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/02\/img01-1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Select&nbsp;<strong>Create<\/strong>&nbsp;to create the web app by using your specified configuration. Wait for the creation task to complete before you move forward with this lab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"configure-a-web-app\">Configure a web app<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>In the Azure portal\u2019s navigation pane, select&nbsp;<strong>Resource groups<\/strong>.<\/li><li>From the&nbsp;<strong>Resource groups<\/strong>&nbsp;blade, select the&nbsp;<strong>rg-exceed02102021<\/strong>&nbsp;resource group that you created earlier in this lab.<\/li><li>From the&nbsp;<strong>rg-exceed02102021<\/strong>&nbsp;blade, select the&nbsp;<strong>imgwebexceed02102021<\/strong>&nbsp;web app that you created earlier in this lab.<\/li><\/ul>\n\n\n\n<p><strong>Note<\/strong>: If the&nbsp;<strong>imgwebexceed02102021<\/strong>&nbsp;web app is not listed, select&nbsp;<strong>Show hidden types<\/strong>&nbsp;to display it.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>From the&nbsp;<strong>App Services<\/strong>&nbsp;blade, in the&nbsp;<strong>Settings<\/strong>&nbsp;section, select the&nbsp;<strong>Configuration<\/strong>&nbsp;link.<\/li><li>In the&nbsp;<strong>Configuration<\/strong>&nbsp;section, perform the following actions:<ul><li>Select the&nbsp;<strong>Application settings<\/strong>&nbsp;tab, and then select&nbsp;<strong>New application setting<\/strong>.<\/li><li>In the&nbsp;<strong>Add\/Edit application setting<\/strong>&nbsp;pop-up dialog, in the&nbsp;<strong>Name<\/strong>&nbsp;text box, enter&nbsp;<strong>ApiUrl<\/strong>.<\/li><li>In the&nbsp;<strong>Value<\/strong>&nbsp;text box, enter the web app URL that you copied earlier in this lab.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Note<\/strong>: Make sure you include the protocol, such as&nbsp;<strong>https:\/\/<\/strong>, in the URL that you copy into the&nbsp;<strong>Value<\/strong>&nbsp;text box for this application setting.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Leave the&nbsp;<strong>Deployment slot setting<\/strong>&nbsp;text box set to its default value.<ul><li>Select&nbsp;<strong>OK<\/strong>&nbsp;to close the pop-up dialog, and then return to the&nbsp;<strong>Configuration<\/strong>&nbsp;section.<\/li><li>Select&nbsp;<strong>Save<\/strong>&nbsp;from the blade to persist your settings, and then select&nbsp;<strong>Continue<\/strong>.<\/li><\/ul><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/02\/img02-1-1024x442.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Wait for your application settings to persist before you move forward with the lab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"deploy-an-asp-net-web-application-to-web-apps\">Deploy an ASP.NET web application to Web Apps<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>On the taskbar, select the&nbsp;<strong>Visual Studio Code<\/strong>&nbsp;icon.<\/li><li>From the&nbsp;<strong>File<\/strong>&nbsp;menu, select&nbsp;<strong>Open Folder<\/strong>.<\/li><li>In the&nbsp;<strong>File Explorer<\/strong>&nbsp;window, browse to&nbsp;<strong>azurelabs01<\/strong>&nbsp;<strong>(F):\\Downloads\\azurelabs01\\01\\Starter\\Web<\/strong>, and then select&nbsp;<strong>Select Folder<\/strong>.<\/li><li>In the&nbsp;Explorer&nbsp;pane of the&nbsp;<strong>Visual Studio Code<\/strong>&nbsp;window, expand the&nbsp;<strong>Pages<\/strong>&nbsp;folder, and then select the&nbsp;<strong>Index.cshtml.cs<\/strong>&nbsp;file to open the file in the editor.<\/li><li>In the editor, in the&nbsp;<strong>IndexModel<\/strong>&nbsp;class on line 30, observe the&nbsp;<strong>OnGetAsync<\/strong>&nbsp;method and the code used to retrieve the list of images from the API.<\/li><li>In the&nbsp;<strong>IndexModel<\/strong>&nbsp;class on line 41, observe the&nbsp;<strong>OnPostAsync<\/strong>&nbsp;method and the code used to stream an uploaded image to the back-end API.<\/li><li>On the taskbar, select the&nbsp;<strong>Windows Terminal<\/strong>&nbsp;icon.<\/li><li>At the open command prompt, enter the following command, and then select Enter to sign in to the Azure CLI:<\/li><\/ul>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">az<code> login<\/code><\/pre>\n\n\n\n<p>\u00b7&nbsp; In the browser window, perform the following actions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Enter the email address for your Microsoft account, and then select&nbsp;<strong>Next<\/strong>.<\/li><li>Enter the password for your Microsoft account, and then select&nbsp;<strong>Sign in<\/strong>.<\/li><\/ul>\n\n\n\n<p>\u00b7&nbsp; Return to the currently open&nbsp;<strong>Command Prompt<\/strong>&nbsp;window. Wait for the sign-in process to finish.<\/p>\n\n\n\n<p>\u00b7&nbsp; Enter the following command, and then select Enter to list all the apps in your&nbsp;<strong>rg-exceed02102021<\/strong>&nbsp;resource group:<\/p>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>az webapp <\/code>list<code> --resource-group rg-exceed02102021<\/code><\/pre>\n\n\n\n<p>\u00b7&nbsp; Enter the following command, and then select Enter to find the apps that have the&nbsp;<strong>imgweb*<\/strong>&nbsp;prefix:<\/p>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>az webapp <\/code>list<code> --resource-group rg-exceed02102021 --query <\/code>\"[?starts_with(name, 'imgweb')]\"<\/pre>\n\n\n\n<p>\u00b7&nbsp; Enter the following command, and then select Enter to render only the name of the single app that has the&nbsp;<strong>imgweb*<\/strong>&nbsp;prefix:<\/p>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">azwebapplist--resource-grouprg-exceed02102021--query<code> \"<\/code>[?starts_with(name, 'imgweb')]<code>.{<\/code>Name<code>:name}\" <\/code>--outputtsv<\/pre>\n\n\n\n<p>\u00b7&nbsp; Enter the following command, and then select Enter to change the current directory to the a<strong>zurelabs01<\/strong>&nbsp;<strong>(F):\\Downloads\\azurelabs01<\/strong><strong>\\01\\Starter\\Web<\/strong>&nbsp;directory that contains the lab files:<\/p>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cd<code> F:\\Downloads\\azurelabs01\\01\\Starter\\Web\\<\/code><\/pre>\n\n\n\n<p>\u00b7&nbsp; Enter the following command, and then select Enter to deploy the&nbsp;<strong>web.zip<\/strong>&nbsp;file to the web app that you created earlier in this lab:<\/p>\n\n\n\n<p>code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>az webapp deployment source config-zip <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Note<\/strong>: Replace the&nbsp;<em>&lt;name-of-your-web-app&gt;<\/em>&nbsp;placeholder with the name of the web app that you created earlier in this lab. You recently queried this app\u2019s name in the previous steps.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/02\/img03-1-1024x518.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Wait for the deployment to complete before you move forward with this lab.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In the Azure portal\u2019s navigation pane, select&nbsp;<strong>Resource groups<\/strong>.<\/li><li>From the&nbsp;<strong>Resource groups<\/strong>&nbsp;blade, select the&nbsp;<strong>rg-exceed02102021<\/strong>&nbsp;resource group that you created earlier in this lab.<\/li><li>From the&nbsp;<strong>rg-exceed02102021<\/strong>&nbsp;blade, select the&nbsp;<strong>imgwebexceed02102021<\/strong>&nbsp;web app that you created earlier in this lab.<\/li><li>From the&nbsp;<strong>App Services<\/strong>&nbsp;blade, select&nbsp;<strong>Browse<\/strong>.<\/li><li>Observe the list of images in the gallery. The gallery should list a single image that was uploaded to Storage earlier in the lab.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/02\/img04-1-1024x514.png\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>From the&nbsp;<strong>Contoso Photo Gallery<\/strong>&nbsp;webpage, find the&nbsp;<strong>Upload a new image<\/strong>&nbsp;section, and then perform the following actions:<ul><li>Select&nbsp;<strong>Browse<\/strong>.<\/li><li>In the&nbsp;<strong>File Explorer<\/strong>&nbsp;window, browse to azurelabs01&nbsp;<strong>(F):\\Downloads\\azurelabs01\\01\\Starter\\Images<\/strong>, select the&nbsp;<strong>bahnmi.jpg<\/strong>&nbsp;file, and then select&nbsp;<strong>Open<\/strong>.<\/li><li>Select&nbsp;<strong>Upload<\/strong>.<\/li><\/ul><\/li><li>Observe that the list of gallery images has updated with your new image.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2022\/02\/img05-1-1024x545.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Note<\/strong>: In some rare cases, you might need to refresh your browser window to retrieve the new image.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Return to your browser window with the Azure portal.<\/li><li>Close the currently running Visual Studio Code and Windows Terminal applications.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"review\">Review<\/h4>\n\n\n\n<p>In this lab, you created an Azure web app and deployed an existing web application\u2019s code to the resource in the cloud.<\/p>\n\n\n\n<p><mark class=\"kt-highlight\"><strong>Reminder<\/strong>: Don\u2019t forget to delete or shutdown all unused Azure resources after your labs for cost saving<\/mark><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prerequisites for this lab : PowerShell \/ Visual Studio Code \/ Azure Account \/&nbsp;Download Labs Files here Practical Labs 02:&nbsp;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). &hellip; <a href=\"https:\/\/exceedthecloud.com\/?p=322\">Continued<\/a><\/p>\n","protected":false},"author":1,"featured_media":884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"kt_blocks_editor_width":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,26],"tags":[8,81,71,80],"class_list":["post-322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-practical-labs-series","category-web","tag-azure","tag-front-end","tag-web-app","tag-web-application"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2021\/10\/photo-1461749280684-dccba630e2f6.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":3,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":2341,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/2341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=\/wp\/v2\/media\/884"}],"wp:attachment":[{"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exceedthecloud.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}