{"id":3400,"date":"2021-08-31T16:56:20","date_gmt":"2021-08-31T16:56:20","guid":{"rendered":"https:\/\/www.petecodes.co.uk\/?p=3400"},"modified":"2021-08-31T17:24:10","modified_gmt":"2021-08-31T17:24:10","slug":"deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app","status":"publish","type":"post","link":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/","title":{"rendered":"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy &#8211; Part 4 &#8211; Create and Package a Blazor WebAssembly App"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What we did last time<\/h2>\n\n\n\n<p>In this series of posts we&#8217;re running through how to get <a href=\"https:\/\/octopus.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Octopus Deploy<\/a> setup, along with the required Azure Services, in order to deploy an ASP.NET Blazor app to Dev, Staging and Production environments.<\/p>\n\n\n\n<p>In the previous post we created our Azure Web Apps for Development, Staging and Production.<\/p>\n\n\n\n<p>We then went on to complete our Development Deployment Target as well as create Staging and Production Deployment Targets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What we&#8217;re doing this time<\/h2>\n\n\n\n<p>In this post we&#8217;ll create our Blazor WebAssembly Web App and Package it up ready to upload to Octopus Deploy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contents<\/h2>\n\n\n\n<p class=\"has-background\" style=\"background-color:#f2ecb8\"><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-1-environments-and-deployment-targets\/\">Part 1 &#8211; Environments and Deployment Targets<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-2-linking-azure\/\">Part 2 &#8211; Linking Azure<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-3-create-azure-web-apps-staging-and-production-deployment-targets\/\">Part 3 &#8211; Create Azure Web Apps + Staging and Production Deployment Targets<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\">Part 4 &#8211; Create and Package a Blazor WebAssembly App<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-5-octopus-deploy-projects-variables-and-processes\/\">Part 5 &#8211; Octopus Deploy Projects, Variables and Processes<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-6-create-a-release\/\">Part 6 &#8211; Create a Release<\/a><br><a href=\"https:\/\/www.petecodes.co.uk\/__trashed\/\">Part 7 &#8211; Send a Notification to Microsoft Teams<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Once again, for this tutorial you&#8217;ll need the following;<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/azure.microsoft.com\/en-gb\/free\/\" target=\"_blank\" rel=\"noreferrer noopener\">An Azure Subscription<\/a><\/li><li>Either a <a href=\"https:\/\/octopus.com\/start\" target=\"_blank\" rel=\"noreferrer noopener\">Cloud Hosted Octopus Deploy Environment<\/a> or&#8230;<\/li><li>&#8230; If you&#8217;re self hosting Octopus Deploy, a local <a href=\"https:\/\/www.microsoft.com\/en-gb\/sql-server\/sql-server-downloads\" target=\"_blank\" rel=\"noreferrer noopener\">SQL Server instance<\/a>.<\/li><li><a href=\"https:\/\/dotnet.microsoft.com\/download\/dotnet\/5.0\" target=\"_blank\" rel=\"noreferrer noopener\">The .NET 5 SDK<\/a><\/li><li><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code<\/a><\/li><li>For Teams Notifications &#8211; A Teams Environment with Admin access<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Blazor Web Assembly App<\/h2>\n\n\n\n<p>Now that we&#8217;ve got our major Octopus Deploy moving parts set up, we can go ahead and create our Blazor App.<\/p>\n\n\n\n<p>If we head over to the terminal, we can create our new Blazor Web Assembly app with the following command;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>dotnet new blazorwasm -o petecodes<\/code><\/pre><\/div>\n\n\n\n<p>This will create a new Blazor WebAssembly app in the petecodes directory. <\/p>\n\n\n\n<p>If we enter that directory with;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>cd petecodes<\/code><\/pre><\/div>\n\n\n\n<p>We can then run our new application with;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>dotnet run<\/code><\/pre><\/div>\n\n\n\n<p>The app will start running;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-1024x576.png\" alt=\"\" class=\"wp-image-3249\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-59.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor App running in terminal<\/figcaption><\/figure><\/div>\n\n\n\n<p>If your browser doesn&#8217;t open automatically, you can open it and go to;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;localhost:5001<\/code><\/pre>\n\n\n\n<p>You&#8217;ll then be able to see the vanilla Blazor Web Assembly app;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60.png\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-1024x576.png\" alt=\"\" class=\"wp-image-3250\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-60.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Vanilla Blazor Web Assembly Application<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Variables to the Blazor Application<\/h2>\n\n\n\n<p>One of the most powerful features of Octopus Deploy is it&#8217;s ability to replace variables in files depending upon certain parameters such as the Environment and so on.<\/p>\n\n\n\n<p>We&#8217;ll come back to this functionality later on&#8230; But for now, to make use of this functionality in our Blazor Application, we can add an &#8220;appsettings.json&#8221; file to our project.<\/p>\n\n\n\n<p>If we return to the terminal and use <em><strong>ctrl+c<\/strong><\/em> to stop the application, we can then open the solution using Visual Studio Code by using the following command;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>code .<\/code><\/pre><\/div>\n\n\n\n<p>The application will then open in VS Code;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68.png\"><img decoding=\"async\" width=\"1024\" height=\"545\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-1024x545.png\" alt=\"\" class=\"wp-image-3263\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-1024x545.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-300x160.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-768x408.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-1536x817.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-1600x851.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68-350x186.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-68.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor Application Editing in Visual Studio Code<\/figcaption><\/figure><\/div>\n\n\n\n<p>We can add our new &#8220;appsettings.json&#8221; file to the &#8220;wwwroot&#8221; directory by right clicking on the directory and choosing &#8220;New File&#8221;;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-1024x576.png\" alt=\"\" class=\"wp-image-3265\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-70.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption> Blazor Application Editing in Visual Studio Code &#8211; Add New File<\/figcaption><\/figure>\n\n\n\n<p>We then name the file &#8220;appsettings.json&#8221;, paste the following code into the new file and save it;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-json\" data-file=\"appsettings.json\" data-lang=\"JSON\"><code>{\n    &quot;h1FontSize&quot;: &quot;50px&quot;\n}<\/code><\/pre><\/div>\n\n\n\n<p>We can then make use of this variable by opening up the &#8220;Index.razor&#8221; file within the &#8220;Pages&#8221; directory. We can replace the contents of that file with the following code;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-file=\"Index.razor\" data-lang=\"HTML\"><code>@page &quot;\/&quot;\n@using Microsoft.Extensions.Configuration\n@inject IConfiguration Configuration\n\n&lt;h1 style=&quot;font-size:@Configuration[&quot;h1FontSize&quot;]&quot;&gt;\n    Configuration example\n&lt;\/h1&gt;\n\n&lt;h1&gt;Hello, world!&lt;\/h1&gt;\n\nWelcome to your new app.\n\n&lt;SurveyPrompt Title=&quot;How is Blazor working for you?&quot; \/&gt;<\/code><\/pre><\/div>\n\n\n\n<p>If you like, at this point you can run the application back up again from the terminal with &#8220;dotnet run&#8221; to see the result of the change we&#8217;ve made;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-1024x576.png\" alt=\"\" class=\"wp-image-3268\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-71.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Blazor Application &#8211; Using appsettings.json Variable<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Publishing a Release of the Code<\/h2>\n\n\n\n<p>The next thing we need to do is Publish our app. This involves creating a release package of all of the files needed to run the application using services such as an Azure Web App.<\/p>\n\n\n\n<p>We can do this with the following command;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>dotnet publish --output published-app --configuration Release<\/code><\/pre><\/div>\n\n\n\n<p>This will take a few moments and we should see the results shown on the screen;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-1024x576.png\" alt=\"\" class=\"wp-image-3252\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-61.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Published Blazor App<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Installing the .NET Octo Command Line Tool<\/h2>\n\n\n\n<p>In order to use these files in our Octopus Deploy Environment, we&#8217;ll need to package the files up into a Nuget Package. There are quite a few ways to do this, but the simplest is to install the .NET Octo Command Line Tool.<\/p>\n\n\n\n<p>We can install the tool with the following command;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>dotnet tool install --global Octopus.DotNet.Cli --version 7.4.3366<\/code><\/pre><\/div>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ede3b6\"><strong>Note:<\/strong> I&#8217;ve specified a version here, as the alternative is specifying that we can use Preview Version. <br><br>As time goes on, the version will likely change (you can see it had already changed between creating the demo and writing this blog!).<br><br>You can find the latest version on the <a href=\"https:\/\/www.nuget.org\/packages\/Octopus.DotNet.Cli\/\" target=\"_blank\" rel=\"noreferrer noopener\">Octopus.DotNet.Cli nuget page<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-1024x576.png\" alt=\"\" class=\"wp-image-3254\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-1024x576.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-300x169.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-768x432.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-1536x864.png 1536w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-1600x900.png 1600w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63-350x197.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-63.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Octopus DotNet CLI tool installed<\/figcaption><\/figure>\n\n\n\n<p>With the tool installed, we can now use it to package up our app with the following command;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-bash\" data-lang=\"Bash\"><code>dotnet octo pack --id PeteCodes --version 1.0.0 --basePath published-app<\/code><\/pre><\/div>\n\n\n\n<p>This will create a nuget package with an ID of &#8220;PeteCodes&#8221;, a Version of &#8220;1.0.0&#8221; using the files from the &#8220;published-app&#8221; directory;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"668\" src=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64-1024x668.png\" alt=\"\" class=\"wp-image-3255\" srcset=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64-1024x668.png 1024w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64-300x196.png 300w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64-768x501.png 768w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64-350x228.png 350w, https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/image-64.png 1063w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Packaged Blazor Web Assembly Nuget Package<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next Time&#8230;<\/h2>\n\n\n\n<p>In the <a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-5-octopus-deploy-projects-variables-and-processes\/\">next post<\/a> we&#8217;ll upload our Package to Octopus Deploy, configure a Project and some variables ready to begin creating a Release.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-5-octopus-deploy-projects-variables-and-processes\/\">You can check that post out here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What we did last time In this series of posts we&#8217;re running through how to get Octopus Deploy setup, along&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3432,"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":[15,16,21,32,39,38],"acf":[],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Deploying an ASP.NET Blazor App to Azure using Octopus Deploy - Part 4 - Create and Package a Blazor WebAssembly App - 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\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Part 4 - Create and Package a Blazor WebAssembly App\" \/>\n<meta property=\"og:description\" content=\"In this fourth of 7 posts, we&#039;ll create our Blazor WebAssembly Web App and Package it up ready to upload to Octopus Deploy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Pete Codes\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-31T16:56:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-31T17:24:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.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:title\" content=\"Part 4 - Create and Package a Blazor WebAssembly App\" \/>\n<meta name=\"twitter:description\" content=\"In this fourth of 7 posts, we&#039;ll create our Blazor WebAssembly Web App and Package it up ready to upload to Octopus Deploy.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\"},\"author\":{\"name\":\"PeteCodes\",\"@id\":\"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7\"},\"headline\":\"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy &#8211; Part 4 &#8211; Create and Package a Blazor WebAssembly App\",\"datePublished\":\"2021-08-31T16:56:20+00:00\",\"dateModified\":\"2021-08-31T17:24:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\"},\"wordCount\":823,\"publisher\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png\",\"keywords\":[\"Azure\",\"DevOps\",\"Dot NET 5\",\"Microsoft\",\"Microsoft Teams\",\"Octopus Deploy\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\",\"url\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\",\"name\":\"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy - Part 4 - Create and Package a Blazor WebAssembly App - Pete Codes\",\"isPartOf\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png\",\"datePublished\":\"2021-08-31T16:56:20+00:00\",\"dateModified\":\"2021-08-31T17:24:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage\",\"url\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png\",\"contentUrl\":\"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.petecodes.co.uk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy &#8211; Part 4 &#8211; Create and Package a Blazor WebAssembly App\"}]},{\"@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":"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy - Part 4 - Create and Package a Blazor WebAssembly App - 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\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/","og_locale":"en_US","og_type":"article","og_title":"Part 4 - Create and Package a Blazor WebAssembly App","og_description":"In this fourth of 7 posts, we'll create our Blazor WebAssembly Web App and Package it up ready to upload to Octopus Deploy.","og_url":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/","og_site_name":"Pete Codes","article_published_time":"2021-08-31T16:56:20+00:00","article_modified_time":"2021-08-31T17:24:10+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","type":"image\/png"}],"author":"PeteCodes","twitter_card":"summary_large_image","twitter_title":"Part 4 - Create and Package a Blazor WebAssembly App","twitter_description":"In this fourth of 7 posts, we'll create our Blazor WebAssembly Web App and Package it up ready to upload to Octopus Deploy.","twitter_image":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","twitter_misc":{"Written by":"PeteCodes","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#article","isPartOf":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/"},"author":{"name":"PeteCodes","@id":"https:\/\/www.petecodes.co.uk\/#\/schema\/person\/c2f636f242b064676ae61ed0022b32e7"},"headline":"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy &#8211; Part 4 &#8211; Create and Package a Blazor WebAssembly App","datePublished":"2021-08-31T16:56:20+00:00","dateModified":"2021-08-31T17:24:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/"},"wordCount":823,"publisher":{"@id":"https:\/\/www.petecodes.co.uk\/#organization"},"image":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","keywords":["Azure","DevOps","Dot NET 5","Microsoft","Microsoft Teams","Octopus Deploy"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/","url":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/","name":"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy - Part 4 - Create and Package a Blazor WebAssembly App - Pete Codes","isPartOf":{"@id":"https:\/\/www.petecodes.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage"},"image":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage"},"thumbnailUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","datePublished":"2021-08-31T16:56:20+00:00","dateModified":"2021-08-31T17:24:10+00:00","breadcrumb":{"@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#primaryimage","url":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","contentUrl":"https:\/\/www.petecodes.co.uk\/wp-content\/uploads\/2021\/08\/Part4.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.petecodes.co.uk\/deploying-an-asp-net-blazor-app-to-azure-using-octopus-deploy-part-4-create-and-package-a-blazor-webassembly-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.petecodes.co.uk\/"},{"@type":"ListItem","position":2,"name":"Deploying an ASP.NET Blazor App to Azure using Octopus Deploy &#8211; Part 4 &#8211; Create and Package a Blazor WebAssembly App"}]},{"@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\/3400"}],"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=3400"}],"version-history":[{"count":0,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/posts\/3400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/media\/3432"}],"wp:attachment":[{"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/media?parent=3400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/categories?post=3400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.petecodes.co.uk\/wp-json\/wp\/v2\/tags?post=3400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}