{"id":3592,"date":"2023-04-12T15:39:33","date_gmt":"2023-04-12T15:39:33","guid":{"rendered":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/"},"modified":"2026-01-15T18:04:26","modified_gmt":"2026-01-15T18:04:26","slug":"creating-a-simple-azure-app-service-web-app","status":"publish","type":"post","link":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/","title":{"rendered":"How Do I Create a Simple Azure App Service Web App?"},"content":{"rendered":"<p>The <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/overview\">Azure App Service<\/a> is\u00a0a Platform as a Service (or PaaS) offering from Microsoft. It\u2019s a component that provides resources for deploying web applications and for making deployed web applications accessible by HTTP clients. You can use it to host web applications, REST API&#8217;s and backend services for mobile applications in almost any programming language or framework you want. You can also deploy in both MS Windows and Linux-based environments.<\/p>\n<p><strong>A Test Drive<\/strong><\/p>\n<p>To get a feel for how this works we can create and then update a simple web app with just a few Azure CLI commands. I\u2019ve used Azure CLI in other posts and found it to be easily accessible, well documented, and straight-forward to use. In this post, I used only 4 Azure CLI commands (well, and 2 keyboard commands) to accomplish the following:<\/p>\n<ul>\n<li>Create an Azure Resource Group.<\/li>\n<li>Create an Azure App Service Plan.<\/li>\n<li>Create an Azure Web App.<\/li>\n<li>Deploy files from the working directory to the Azure Web App.<\/li>\n<\/ul>\n<p><strong>Step-by-Step<\/strong><\/p>\n<p>The first step is to login to the\u00a0Azure portal\u00a0and open the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cloud-shell\/overview\">Cloud Shell<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2011 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W1-min.jpg\" alt=\"\" width=\"900\" height=\"196\" \/><\/p>\n<p>After the shell opens, select the\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cloud-shell\/quickstart\">Bash\u00a0environment<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2006 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W2-min.jpg\" alt=\"\" width=\"900\" height=\"181\" \/><\/p>\n<p>Now, you create a directory named \u201chtmlapp\u201d (using the mkdir command) and then navigate to it (with the cd command):<\/p>\n<p>Next, you run the following\u00a0git\u00a0command to clone a sample (basic) HTML+CSS web app repository to our new\u00a0<em>htmlapp<\/em>\u00a0directory:<\/p>\n<p>Once that is done, you can change to the directory that contains the sample app code and run the\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/webapp?view=azure-cli-latest\">az webapp up<\/a>\u00a0command, providing a Azure Web App name (I used jamesdouglasmillerapp) and n Azure region (I used\u00a0eastus).<\/p>\n<p>cd html-docs-hello-world<\/p>\n<p>az webapp up &#8211;location eastus &#8211;name jamesdouglasmillerapp \u2013html<\/p>\n<p>This takes several minutes to run and displays various status messages and when it completes it gives the following feedback:<\/p>\n<p>Now if you open a web browser and navigate to the App\u2019s URL (http:\/\/<strong>jamesdouglasmillerapp<\/strong>.azurewebsites.net) you can see that the app is running since we see the static HTML generated below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2012 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/w3-min.jpg\" alt=\"\" width=\"900\" height=\"374\" \/><\/p>\n<p><strong>Making Some Changes<\/strong><\/p>\n<p>If you go back to the Azure Cloud Shell and type\u00a0code index.html, \u00a0The code editor will open with the source HTML code of the sample app displayed. I changed the\u00a0HTML &lt;h1&gt;\u00a0heading tag a bit and also added an HTML href link (to my LinkedIn profile):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2007 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W4-min.jpg\" alt=\"\" width=\"900\" height=\"276\" \/><\/p>\n<p>Once I completed those code changes I used the keyboard commands\u00a0<strong>ctrl-s<\/strong>\u00a0to save and\u00a0<strong>ctrl-q<\/strong>\u00a0to close the editor and then redeployed my app (using the same\u00a0az webapp up\u00a0command as I did earlier). Below is the output generated from updating my app:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2008 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W5-min.jpg\" alt=\"\" width=\"900\" height=\"277\" \/><\/p>\n<p>Once the redeployment of my updated HTML Web app completed, I switched back to my web browser and refreshed the page and I can see my <em>changed heading line<\/em> as well as that href link:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2009 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W6-min.jpg\" alt=\"\" width=\"900\" height=\"208\" \/><\/p>\n<p>Finally, if I click on that link, I am redirected to <a href=\"https:\/\/www.linkedin.com\/in\/jamesdouglasmiller\/\">my LinkedIn profile<\/a>!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2010 alignnone\" src=\"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W7-min.jpg\" alt=\"\" width=\"900\" height=\"371\" \/><\/p>\n<p>\u201c\u2026Each soul is a star, and all stars are set in the infinite Azure, the eternal sky-the Lord\u2026\u201d (Swami Vivekananda).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Azure App Service is\u00a0a Platform as a Service (or PaaS) offering from Microsoft. It\u2019s a component that provides resources for deploying web applications and for making deployed web applications accessible by HTTP clients. You can use it to host web applications, REST API&#8217;s and backend services for mobile applications in almost any programming language&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[34],"class_list":["post-3592","post","type-post","status-publish","format-standard","hentry","category-quebit-value","tag-data-management"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How Do I Create a Simple Azure App Service Web App? - QueBIT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Do I Create a Simple Azure App Service Web App? - QueBIT\" \/>\n<meta property=\"og:description\" content=\"The Azure App Service is\u00a0a Platform as a Service (or PaaS) offering from Microsoft. It\u2019s a component that provides resources for deploying web applications and for making deployed web applications accessible by HTTP clients. You can use it to host web applications, REST API&#8217;s and backend services for mobile applications in almost any programming language&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/\" \/>\n<meta property=\"og:site_name\" content=\"QueBIT\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-12T15:39:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-15T18:04:26+00:00\" \/>\n<meta name=\"author\" content=\"agoddard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"agoddard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/\"},\"author\":{\"name\":\"agoddard\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/#\\\/schema\\\/person\\\/e52d72da0fd2f5f70d189343fe4f5084\"},\"headline\":\"How Do I Create a Simple Azure App Service Web App?\",\"datePublished\":\"2023-04-12T15:39:33+00:00\",\"dateModified\":\"2026-01-15T18:04:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/\"},\"wordCount\":514,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/W1-min.jpg\",\"keywords\":[\"Data Management\"],\"articleSection\":[\"QueBIT Value\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/\",\"url\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/\",\"name\":\"How Do I Create a Simple Azure App Service Web App? - QueBIT\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/W1-min.jpg\",\"datePublished\":\"2023-04-12T15:39:33+00:00\",\"dateModified\":\"2026-01-15T18:04:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/#\\\/schema\\\/person\\\/e52d72da0fd2f5f70d189343fe4f5084\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/W1-min.jpg\",\"contentUrl\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/W1-min.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/creating-a-simple-azure-app-service-web-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Do I Create a Simple Azure App Service Web App?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/#website\",\"url\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/\",\"name\":\"QueBIT\",\"description\":\"QueBIT\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/#\\\/schema\\\/person\\\/e52d72da0fd2f5f70d189343fe4f5084\",\"name\":\"agoddard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g\",\"caption\":\"agoddard\"},\"sameAs\":[\"https:\\\/\\\/quebit.com\\\/askquebit\"],\"url\":\"https:\\\/\\\/quebit.com\\\/askquebit\\\/author\\\/agoddard\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Do I Create a Simple Azure App Service Web App? - QueBIT","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/","og_locale":"en_US","og_type":"article","og_title":"How Do I Create a Simple Azure App Service Web App? - QueBIT","og_description":"The Azure App Service is\u00a0a Platform as a Service (or PaaS) offering from Microsoft. It\u2019s a component that provides resources for deploying web applications and for making deployed web applications accessible by HTTP clients. You can use it to host web applications, REST API&#8217;s and backend services for mobile applications in almost any programming language&hellip;","og_url":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/","og_site_name":"QueBIT","article_published_time":"2023-04-12T15:39:33+00:00","article_modified_time":"2026-01-15T18:04:26+00:00","author":"agoddard","twitter_card":"summary_large_image","twitter_misc":{"Written by":"agoddard","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#article","isPartOf":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/"},"author":{"name":"agoddard","@id":"https:\/\/quebit.com\/askquebit\/#\/schema\/person\/e52d72da0fd2f5f70d189343fe4f5084"},"headline":"How Do I Create a Simple Azure App Service Web App?","datePublished":"2023-04-12T15:39:33+00:00","dateModified":"2026-01-15T18:04:26+00:00","mainEntityOfPage":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/"},"wordCount":514,"commentCount":0,"image":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W1-min.jpg","keywords":["Data Management"],"articleSection":["QueBIT Value"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/","url":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/","name":"How Do I Create a Simple Azure App Service Web App? - QueBIT","isPartOf":{"@id":"https:\/\/quebit.com\/askquebit\/#website"},"primaryImageOfPage":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#primaryimage"},"image":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#primaryimage"},"thumbnailUrl":"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W1-min.jpg","datePublished":"2023-04-12T15:39:33+00:00","dateModified":"2026-01-15T18:04:26+00:00","author":{"@id":"https:\/\/quebit.com\/askquebit\/#\/schema\/person\/e52d72da0fd2f5f70d189343fe4f5084"},"breadcrumb":{"@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#primaryimage","url":"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W1-min.jpg","contentUrl":"https:\/\/quebit.com\/askquebit\/wp-content\/uploads\/2022\/02\/W1-min.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/quebit.com\/askquebit\/creating-a-simple-azure-app-service-web-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/quebit.com\/askquebit\/"},{"@type":"ListItem","position":2,"name":"How Do I Create a Simple Azure App Service Web App?"}]},{"@type":"WebSite","@id":"https:\/\/quebit.com\/askquebit\/#website","url":"https:\/\/quebit.com\/askquebit\/","name":"QueBIT","description":"QueBIT","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/quebit.com\/askquebit\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/quebit.com\/askquebit\/#\/schema\/person\/e52d72da0fd2f5f70d189343fe4f5084","name":"agoddard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d817b364cff1d66116debde8d1c85e5e76eeece9c5ae731b19276a6040231455?s=96&d=mm&r=g","caption":"agoddard"},"sameAs":["https:\/\/quebit.com\/askquebit"],"url":"https:\/\/quebit.com\/askquebit\/author\/agoddard\/"}]}},"_links":{"self":[{"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/posts\/3592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/comments?post=3592"}],"version-history":[{"count":1,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/posts\/3592\/revisions"}],"predecessor-version":[{"id":4905,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/posts\/3592\/revisions\/4905"}],"wp:attachment":[{"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/media?parent=3592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/categories?post=3592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quebit.com\/askquebit\/wp-json\/wp\/v2\/tags?post=3592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}