Entertainment at it's peak. The news is by your side.

Azure Static Web Apps with .NET and Blazor



Azure Static Web Apps is a provider that robotically builds and deploys full stack web apps from a GitHub repository. Azure Static Web Apps embody a static web frontend, and an Azure Functions based entirely mostly backend. Must you invent a Static Web Apps resource, Azure sets up a GitHub Actions workflow in the app’s supply code repository that monitors a division of your different. Every time you push commits to the watched division, the GitHub Action robotically builds and deploys your app and its API.

As of on the present time, Azure Static Web Apps now has top quality beef up for Blazor WebAssembly and .NET Functions in preview, available in all supported regions. This used to be indubitably one of the pinnacle user requests since Static Web Apps used to be presented at Make. You need to maybe maybe presumably fabricate and deploy a frontend and a serverless API written fully in .NET.

Let’s give it a try!

Getting Began

To back you fetch started, we’ve created a GitHub repository template, which you’d exhaust as a starting up point to your have initiatives.

In GitHub, click on on the Utilize this template button to invent a brand fresh GitHub repository the exhaust of the template, offering it a title of your deciding on (we’ll exhaust my-blazor-app here) and click on on Procure repository from template.

There are three folders in the template:

  • Consumer: The Blazor WebAssembly pattern utility
  • API: A C# Azure Functions API, which the Blazor utility will call
  • Shared: A C# class library with a shared recordsdata model between the Blazor and Functions utility

To shuffle the app locally, originate up both the API and Consumer initiatives. The “Obtain recordsdata” page in the Blazor app requests weather forecast recordsdata make the backend Feature API and show it on the page.

To shuffle the app from the expose-line, you’ll must set up the Azure Functions Core Instruments to your platform of different.

Deploying to Static Web Apps

To deploy this app as an Azure Static Web App, log into your Azure account (join a free one here) and ogle Static Web Apps.

Static Web Apps in the portal

Click on Procure, present a Subscription, Resource Community and title for the utility.

Next, signal into GitHub and detect your GitHub repo (my-blazor-app) and pick out the division you pick to deploy.

Finally, pick out Blazor from the Make Presets, which will populate the App space, API space and App artifact space with Consumer, API and wwwroot. The predominant and 2d values are the run inside of the Git repository to where the venture recordsdata for the Blazor and Functions app resides, so as soon as you occur to’ve modified the structure of the Git repository, invent definite these values are as a lot as this point to copy. The third value is the output path that Blazor will bring collectively into and doesn’t need updating.

Azure Static Web App wizard

Total the wizard and Static Web Apps will invent the GitHub Actions workflow file for you and deploy your utility to Azure.

gif of Action completing and then going to the portal to open the deployed app


We started by forking a GitHub repository (however it’s good to well’ve also frail a venture created in Visible Studio/Visible Studio Code/etc.), created a Static Web App in Azure, and it setup a GitHub Actions workflow for us, robotically constructing and deploying our Blazor and Functions utility. We’ve now bought a statically hosted utility with a serverless backend, able to scale for our requires.

Extra Sources

To study more about Blazor WebAssembly and .NET Functions on Static Web Apps, test out the quickstart docs, the Microsoft Be taught module, as successfully as the excellent Static Web Apps docs.

Give Feedback

We’re angry to occupy Blazor WebAssembly and .NET Functions supported by Azure Static Web Apps, and can’t wait to hunt what you create with them. Enable us to understand what you watched by filing an wretchedness on GitHub.

Read More

Leave A Reply

Your email address will not be published.