{"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 class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">code<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">az<code> login<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">\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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"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.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Marcelin NDJILA\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/exceedthecloud.com\/?p=322\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"exceedthecloud.com - Going beyond the cloud, learning new stuffs everyday !\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Building a front-end web application by using Azure Web Apps - exceedthecloud.com\" \/>\n\t\t<meta property=\"og:description\" content=\"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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/exceedthecloud.com\/?p=322\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2021-10-23T17:02:36+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2022-02-11T11:22:22+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Building a front-end web application by using Azure Web Apps - exceedthecloud.com\" \/>\n\t\t<meta name=\"twitter:description\" content=\"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.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#blogposting\",\"name\":\"Building a front-end web application by using Azure Web Apps - exceedthecloud.com\",\"headline\":\"Building a front-end web application by using Azure Web Apps\",\"author\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?author=1#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/photo-1461749280684-dccba630e2f6.jpg\",\"width\":500,\"height\":334},\"datePublished\":\"2021-10-23T18:02:36+00:00\",\"dateModified\":\"2022-02-11T11:22:22+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#webpage\"},\"articleSection\":\"Practical Labs Series, Web, Azure, Front-End, Web App, Web Application\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/exceedthecloud.com\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?cat=4#listItem\",\"name\":\"Practical Labs Series\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?cat=4#listItem\",\"position\":2,\"name\":\"Practical Labs Series\",\"item\":\"https:\\\/\\\/exceedthecloud.com\\\/?cat=4\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#listItem\",\"name\":\"Building a front-end web application by using Azure Web Apps\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#listItem\",\"position\":3,\"name\":\"Building a front-end web application by using Azure Web Apps\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?cat=4#listItem\",\"name\":\"Practical Labs Series\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/#organization\",\"name\":\"exceedthecloud.com\",\"description\":\"Going beyond the cloud, learning new stuffs everyday !\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?author=1#author\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/?author=1\",\"name\":\"Marcelin NDJILA\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/313fe81244bf3b0904f504f4f7306bd513918093551c74d1201a23374c87e9b2?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Marcelin NDJILA\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#webpage\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322\",\"name\":\"Building a front-end web application by using Azure Web Apps - exceedthecloud.com\",\"description\":\"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.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?author=1#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?author=1#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/photo-1461749280684-dccba630e2f6.jpg\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322\\\/#mainImage\",\"width\":500,\"height\":334},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/?p=322#mainImage\"},\"datePublished\":\"2021-10-23T18:02:36+00:00\",\"dateModified\":\"2022-02-11T11:22:22+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/#website\",\"url\":\"https:\\\/\\\/exceedthecloud.com\\\/\",\"name\":\"exceedthecloud.com\",\"description\":\"Going beyond the cloud, learning new stuffs everyday !\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/exceedthecloud.com\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Building a front-end web application by using Azure Web Apps - exceedthecloud.com","description":"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.","canonical_url":"https:\/\/exceedthecloud.com\/?p=322","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/exceedthecloud.com\/?p=322#blogposting","name":"Building a front-end web application by using Azure Web Apps - exceedthecloud.com","headline":"Building a front-end web application by using Azure Web Apps","author":{"@id":"https:\/\/exceedthecloud.com\/?author=1#author"},"publisher":{"@id":"https:\/\/exceedthecloud.com\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2021\/10\/photo-1461749280684-dccba630e2f6.jpg","width":500,"height":334},"datePublished":"2021-10-23T18:02:36+00:00","dateModified":"2022-02-11T11:22:22+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/exceedthecloud.com\/?p=322#webpage"},"isPartOf":{"@id":"https:\/\/exceedthecloud.com\/?p=322#webpage"},"articleSection":"Practical Labs Series, Web, Azure, Front-End, Web App, Web Application"},{"@type":"BreadcrumbList","@id":"https:\/\/exceedthecloud.com\/?p=322#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com#listItem","position":1,"name":"Home","item":"https:\/\/exceedthecloud.com","nextItem":{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com\/?cat=4#listItem","name":"Practical Labs Series"}},{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com\/?cat=4#listItem","position":2,"name":"Practical Labs Series","item":"https:\/\/exceedthecloud.com\/?cat=4","nextItem":{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com\/?p=322#listItem","name":"Building a front-end web application by using Azure Web Apps"},"previousItem":{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com\/?p=322#listItem","position":3,"name":"Building a front-end web application by using Azure Web Apps","previousItem":{"@type":"ListItem","@id":"https:\/\/exceedthecloud.com\/?cat=4#listItem","name":"Practical Labs Series"}}]},{"@type":"Organization","@id":"https:\/\/exceedthecloud.com\/#organization","name":"exceedthecloud.com","description":"Going beyond the cloud, learning new stuffs everyday !","url":"https:\/\/exceedthecloud.com\/"},{"@type":"Person","@id":"https:\/\/exceedthecloud.com\/?author=1#author","url":"https:\/\/exceedthecloud.com\/?author=1","name":"Marcelin NDJILA","image":{"@type":"ImageObject","@id":"https:\/\/exceedthecloud.com\/?p=322#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/313fe81244bf3b0904f504f4f7306bd513918093551c74d1201a23374c87e9b2?s=96&d=mm&r=g","width":96,"height":96,"caption":"Marcelin NDJILA"}},{"@type":"WebPage","@id":"https:\/\/exceedthecloud.com\/?p=322#webpage","url":"https:\/\/exceedthecloud.com\/?p=322","name":"Building a front-end web application by using Azure Web Apps - exceedthecloud.com","description":"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.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/exceedthecloud.com\/#website"},"breadcrumb":{"@id":"https:\/\/exceedthecloud.com\/?p=322#breadcrumblist"},"author":{"@id":"https:\/\/exceedthecloud.com\/?author=1#author"},"creator":{"@id":"https:\/\/exceedthecloud.com\/?author=1#author"},"image":{"@type":"ImageObject","url":"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2021\/10\/photo-1461749280684-dccba630e2f6.jpg","@id":"https:\/\/exceedthecloud.com\/?p=322\/#mainImage","width":500,"height":334},"primaryImageOfPage":{"@id":"https:\/\/exceedthecloud.com\/?p=322#mainImage"},"datePublished":"2021-10-23T18:02:36+00:00","dateModified":"2022-02-11T11:22:22+00:00"},{"@type":"WebSite","@id":"https:\/\/exceedthecloud.com\/#website","url":"https:\/\/exceedthecloud.com\/","name":"exceedthecloud.com","description":"Going beyond the cloud, learning new stuffs everyday !","inLanguage":"en-US","publisher":{"@id":"https:\/\/exceedthecloud.com\/#organization"}}]},"og:locale":"en_US","og:site_name":"exceedthecloud.com - Going beyond the cloud, learning new stuffs everyday !","og:type":"article","og:title":"Building a front-end web application by using Azure Web Apps - exceedthecloud.com","og:description":"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.","og:url":"https:\/\/exceedthecloud.com\/?p=322","article:published_time":"2021-10-23T17:02:36+00:00","article:modified_time":"2022-02-11T11:22:22+00:00","twitter:card":"summary","twitter:title":"Building a front-end web application by using Azure Web Apps - exceedthecloud.com","twitter:description":"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."},"aioseo_meta_data":{"post_id":"322","title":null,"description":null,"keywords":[],"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-646b9bf1dda96","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-01-31 18:32:54","updated":"2025-09-02 21:33:10","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/exceedthecloud.com\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/exceedthecloud.com\/?cat=4\" title=\"Practical Labs Series\">Practical Labs Series<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tBuilding a front-end web application by using Azure Web Apps\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/exceedthecloud.com"},{"label":"Practical Labs Series","link":"https:\/\/exceedthecloud.com\/?cat=4"},{"label":"Building a front-end web application by using Azure Web Apps","link":"https:\/\/exceedthecloud.com\/?p=322"}],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/exceedthecloud.com\/wp-content\/uploads\/2021\/10\/photo-1461749280684-dccba630e2f6.jpg","_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}]}}