{"id":2145,"date":"2020-05-17T22:17:57","date_gmt":"2020-05-17T22:17:57","guid":{"rendered":"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/?p=2145"},"modified":"2020-05-17T22:45:07","modified_gmt":"2020-05-17T22:45:07","slug":"hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps","status":"publish","type":"post","link":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/","title":{"rendered":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps"},"content":{"rendered":"\n<p>Blazor is the buzzword in SPA frameworks in 2020. Microsoft are all in behind it, and for good reason.<\/p>\n\n\n\n<p>Born out of Knockout and developed off the cuff by Steve Sanderson, Microsoft grabbed his concept and ran with it.<\/p>\n\n\n\n<p>Now one of the better SPA frameworks out there, Blazor is free and open source.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blazor Types<\/h2>\n\n\n\n<p>There are a few different version of Blazor to choose from, and I won&#8217;t go into much detail here about each one as there are a myriad of posts around that will discuss that in depth. <\/p>\n\n\n\n<p>The main two are;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blazor Server:<\/h2>\n\n\n\n<ul><li>Lives on the Server<\/li><li>Code written in Razor + C#<\/li><li>Thin client in the Browser<\/li><li>DOM changes coordinated by the server using SignalR<\/li><li>Online only<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Blazor WebAssembly<\/h2>\n\n\n\n<ul><li>Lives in the browser<\/li><li>Code written in Razor + C#<\/li><li>Runs in the Virtual Machine in the Browser<\/li><li>Executes actual Dot NET core Dlls<\/li><li>Works offline<\/li><\/ul>\n\n\n\n<p>Microsoft are working on a few more experimental types too; <\/p>\n\n\n\n<p>Blazor PWA (Progressive Web App)<br>Blazor Hybrid &#8211; Native apps for Mobile Devices using web Technologies<br>Blazor Native &#8211; Fully native Mobile Apps using Native Controls<br>Blazor Desktop  &#8211; Electron based Desktop Apps.<\/p>\n\n\n\n<p>You can find more info here&#8230;  <a href=\"https:\/\/visualstudiomagazine.com\/articles\/2019\/09\/26\/blazor-future.aspx\">https:\/\/visualstudiomagazine.com\/articles\/2019\/09\/26\/blazor-future.aspx<\/a> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blazor WebAssembly Flavours<\/h2>\n\n\n\n<p>On top of the various different version of Blazor above, there are a couple of types of Blazor Web Assembly too;<\/p>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">Traditional Blazor WebAssembly<\/h2>\n\n\n\n<ul><li>Single Client-Side Project<\/li><li>Can reach out to API End points<\/li><li>WebAssembly<\/li><li>Dot NET Core in the Browser<\/li><\/ul>\n\n\n\n<h2 class=\"has-text-align-left wp-block-heading\">ASP Hosted Blazor WebAssembly<\/h2>\n\n\n\n<ul><li>Client-Side, Server-Side and Shared Projects<\/li><li>Client-Side same as Traditional WebAssembly<\/li><li>Server-Side Serves Application files and hosts API Endpoints &#8211; Dot NET Core<\/li><li>Shared Project shares Business Logic and Models between Client and Server projects &#8211; Dot NET Core<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Azure App Service + Web Apps<\/h2>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Azure App Service (opens in a new tab)\" href=\"https:\/\/azure.microsoft.com\/en-gb\/services\/app-service\/\" target=\"_blank\">Azure App Service<\/a> is a Microsoft offering within Azure which hosts Web Apps written in various languages including Dot NET Core, Node and PHP.<\/p>\n\n\n\n<p>Azure App Service hosts the websites in containers, which means you can pick and choose which platform and operating system you&#8217;d like to run your app in.<\/p>\n\n\n\n<p>Each individual application is stored in it&#8217;s own Web App hosted in a container in an App Service.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Azure Web App and GitHub Actions<\/h2>\n\n\n\n<p>We always want to be working in an agile way, and employing a CI\/CD pipeline in our development is definitely what we should be doing along that journey.<\/p>\n\n\n\n<p>One great way we can accomplish this is to combine Azure Web Apps and GitHub Actions.<\/p>\n\n\n\n<p>We can use GitHub as our Source Control Repository and hook up a GitHub action which, whenever code is checked in to the repository, build our website files and publish them to an Azure Web App.<\/p>\n\n\n\n<p>The is all orchestrated in code using a YAML file&#8230; This YAML file contains all the required steps as code to build the website, create the artefacts and publish them to the Web App.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>There are a few steps we need to run through to get to the finished solution;<\/p>\n\n\n\n<ol class=\"contents-section-block\"><li><a href=\"#create-github-repo\">Create a GitHub Repo<\/a><\/li><li><a href=\"#create-app-service-plan\">Create an Azure App Service Plan<\/a><\/li><li><a href=\"#create-web-app\">Create a Web App<\/a><\/li><li><a href=\"#create-hosted-blazor-project\">Create a ASP.NET Hosted Blazor WebAssembly Project<\/a><\/li><li><a href=\"#publish-from-visual-studio\">Publish Code direct from Visual Studio<\/a><\/li><li><a href=\"#create-a-github-action\">Create a GitHub Action<\/a><\/li><li><a href=\"#check-in-code\">Check in Code and watch the GitHub action working<\/a><\/li><li><a href=\"#fix-web-config\">Fix an issue with the web.config file<\/a><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-github-repo\">1: Create a GitHub Repo<\/h2>\n\n\n\n<p> We&#8217;ll start out by creating a GitHub repository to house our code.<\/p>\n\n\n\n<p>Head over to GitHub and Sign in. Next up create a new Repository. Make sure to add a README and also a Visual Studio .gitignore, as we&#8217;re going to be creating a Dot Net Core based project in Visual Studio. Personally I think this option is a little confusing, and really should be a more specific naming convention.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-31.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"905\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-31-1024x905.png\" alt=\"\" class=\"wp-image-2163\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-31-1024x905.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-31-300x265.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-31-768x678.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-31-350x309.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-31.png 1106w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Create a New GitHub Repository<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-app-service-plan\">2: Create an Azure App Service Plan<\/h2>\n\n\n\n<p>Now head over to <a rel=\"noreferrer noopener\" aria-label=\"portal.azure.com (opens in a new tab)\" href=\"http:\/\/portal.azure.com\" target=\"_blank\">portal.azure.com<\/a>, sign in and click on the &#8220;<strong><em>Create a Resource<\/em><\/strong>&#8221; button to add a new resource;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-32.png\"><img decoding=\"async\" width=\"789\" height=\"306\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-32.png\" alt=\"\" class=\"wp-image-2165\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-32.png 789w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-32-300x116.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-32-768x298.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-32-350x136.png 350w\" sizes=\"(max-width: 789px) 100vw, 789px\" \/><\/a><figcaption>Create a Resource Button<\/figcaption><\/figure><\/div>\n\n\n\n<p>Enter &#8220;<strong><em>App Service Plan<\/em><\/strong>&#8221; in the search box, and choose that option from the results.<\/p>\n\n\n\n<p>Click the blue &#8220;<strong><em>Create<\/em><\/strong>&#8221; button to create a new Azure App Service Plan;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-33-1024x572.png\" alt=\"\" class=\"wp-image-2166\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33-1024x572.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33-300x168.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33-768x429.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33-1536x858.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33-350x196.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-33.png 1570w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Create a new Azure App Service Plan<\/figcaption><\/figure>\n\n\n\n<p>Choose a Subscription, create a new Resource Group to house your new resources and give your App Service Plan a Name, choose the Windows Operating System and a region close to where you are;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-35.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1021\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-35-1024x1021.png\" alt=\"\" class=\"wp-image-2168\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35-1024x1021.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35-300x300.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35-150x150.png 150w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35-768x765.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35-350x349.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-35.png 1194w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>App Service Plan Options<\/figcaption><\/figure><\/div>\n\n\n\n<p>Next, choose the &#8220;<strong><em>F1<\/em><\/strong>&#8221; Tier from the &#8220;<strong><em>SKU and Size<\/em><\/strong>&#8221; options;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-34.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"668\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-34-1024x668.png\" alt=\"\" class=\"wp-image-2167\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-34-1024x668.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-34-300x196.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-34-768x501.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-34-350x228.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-34.png 1283w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>App Service Plan SKU<\/figcaption><\/figure><\/div>\n\n\n\n<p>Finally, hit the blue &#8220;<strong><em>Review + Create<\/em><\/strong>&#8221; button at the bottom of the screen, confirm your setups and create your App Service Plan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-web-app\">3: Create a Web App <\/h2>\n\n\n\n<p>Next, we&#8217;ll create a Web App and house it the App Service we created in the last step.<\/p>\n\n\n\n<p>Head back to <a rel=\"noreferrer noopener\" aria-label=\"portal.azure.com (opens in a new tab)\" href=\"http:\/\/portal.azure.com\" target=\"_blank\">portal.azure.com<\/a> and click the &#8220;<strong><em>Create a Resource<\/em><\/strong>&#8221; button again. This time search for &#8220;<strong><em>Web App<\/em><\/strong>&#8221; to begin creating a new Web App.<\/p>\n\n\n\n<p>Choose the Subscription and Resource Group you used in Step 2.<\/p>\n\n\n\n<p>Now, give your Web App name. This will form part of the URL you&#8217;ll use to access your Web App, so it will need to be unique.<\/p>\n\n\n\n<p>Choose &#8220;<strong><em>Code<\/em><\/strong>&#8221; as the &#8220;<strong><em>Publish<\/em><\/strong>&#8221; method, and &#8220;<strong><em>.NET Core 3.1 (LTS)<\/em><\/strong>&#8221; as the &#8220;<strong><em>Runtime Stack<\/em><\/strong>&#8220;.<\/p>\n\n\n\n<p>This should default the &#8220;<strong><em>Operating System<\/em><\/strong>&#8221; to &#8220;<strong><em>Windows<\/em><\/strong>&#8220;.<\/p>\n\n\n\n<p>Choose the same region as you chose in Step 2 so that you can use the App Service Plan you created in Step 2.<\/p>\n\n\n\n<p>Next, choose the App Service Plan you created in Step 2 from the &#8220;<strong><em>Windows Plan<\/em><\/strong>&#8221; drop down at the bottom of the screen.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-36.png\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"1024\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-36-850x1024.png\" alt=\"\" class=\"wp-image-2169\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-36-850x1024.png 850w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-36-249x300.png 249w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-36-768x925.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-36-350x421.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-36.png 1141w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><figcaption>Create a Web App<\/figcaption><\/figure><\/div>\n\n\n\n<p>Finally, hit the blue &#8220;<strong><em>Review and Create<\/em><\/strong>&#8221; button, review your settings and create your Web App. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-hosted-blazor-project\">4: Create a ASP.NET Hosted Blazor WebAssembly Project<\/h2>\n\n\n\n<p>Now let&#8217;s head over to Visual Studio 2019 and create our Hosted Blazor WebAssembly App.<\/p>\n\n\n\n<p>You&#8217;re going to need the latest VS 2019&#8230; So go ahead and grab that from the <a rel=\"noreferrer noopener\" aria-label=\"Microsoft site (opens in a new tab)\" href=\"https:\/\/visualstudio.microsoft.com\/vs\/\" target=\"_blank\">Microsoft site<\/a>. The <a rel=\"noreferrer noopener\" aria-label=\"free Community Edition (opens in a new tab)\" href=\"https:\/\/visualstudio.microsoft.com\/thank-you-downloading-visual-studio\/?sku=Community&amp;rel=16\" target=\"_blank\">free Community Edition<\/a> is perfect for this.<\/p>\n\n\n\n<p>Once you have that downloaded and installed, fire it up and hit the &#8220;Clone a Repository&#8221; button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-39.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"678\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-39.png\" alt=\"\" class=\"wp-image-2176\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-39.png 1020w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-39-300x199.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-39-768x510.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-39-350x233.png 350w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/><\/a><figcaption>VS2019 &#8211; Clone a Repository<\/figcaption><\/figure><\/div>\n\n\n\n<p>Head back to your GitHub Repository click the &#8220;Clone or Download&#8221; button and copy the address.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-40.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"672\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-40.png\" alt=\"\" class=\"wp-image-2177\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-40.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-40-300x197.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-40-768x504.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-40-350x230.png 350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Repo Address<\/figcaption><\/figure><\/div>\n\n\n\n<p>Switch back to the VS2019 Clone Repo Dialog and paste the address into the &#8220;Repository Location&#8221; box, then choose a location for your repository;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-41-1024x710.png\" alt=\"\" class=\"wp-image-2179\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-41-1024x710.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-41-300x208.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-41-768x532.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-41-350x243.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-41.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>VS2019 &#8211; Repository Location<\/figcaption><\/figure>\n\n\n\n<p>Of course, you could also use the &#8220;Browse a repository&#8221; GitHub Option and choose your Repository that way too;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"901\" height=\"632\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-77.png\" alt=\"\" class=\"wp-image-2232\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-77.png 901w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-77-300x210.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-77-768x539.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-77-350x246.png 350w\" sizes=\"(max-width: 901px) 100vw, 901px\" \/><figcaption>VS2019 &#8211; Clone a GitHub Repository<\/figcaption><\/figure><\/div>\n\n\n\n<p>Once the repository has finished cloning, click File&gt;Add and choose New Project;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-43.png\"><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"746\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-43.png\" alt=\"\" class=\"wp-image-2181\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-43.png 787w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-43-300x284.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-43-768x728.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-43-350x332.png 350w\" sizes=\"(max-width: 787px) 100vw, 787px\" \/><\/a><figcaption>Add New Project<\/figcaption><\/figure><\/div>\n\n\n\n<p>In the &#8220;<strong><em>Search for Templates<\/em><\/strong>&#8221; search box, enter &#8220;<strong><em>Blazor App<\/em><\/strong>&#8221; and choose the &#8220;<strong><em>Blazor App<\/em><\/strong>&#8221; from the list below;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-44.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-44-1024x710.png\" alt=\"\" class=\"wp-image-2182\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-44-1024x710.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-44-300x208.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-44-768x532.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-44-350x243.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-44.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor App Template<\/figcaption><\/figure><\/div>\n\n\n\n<p>Give your App a name and hit the &#8220;<strong><em>Create<\/em><\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-45.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-45-1024x710.png\" alt=\"\" class=\"wp-image-2183\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-45-1024x710.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-45-300x208.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-45-768x532.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-45-350x243.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-45.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor App Name<\/figcaption><\/figure><\/div>\n\n\n\n<p>On the next page, select &#8220;<strong><em>Blazor WebAssembly App<\/em><\/strong>&#8220;, deselect &#8220;<strong><em>Configure for HTTPS<\/em><\/strong>&#8221; (we don&#8217;t need that for this demo), select &#8220;<strong><em>ASP.NET Core hosted<\/em><\/strong>&#8221; and hit the &#8220;<strong><em>Create<\/em><\/strong>&#8221; button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"710\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-46.png\" alt=\"\" class=\"wp-image-2184\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-46.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-46-300x208.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-46-768x533.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-46-350x243.png 350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Blazor App Options<\/figcaption><\/figure><\/div>\n\n\n\n<p> I had an issue with permissions at this point, so needed to restart Visual Studio&#8230; So go ahead and do that if required.<\/p>\n\n\n\n<p>You&#8217;ll see in the Solution Explorer that you have three projects; &#8220;<strong><em>Client<\/em><\/strong>&#8220;, &#8220;<strong><em>Server<\/em><\/strong>&#8221; and &#8220;<strong><em>Shared<\/em><\/strong>&#8220;;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-49.png\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"846\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-49.png\" alt=\"\" class=\"wp-image-2188\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-49.png 624w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-49-221x300.png 221w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-49-350x475.png 350w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><figcaption>Hosted Blazor Solution Projects<\/figcaption><\/figure><\/div>\n\n\n\n<p>We can give the Web App a quick test by hitting the Run with &#8220;<strong><em>IIS Express<\/em><\/strong>&#8221; Button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-47.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-47-1024x353.png\" alt=\"\" class=\"wp-image-2186\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-47-1024x353.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-47-300x103.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-47-768x265.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-47-350x121.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-47.png 1035w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Run with IIS Express<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-48.png\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"1024\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-48-924x1024.png\" alt=\"\" class=\"wp-image-2187\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48-924x1024.png 924w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48-271x300.png 271w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48-768x851.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48-1386x1536.png 1386w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48-350x388.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-48.png 1555w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/a><figcaption>Vanilla Hosted Blazor Demo<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"publish-from-visual-studio\">5: Publish Code direct from Visual Studio<\/h2>\n\n\n\n<p>Before we get on to using GitHub Actions, let&#8217;s make sure that we&#8217;ve got the rest of the infrastructure hooked up correctly by publishing our site directly from Visual Studio.<\/p>\n\n\n\n<p>Head back to <a rel=\"noreferrer noopener\" aria-label=\"portal.azure.com (opens in a new tab)\" href=\"http:\/\/portal.azure.com\" target=\"_blank\">portal.azure.com<\/a> and navigate to your Web App. Click the &#8220;Get publish profile&#8221; button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-50.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-50-1024x458.png\" alt=\"\" class=\"wp-image-2190\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-50-1024x458.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-50-300x134.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-50-768x344.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-50-350x157.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-50.png 1160w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Get publish profile button<\/figcaption><\/figure><\/div>\n\n\n\n<p>This will download a file containing the wherewithal for Visual Studio to be able to connect to and publish our files to the Web App.<\/p>\n\n\n\n<p>Switch back to Visual Studio and right click on the Server project and click the &#8220;<strong><em>Publish<\/em><\/strong>&#8221; menu item;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-51.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"774\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-51.png\" alt=\"\" class=\"wp-image-2191\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-51.png 940w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-51-300x247.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-51-768x632.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-51-350x288.png 350w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/a><figcaption>Publish Menu Item<\/figcaption><\/figure><\/div>\n\n\n\n<p>From the list of options, select the &#8220;Import Profile&#8221; option and press the Next button;<\/p>\n\n\n\n<p>On the next page, browse and locate the Publish profile you downloaded earlier and hit the &#8220;<strong><em>Finish<\/em><\/strong>&#8221; Button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-52.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"718\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-52-1024x718.png\" alt=\"\" class=\"wp-image-2192\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-52-1024x718.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-52-300x210.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-52-768x539.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-52-350x246.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-52.png 1206w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Browse for Publish Profile<\/figcaption><\/figure><\/div>\n\n\n\n<p>You&#8217;ll now have a summary of the Publish Plan, check everything is ok and hit the &#8220;<strong><em>Publish<\/em><\/strong>&#8221; Button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-53.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-53-1024x638.png\" alt=\"\" class=\"wp-image-2193\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-1024x638.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-300x187.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-768x479.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-1536x957.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-1600x997.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53-350x218.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-53.png 1662w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Publish Plan<\/figcaption><\/figure><\/div>\n\n\n\n<p>The publish process may take a few minutes to complete;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-54.png\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"476\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-54.png\" alt=\"\" class=\"wp-image-2194\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-54.png 916w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-54-300x156.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-54-768x399.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-54-350x182.png 350w\" sizes=\"(max-width: 916px) 100vw, 916px\" \/><\/a><figcaption>Publishing from Visual Studio<\/figcaption><\/figure><\/div>\n\n\n\n<p>Once the process is complete, a browser window should open with your working Hosted Blazor App!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-55.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1007\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-55-1024x1007.png\" alt=\"\" class=\"wp-image-2195\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-55-1024x1007.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-55-300x295.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-55-768x755.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-55-350x344.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-55.png 1459w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor App in Web App<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-github-action\">6: Create a GitHub Action<\/h2>\n\n\n\n<p>Now that we&#8217;ve confirmed that our infrastructure is all up and running, we can move on to automating deployments to the web app when code is checked in to the GitHub repository.<\/p>\n\n\n\n<p>Head back to <a rel=\"noreferrer noopener\" aria-label=\"portal.azure.com (opens in a new tab)\" href=\"http:\/\/portal.azure.com\" target=\"_blank\">portal.azure.com<\/a> and your Web App. Click the &#8220;<strong><em>Deployment Centre<\/em><\/strong>&#8221; menu item on the left;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-56.png\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"594\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-56.png\" alt=\"\" class=\"wp-image-2202\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-56.png 433w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-56-219x300.png 219w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-56-350x480.png 350w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/a><figcaption>Deployment Centre Menu Item<\/figcaption><\/figure><\/div>\n\n\n\n<p>You&#8217;ll see there are quite  few different options for deploying to Azure Web Apps, split into CI\/CD Pipelines with &#8220;<strong><em>Azure DevOps<\/em><\/strong>&#8221; or &#8220;<strong><em>Git<\/em><\/strong>&#8221; and Manual Deployments with &#8220;<strong><em>OneDrive<\/em><\/strong>&#8221; and &#8220;<strong><em>FTP<\/em><\/strong>&#8220;.<\/p>\n\n\n\n<p>Select the GitHub option and hit the blue &#8220;<strong><em>Continue<\/em><\/strong>&#8221; button. You may of course need to sign in to GitHub here.;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-57.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"639\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-57-1024x639.png\" alt=\"\" class=\"wp-image-2203\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-57-1024x639.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-57-300x187.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-57-768x479.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-57-350x218.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-57.png 1320w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Deployment Centre Git Option<\/figcaption><\/figure><\/div>\n\n\n\n<p>Next we can choose between the &#8220;<strong><em>App Service Build Service<\/em><\/strong>&#8220;, &#8220;<strong><em>GitHub Actions<\/em><\/strong>&#8221; or &#8220;<strong><em>Azure Pipelines<\/em><\/strong>&#8220;. Select &#8220;<strong><em>GitHub Actions<\/em><\/strong>&#8221; and press the blue &#8220;<strong><em>Continue<\/em><\/strong>&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-58.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-58-1024x360.png\" alt=\"\" class=\"wp-image-2205\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-58-1024x360.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-58-300x105.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-58-768x270.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-58-350x123.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-58.png 1122w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Actions Option<\/figcaption><\/figure><\/div>\n\n\n\n<p>On the next screen, select your GitHub Organisation and the project you created in Step 1 and press the blue &#8220;<strong><em>Continue<\/em><\/strong>&#8221; button;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-59.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"630\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-59-1024x630.png\" alt=\"\" class=\"wp-image-2207\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-1024x630.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-300x185.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-768x472.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-1536x945.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-1600x984.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59-350x215.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-59.png 1663w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Options<\/figcaption><\/figure><\/div>\n\n\n\n<p>On the final screen you&#8217;ll see the generated YAML file for the GitHub action at the bottom of the page;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-60.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"925\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-60-1024x925.png\" alt=\"\" class=\"wp-image-2209\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-60-1024x925.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-60-300x271.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-60-768x694.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-60-350x316.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-60.png 1105w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Action YAML<\/figcaption><\/figure><\/div>\n\n\n\n<p>Go ahead and press the blue &#8220;Finish&#8221; button. You&#8217;ll notice that the screen says &#8220;No Deployment Data Available&#8221;, which is because we haven&#8217;t actually checked any code in yet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-in-code\">7: Check in Code and watch the GitHub action working<\/h2>\n\n\n\n<p>Switch back to Visual Studio, and if it&#8217;s not already visible, then open the &#8220;<strong><em>View<\/em><\/strong>&#8221; menu and show the GitHub Window by selecting the &#8220;<strong><em>Git Window<\/em><\/strong>&#8221; Menu Item;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-61.png\"><img loading=\"lazy\" decoding=\"async\" width=\"961\" height=\"729\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-61.png\" alt=\"\" class=\"wp-image-2211\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-61.png 961w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-61-300x228.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-61-768x583.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-61-350x266.png 350w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Before we can commit and push our code, we need to pull in the change that creating the GitHub Action has made to the repository.<\/p>\n\n\n\n<p>Click the &#8220;Pull&#8221; button in the top right of the Git window;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-64.png\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"120\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-64.png\" alt=\"\" class=\"wp-image-2214\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-64.png 409w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-64-300x88.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-64-350x103.png 350w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/a><figcaption>Git Pull<\/figcaption><\/figure><\/div>\n\n\n\n<p>We can now check our code in and push it up to the remote repository. Check through the files we&#8217;re going to check in and enter a Commit Message. Clicking the small down arrow next to the &#8220;<strong><em>Commit All<\/em><\/strong>&#8221; button will show a fly out where you can choose &#8220;Commit All and Push&#8221;;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-62.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"869\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-62-1024x869.png\" alt=\"\" class=\"wp-image-2212\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-62-1024x869.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-62-300x255.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-62-768x652.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-62-350x297.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-62.png 1116w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Git Commit and Push Code<\/figcaption><\/figure><\/div>\n\n\n\n<p>Once the code has been checked in it will kick off the GitHub Action. Return to your GitHub repository. Click the &#8220;Actions&#8221; item along the top to show the Actions page;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-66.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-66-1024x466.png\" alt=\"\" class=\"wp-image-2217\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-1024x466.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-300x137.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-768x350.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-1536x700.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-1600x729.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66-350x159.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-66.png 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>GitHub Actions Page<\/figcaption><\/figure><\/div>\n\n\n\n<p>You&#8217;ll see the first action which failed as there weren&#8217;t any source files for the Action to build when it was first created.<\/p>\n\n\n\n<p>Above that, you&#8217;ll see an in progress action. Clicking that will take you to the detail of the currently progressing action;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-67.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"772\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-67-1024x772.png\" alt=\"\" class=\"wp-image-2218\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-1024x772.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-300x226.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-768x579.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-1536x1157.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-1600x1206.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67-350x264.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-67.png 1797w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>In Progress Action Detail<\/figcaption><\/figure><\/div>\n\n\n\n<p>We can monitor the progress of the action by clicking the &#8220;<strong><em>Build and Deploy<\/em><\/strong>&#8221; item on the left;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-68.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"749\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-68-1024x749.png\" alt=\"\" class=\"wp-image-2219\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-1024x749.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-300x219.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-768x562.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-1536x1124.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-1600x1171.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68-350x256.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-68.png 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Build and Deploy Progress<\/figcaption><\/figure><\/div>\n\n\n\n<p>Depending on how your formatted your solution, you may have an error at the &#8220;Build with dotnet&#8221; step saying &#8221; MSBUILD : error MSB1003: Specify a project or solution file. The current working directory does not contain a project or solution file.&#8221;;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-69.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"363\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-69-1024x363.png\" alt=\"\" class=\"wp-image-2220\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-1024x363.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-300x106.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-768x272.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-1536x545.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-2048x726.png 2048w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-1600x567.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-69-350x124.png 350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Build with dotnet Error<\/figcaption><\/figure><\/div>\n\n\n\n<p>This is because the YAML file is expecting the solution file to be within the root of the repository.<\/p>\n\n\n\n<p>We can make a quick modification to the YAML file to fix this issue.<\/p>\n\n\n\n<p>Back in Visual Studio, include the file in the project by right clicking on the solution and going to Add &gt; &#8220;<strong><em>Existing Item<\/em><\/strong>&#8220;;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-70.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"763\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-70-1024x763.png\" alt=\"\" class=\"wp-image-2221\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70-1024x763.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70-300x224.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70-768x572.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70-1536x1144.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70-350x261.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-70.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Add YAMl File to Project<\/figcaption><\/figure><\/div>\n\n\n\n<p>If you navigate to the root of the Solution Directory, there will be a &#8220;.github&#8221; folder. Within there is a &#8220;Workflows&#8221; folder, and within that folder you&#8217;ll find the &#8220;<strong><em>master_hostedblazorapp.yml<\/em><\/strong>&#8221; GitHib Action YAML File;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"772\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-71-1024x772.png\" alt=\"\" class=\"wp-image-2222\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-71-1024x772.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-71-300x226.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-71-768x579.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-71-350x264.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-71.png 1180w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you&#8217;ve added that file to your project, go ahead and open it.<\/p>\n\n\n\n<p>After the Build and Publish commands, add the name of the directory where your solution is contained followed by a forward slash &#8220;\/&#8221;;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-73.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-73.png\" alt=\"\" class=\"wp-image-2226\" width=\"610\" height=\"461\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-73.png 721w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-73-300x227.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-73-350x265.png 350w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/a><figcaption>Modified YAML File<\/figcaption><\/figure><\/div>\n\n\n\n<p>Save the file and return to the Git window. Enter a new commit message and do a &#8220;Commit All and Push&#8221; again. <\/p>\n\n\n\n<p>If you return to the GitHub actions page and drill down in to the new Action in Progress, you should now see that it passes successfully;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-74.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"619\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-74-1024x619.png\" alt=\"\" class=\"wp-image-2227\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-74-1024x619.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-74-300x181.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-74-768x464.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-74-350x212.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-74.png 1525w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Successful Build and Deploy<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fix-web-config\">8: Fix an issue with the web.config file<\/h2>\n\n\n\n<p>Switching back to your website now, and hitting the refresh will show up an issue with the current GitHub Action YAML for ASP.NET Core Hosted Blazor Web Apps; <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-75.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-75.png\" alt=\"\" class=\"wp-image-2228\" width=\"610\" height=\"340\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-75.png 812w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-75-300x167.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-75-768x428.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-75-350x195.png 350w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/a><figcaption>Web App Broken<\/figcaption><\/figure><\/div>\n\n\n\n<p>This took me and then the awesome <a rel=\"noreferrer noopener\" aria-label=\"Gregor Suttie (opens in a new tab)\" href=\"https:\/\/twitter.com\/gregor_suttie\" target=\"_blank\">Gregor Suttie<\/a> (Thanks a heap Gregor!) a good long time to pin down, and is because the current GitHub Action YAML generates an incorrect web.config for the project. The generated web.config contains a heap of ignore statements and redirects which bork a Hosted Blazor App.<\/p>\n\n\n\n<p>We can overcome this issue by supplying our own web.config in the Server Project through..<\/p>\n\n\n\n<p>Switch back to Visual Studio and right click on the Server Project in Solution Explorer.<\/p>\n\n\n\n<p>Go to Add &gt; New Item. From the dialog, choose &#8220;<strong><em>Web Configuration File<\/em><\/strong>&#8221; and press the &#8220;<strong><span style=\"text-decoration: underline;\"><em>Add<\/em><\/span><\/strong>&#8221; button.<\/p>\n\n\n\n<p>Replace the contents of the file with the following;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\n&lt;configuration>\n  &lt;location path=\".\" inheritInChildApplications=\"false\">\n    &lt;system.webServer>\n      &lt;handlers>\n        &lt;add name=\"aspNetCore\" path=\"*\" verb=\"*\" modules=\"AspNetCoreModuleV2\" resourceType=\"Unspecified\" \/>\n      &lt;\/handlers>\n      &lt;aspNetCore processPath=\"%LAUNCHER_PATH%\" stdoutLogEnabled=\"false\" stdoutLogFile=\"\\\\?\\%home%\\LogFiles\\stdout\" hostingModel=\"inprocess\">\n        &lt;environmentVariables>\n          &lt;environmentVariable name=\"ASPNETCORE_HTTPS_PORT\" value=\"44342\" \/>\n          &lt;environmentVariable name=\"COMPLUS_ForceENC\" value=\"1\" \/>\n          &lt;environmentVariable name=\"ASPNETCORE_ENVIRONMENT\" value=\"Development\" \/>\n        &lt;\/environmentVariables>\n      &lt;\/aspNetCore>\n    &lt;\/system.webServer>\n  &lt;\/location>\n&lt;\/configuration><\/code><\/pre>\n\n\n\n<p>Save the file and one last time, Commit and push your changes.<\/p>\n\n\n\n<p>Once the GitHub action has completed, you can refresh the Web App page, and all being well, you should now have a fully working app again;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-76.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1007\" src=\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\/wp-content\/uploads\/2020\/05\/image-76-1024x1007.png\" alt=\"\" class=\"wp-image-2230\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-76-1024x1007.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-76-300x295.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-76-768x755.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-76-350x344.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/image-76.png 1459w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>ASP.NET Hosted Blazor App Deployed<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this post you learnt how to Create a GitHub Repo, an Azure App Service Plan and a Web App. We then created an ASP.NET Core Hosted Blazor Web App and published that to our Web App.<\/p>\n\n\n\n<p>Finally, we created a GitHub action and rectified an issue with the web.config which temporarily borked our project.<\/p>\n\n\n\n<p>I hope this has helped you to get started with Hosted Blazor Web Apps and Azure Web Apps&#8230;<\/p>\n\n\n\n<p>Cheers and good luck!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blazor is the buzzword in SPA frameworks in 2020. Microsoft are all in behind it, and for good reason. Born&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2157,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[18,15,17,16],"acf":[],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes<\/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:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes\" \/>\n<meta property=\"og:description\" content=\"Blazor is the buzzword in SPA frameworks in 2020. Microsoft are all in behind it, and for good reason. Born&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Pete Codes\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-17T22:17:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-17T22:45:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"PeteCodes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"PeteCodes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\"},\"author\":{\"name\":\"PeteCodes\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7\"},\"headline\":\"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps\",\"datePublished\":\"2020-05-17T22:17:57+00:00\",\"dateModified\":\"2020-05-17T22:45:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\"},\"wordCount\":2405,\"publisher\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png\",\"keywords\":[\"App Service\",\"Azure\",\"Blazor\",\"DevOps\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\",\"url\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\",\"name\":\"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes\",\"isPartOf\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png\",\"datePublished\":\"2020-05-17T22:17:57+00:00\",\"dateModified\":\"2020-05-17T22:45:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage\",\"url\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png\",\"contentUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.petecodes.co.uk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#website\",\"url\":\"https:\/\/www.petecodes.co.uk\/\",\"name\":\"Pete Codes\",\"description\":\"Pete Gallagher - Developer and Public Speaker\",\"publisher\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.petecodes.co.uk\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#organization\",\"name\":\"Pete Codes\",\"url\":\"https:\/\/www.petecodes.co.uk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/06\/Logo-Small-Optimised.png\",\"contentUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/06\/Logo-Small-Optimised.png\",\"width\":189,\"height\":100,\"caption\":\"Pete Codes\"},\"image\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7\",\"name\":\"PeteCodes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/969dc1e441e755dd7d1f90da569dc913?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/969dc1e441e755dd7d1f90da569dc913?s=96&d=mm&r=g\",\"caption\":\"PeteCodes\"},\"sameAs\":[\"https:\/\/wordpress-634681-2064240.cloudwaysapps.com\"],\"url\":\"https:\/\/www.petecodes.co.uk\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes","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:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes","og_description":"Blazor is the buzzword in SPA frameworks in 2020. Microsoft are all in behind it, and for good reason. Born&hellip;","og_url":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/","og_site_name":"Pete Codes","article_published_time":"2020-05-17T22:17:57+00:00","article_modified_time":"2020-05-17T22:45:07+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png","type":"image\/png"}],"author":"PeteCodes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"PeteCodes","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#article","isPartOf":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/"},"author":{"name":"PeteCodes","@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7"},"headline":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps","datePublished":"2020-05-17T22:17:57+00:00","dateModified":"2020-05-17T22:45:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/"},"wordCount":2405,"publisher":{"@id":"https:\/\/www.petecodes.co.uk\/#organization"},"image":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png","keywords":["App Service","Azure","Blazor","DevOps"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/","url":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/","name":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps - Pete Codes","isPartOf":{"@id":"https:\/\/www.petecodes.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png","datePublished":"2020-05-17T22:17:57+00:00","dateModified":"2020-05-17T22:45:07+00:00","breadcrumb":{"@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#primaryimage","url":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png","contentUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/05\/Blazor-Web-Apps-Blog-Featured-Image.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.petecodes.co.uk\/hosting-blazor-webassembly-hosted-apps-in-azure-app-service-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.petecodes.co.uk\/"},{"@type":"ListItem","position":2,"name":"Hosting Blazor WebAssembly Hosted Apps in Azure App Service Web Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.petecodes.co.uk\/#website","url":"https:\/\/www.petecodes.co.uk\/","name":"Pete Codes","description":"Pete Gallagher - Developer and Public Speaker","publisher":{"@id":"https:\/\/www.petecodes.co.uk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.petecodes.co.uk\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.petecodes.co.uk\/#organization","name":"Pete Codes","url":"https:\/\/www.petecodes.co.uk\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/logo\/image\/","url":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/06\/Logo-Small-Optimised.png","contentUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2020\/06\/Logo-Small-Optimised.png","width":189,"height":100,"caption":"Pete Codes"},"image":{"@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7","name":"PeteCodes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/969dc1e441e755dd7d1f90da569dc913?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/969dc1e441e755dd7d1f90da569dc913?s=96&d=mm&r=g","caption":"PeteCodes"},"sameAs":["https:\/\/wordpress-634681-2064240.cloudwaysapps.com"],"url":"https:\/\/www.petecodes.co.uk\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/posts\/2145"}],"collection":[{"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/comments?post=2145"}],"version-history":[{"count":0,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/posts\/2145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/media\/2157"}],"wp:attachment":[{"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/media?parent=2145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/categories?post=2145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/tags?post=2145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}