{"id":24135,"date":"2020-09-22T09:00:45","date_gmt":"2020-09-22T16:00:45","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/aspnet\/?p=24135"},"modified":"2020-09-22T09:00:45","modified_gmt":"2020-09-22T16:00:45","slug":"azure-static-web-apps-with-blazor","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/azure-static-web-apps-with-blazor\/","title":{"rendered":"Azure Static Web Apps with .NET and Blazor"},"content":{"rendered":"<p><a href=\"https:\/\/aka.ms\/blazor-swa\/docs\">Azure Static Web Apps<\/a> is a service that automatically builds and deploys full stack web apps from a GitHub repository. Azure Static Web Apps consist of a static web frontend, and an Azure Functions based backend. When you create a Static Web Apps resource, Azure sets up a GitHub Actions workflow in the app&#8217;s source code repository that monitors a branch of your choice. Every time you push commits to the watched branch, the GitHub Action automatically builds and deploys your app and its API.<\/p>\n<p>As of today, <a href=\"https:\/\/aka.ms\/azure-ignite-releases\">Azure Static Web Apps now has first-class support for Blazor WebAssembly and .NET Functions<\/a> in preview, available in all supported regions. This was one of the top user requests since Static Web Apps was announced at Build. You can develop and deploy a frontend and a serverless API written entirely in .NET.<\/p>\n<p>Let&#8217;s give it a try!<\/p>\n<h2>Getting Started<\/h2>\n<p>To help you get started, we&#8217;ve created a <a href=\"https:\/\/aka.ms\/blazor-swa\/template\">GitHub repository template<\/a>, which you can use as a starting point for your own projects.<\/p>\n<p>In GitHub, click on the <strong>Use this template<\/strong> button to create a new GitHub repository using the template, providing it a name of your choosing (we&#8217;ll use <em>my-blazor-app<\/em> here) and click <strong>Create repository from template<\/strong>.<\/p>\n<p>There are three folders in the template:<\/p>\n<ul>\n<li><strong>Client:<\/strong> The Blazor WebAssembly sample application<\/li>\n<li><strong>API:<\/strong> A C# Azure Functions API, which the Blazor application will call<\/li>\n<li><strong>Shared:<\/strong> A C# class library with a shared data model between the Blazor and Functions application<\/li>\n<\/ul>\n<p>To run the app locally, start both the API and Client projects. The &#8220;Fetch data&#8221; page in the Blazor app requests weather forecast data form the backend Function API and display it on the page.<\/p>\n<p>To run the app from the command-line, you&#8217;ll need to install the <a href=\"https:\/\/docs.microsoft.com\/azure\/azure-functions\/functions-run-local\">Azure Functions Core Tools<\/a> for your platform of choice.<\/p>\n<h2>Deploying to Static Web Apps<\/h2>\n<p>To deploy this app as an Azure Static Web App, log into your Azure account (sign up for a <a href=\"https:\/\/aka.ms\/blazor-swa\/signup\">free one here<\/a>) and search for <em>Static Web Apps<\/em>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2020\/09\/swa-landing-screen.png\" alt=\"Static Web Apps in the portal\" \/><\/p>\n<p>Click <strong>Create<\/strong>, provide a <em>Subscription<\/em>, <em>Resource Group<\/em> and name for the application.<\/p>\n<p>Next, sign into GitHub and locate your GitHub repo (<em>my-blazor-app<\/em>) and select the branch you wish to deploy.<\/p>\n<p>Finally, select <strong>Blazor<\/strong> from the <em>Build Presets<\/em>, which will populate the <em>App location<\/em>, <em>API location<\/em> and <em>App artifact location<\/em> with <strong>Client<\/strong>, <strong>API<\/strong> and <strong>wwwroot<\/strong>. The first and second values are the path within the Git repository to where the project files for the Blazor and Functions app resides, so if you&#8217;ve modified the structure of the Git repository, make sure these values are updated to reflect. The third value is the output path that Blazor will compile into and doesn&#8217;t need updating.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2020\/09\/complete-blazor-info.png\" alt=\"Azure Static Web App wizard\" \/><\/p>\n<p>Complete the wizard and Static Web Apps will create the GitHub Actions workflow file for you and deploy your application to Azure.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2020\/09\/blazor-swa-in-action.gif\" alt=\"gif of Action completing and then going to the portal to open the deployed app\" \/><\/p>\n<h2>Summary<\/h2>\n<p>We started by forking a GitHub repository (but you could&#8217;ve also used a project created in Visual Studio\/Visual Studio Code\/etc.), created a Static Web App in Azure, and it setup a GitHub Actions workflow for us, automatically building and deploying our Blazor and Functions application. We&#8217;ve now got a statically hosted application with a serverless backend, ready to scale for our demands.<\/p>\n<h2>Additional Resources<\/h2>\n<p>To learn more about Blazor WebAssembly and .NET Functions on Static Web Apps, check out the <a href=\"https:\/\/aka.ms\/blazor-swa\/quickstart\">quickstart docs<\/a>, the <a href=\"https:\/\/aka.ms\/blazor-swa\/learn\">Microsoft Learn module<\/a>, as well as the comprehensive <a href=\"https:\/\/aka.ms\/blazor-swa\/docs\">Static Web Apps docs<\/a>.<\/p>\n<h2>Give Feedback<\/h2>\n<p>We&#8217;re excited to have Blazor WebAssembly and .NET Functions supported by Azure Static Web Apps, and can&#8217;t wait to see what you build with them. Let us know what you think by filing an issue on <a href=\"https:\/\/aka.ms\/blazor-swa\/issues\">GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Azure Static Web Apps now has first-class support for Blazor WebAssembly and .NET Functions in preview, available in all supported regions. Check out how you can develop and deploy a frontend and a serverless API written entirely in .NET.<\/p>\n","protected":false},"author":40333,"featured_media":21385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,7509,327,7251],"tags":[],"class_list":["post-24135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","category-aspnetcore","category-azure","category-blazor"],"acf":[],"blog_post_summary":"<p>Azure Static Web Apps now has first-class support for Blazor WebAssembly and .NET Functions in preview, available in all supported regions. Check out how you can develop and deploy a frontend and a serverless API written entirely in .NET.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/24135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/40333"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=24135"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/24135\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/21385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=24135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=24135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=24135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}