Skip to content

Files

Latest commit

changeworldchangeworld
Fix typo
Mar 26, 2022
acc83ea · Mar 26, 2022

History

History
138 lines (91 loc) · 6.42 KB

deploy-blazor.md

File metadata and controls

138 lines (91 loc) · 6.42 KB
title description services author ms.service ms.topic ms.date ms.author
Tutorial: Building a static web app with Blazor in Azure Static Web Apps
Learn to build an Azure Static Web Apps website with Blazor.
static-web-apps
craigshoemaker
static-web-apps
tutorial
11/08/2021
cshoe

Tutorial: Building a static web app with Blazor in Azure Static Web Apps

Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository. In this tutorial, you deploy a web application to Azure Static Web apps using the Azure portal.

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

Prerequisites

Application overview

Azure Static Web Apps allows you to create static web applications supported by a serverless backend. The following tutorial demonstrates how to deploy C# Blazor WebAssembly application that display weather data returned by a serverless API.

:::image type="content" source="./media/deploy-blazor/blazor-app-complete.png" alt-text="Complete Blazor app":::

The app featured in this tutorial is made up from three different Visual Studio projects:

  • Api: The C# Azure Functions application which implements the API endpoint that provides weather information to the Blazor WebAssembly app. The WeatherForecastFunction returns an array of WeatherForecast objects.

  • Client: The front-end Blazor WebAssembly project. A fallback route is implemented to ensure client-side routing is functional.

  • Shared: Holds common classes referenced by both the Api and Client projects which allows data to flow from API endpoint to the front-end web app. The WeatherForecast class is shared among both apps.

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

Fallback route

The application exposes URLs like /counter and /fetchdata which map to specific routes of the application. Since this app is implemented as a single page application, each route is served the index.html file. To ensure that requests for any path return index.html a fallback route is implemented in the staticwebapp.config.json file found in the Client project's root folder.

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

The above configuration ensures that requests to any route in the app returns the index.html page.

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 can be deployed to Azure Static Web Apps.

  1. Make sure you're signed in to GitHub and navigate to the following location to create a new repository:
  2. Name your repository my-first-static-blazor-app.

Create a static web app

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

  1. Navigate to the Azure portal.

  2. Select Create a Resource.

  3. Search for Static Web Apps.

  4. Select Static Web Apps.

  5. Select Create.

  6. On the Basics 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. Select Sign in with GitHub and authenticate with GitHub.

  8. Enter the following GitHub values.

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

  9. In the Build Details section, select Blazor from the Build 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

Review and create

  1. Select the Review + Create button to verify the details are all correct.

  2. Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.

  3. Once the deployment completes click, Go to resource.

  4. Select Go to resource.

    :::image type="content" source="media/deploy-blazor/resource-button.png" alt-text="Go to resource button":::

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 navigate 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.

:::image type="content" source="./media/deploy-blazor/overview-window.png" alt-text="Overview window":::

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

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

Clean up resources

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

  1. Open the Azure portal.
  2. Search for my-blazor-group from the top search bar.
  3. Select on the group name.
  4. Select on the Delete button.
  5. Select Yes to confirm the delete action.

Next steps

[!div class="nextstepaction"] Authentication and authorization