09-23-2020, 04:22 PM
Azure Static Web Apps with .NET and Blazor
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.png" width="120" height="120" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.png" width="58" height="58" alt="aapowell" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Aaron</p>
</div>
</div>
</div>
<div class="entry-meta entry-meta-layout">
<p>September 22nd, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<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’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>
<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>
<p>Let’s give it a try!</p>
<h2 id="getting-started">Getting Started</h2>
<p>To help you get started, we’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>
<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’ll use <em>my-blazor-app</em> here) and click <strong>Create repository from template</strong>.</p>
<p>There are three folders in the template:</p>
<ul>
<li><strong>Client:</strong> The Blazor WebAssembly sample application</li>
<li><strong>API:</strong> A C# Azure Functions API, which the Blazor application will call</li>
<li><strong>Shared:</strong> A C# class library with a shared data model between the Blazor and Functions application</li>
</ul>
<p>To run the app locally, start both the API and Client projects. The “Fetch data” page in the Blazor app requests weather forecast data form the backend Function API and display it on the page.</p>
<p>To run the app from the command-line, you’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>
<h2 id="deploying-to-static-web-apps">Deploying to Static Web Apps</h2>
<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>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor-1.png" alt="Static Web Apps in the portal"></p>
<p>Click <strong>Create</strong>, provide a <em>Subscription</em>, <em>Resource Group</em> and name for the application.</p>
<p>Next, sign into GitHub and locate your GitHub repo (<em>my-blazor-app</em>) and select the branch you wish to deploy.</p>
<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’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’t need updating.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor-2.png" alt="Azure Static Web App wizard"></p>
<p>Complete the wizard and Static Web Apps will create the GitHub Actions workflow file for you and deploy your application to Azure.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.gif" alt="gif of Action completing and then going to the portal to open the deployed app"></p>
<h2 id="summary">Summary</h2>
<p>We started by forking a GitHub repository (but you could’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’ve now got a statically hosted application with a serverless backend, ready to scale for our demands.</p>
<h2 id="additional-resources">Additional Resources</h2>
<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>
<h2 id="give-feedback">Give Feedback</h2>
<p>We’re excited to have Blazor WebAssembly and .NET Functions supported by Azure Static Web Apps, and can’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>
</div>
https://www.sickgaming.net/blog/2020/09/...nd-blazor/
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.png" width="120" height="120" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img loading="lazy" src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.png" width="58" height="58" alt="aapowell" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Aaron</p>
</div>
</div>
</div>
<div class="entry-meta entry-meta-layout">
<p>September 22nd, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<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’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>
<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>
<p>Let’s give it a try!</p>
<h2 id="getting-started">Getting Started</h2>
<p>To help you get started, we’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>
<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’ll use <em>my-blazor-app</em> here) and click <strong>Create repository from template</strong>.</p>
<p>There are three folders in the template:</p>
<ul>
<li><strong>Client:</strong> The Blazor WebAssembly sample application</li>
<li><strong>API:</strong> A C# Azure Functions API, which the Blazor application will call</li>
<li><strong>Shared:</strong> A C# class library with a shared data model between the Blazor and Functions application</li>
</ul>
<p>To run the app locally, start both the API and Client projects. The “Fetch data” page in the Blazor app requests weather forecast data form the backend Function API and display it on the page.</p>
<p>To run the app from the command-line, you’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>
<h2 id="deploying-to-static-web-apps">Deploying to Static Web Apps</h2>
<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>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor-1.png" alt="Static Web Apps in the portal"></p>
<p>Click <strong>Create</strong>, provide a <em>Subscription</em>, <em>Resource Group</em> and name for the application.</p>
<p>Next, sign into GitHub and locate your GitHub repo (<em>my-blazor-app</em>) and select the branch you wish to deploy.</p>
<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’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’t need updating.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor-2.png" alt="Azure Static Web App wizard"></p>
<p>Complete the wizard and Static Web Apps will create the GitHub Actions workflow file for you and deploy your application to Azure.</p>
<p><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/09/azure-static-web-apps-with-net-and-blazor.gif" alt="gif of Action completing and then going to the portal to open the deployed app"></p>
<h2 id="summary">Summary</h2>
<p>We started by forking a GitHub repository (but you could’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’ve now got a statically hosted application with a serverless backend, ready to scale for our demands.</p>
<h2 id="additional-resources">Additional Resources</h2>
<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>
<h2 id="give-feedback">Give Feedback</h2>
<p>We’re excited to have Blazor WebAssembly and .NET Functions supported by Azure Static Web Apps, and can’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>
</div>
https://www.sickgaming.net/blog/2020/09/...nd-blazor/