Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository supported by a serverless backend. The following tutorial shows how to deploy C# Blazor WebAssembly app that displays weather data returned by a serverless API.

Prerequisites

• GitHub account
• Azure account. If you don't have an Azure subscription,create a free trial account.

1. Create a repository

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app that you can deploy to Azure Static Web Apps.

1. Make sure you're signed in to GitHub and go to the following location to create a new repository:https://github.com/staticwebdev/blazor-starter/generate
2. Name your repositorymy-first-static-blazor-app.

2. Create a static web app

Now that the repository is created, create a static web app from the Azure portal.

1. Go to theAzure portal.

2. SelectCreate a Resource.

3. Search forStatic Web Apps.

4. SelectStatic Web App.

5. SelectCreate.

6. On theBasics tab, enter the following values.

   Property	Value
   Subscription	Your Azure subscription name.
   Resource group	my-blazor-group
   Name	my-first-static-blazor-app
   Plan type	Free
   Region for Azure Functions API and staging environments	Select a region closest to you.
   Source	GitHub

7. SelectSign in with GitHub and authenticate with GitHub, if you're prompted.

8. Enter the following GitHub values.

   Property	Value
   Organization	Select your desired GitHub organization.
   Repository	Selectmy-first-static-blazor-app.
   Branch	Selectmain.

   Note

   If you don't see any repositories, you may need to authorize Azure Static Web Apps on GitHub. Then browse to your GitHub repository and go toSettings > Applications > Authorized OAuth Apps, selectAzure Static Web Apps, and then selectGrant. For organization repositories, you must be an owner of the organization to grant the permissions.

9. In theBuild Details section, selectBlazor from theBuild Presets drop-down and the following values are populated.

   Property	Value	Description
   App location	Client	Folder containing the Blazor WebAssembly app
   API location	Api	Folder containing the Azure Functions app
   Output location	wwwroot	Folder in the build output containing the published Blazor WebAssembly application

10. SelectReview + Create to verify the details are all correct.

11. SelectCreate to start the creation of the static web app and provision a GitHub Actions for deployment.

12. Once the deployment is completed, selectGo to resource.

13. SelectGo to resource.

3. View the website

There are two aspects to deploying a static app. The first provisions the underlying Azure resources that make up your app. The second is a GitHub Actions workflow that builds and publishes your application.

Before you can go to your new static web app, the deployment build must first finish running.

The Static Web Apps overview window displays a series of links that help you interact with your web app.

1. Select the banner that says,Click here to check the status of your GitHub Actions runs to see the GitHub Actions running against your repository. Once you verify the deployment job is complete, then you can go to your website via the generated URL.

   

2. Once GitHub Actions workflow is complete, you can select theURL link to open the website in new tab.

   

4. Understand the application overview

Together, the following projects make up the parts required to create a Blazor WebAssembly application running in the browser supported by an Azure Functions API backend.

Blazor static web app

Fallback route

The app exposes URLs like/counter and/fetchdata, which map to specific routes of the app. Since this app is implemented as a single page, each route is served theindex.html file. To ensure that requests for any path returnindex.html, afallback route gets implemented in thestaticwebapp.config.json file found in the client project's root folder.

{  "navigationFallback": {    "rewrite": "/index.html"  }}

The JSON configuration ensures that requests to any route in the app return theindex.html page.

Clean up resources

If you're not going to use this application, you can delete the Azure Static Web Apps instance through the following steps:

1. Open theAzure portal.
2. Search formy-blazor-group from the top search bar.
3. Select on the group name.
4. SelectDelete.
5. SelectYes to confirm the delete action.

Next steps

Related articles

• Set up authentication and authorization
• Configure app settings
• Enable monitoring
• Azure CLI