Exercise - Create an Azure Static Web App

In this exercise, you'll create an Azure Static Web Apps instance including a GitHub Action that will automatically build and publish your application.

Create a Static Web App

Now that you've created your GitHub repository, you can create a Static Web Apps instance from the Azure portal.

This tutorial uses the Azure sandbox to provide you with a free, temporary Azure subscription you can use to complete the exercise. Before proceeding, make sure you have activated the sandbox at the top of this page.

  1. Sign in to the Azure portal, making sure you use the same account to sign in as you did to activate the sandbox.
  2. Click Create a Resource
  3. Search for Static Web Apps
  4. Click Static Web Apps (Preview)
  5. Click Create

Basics

Next, configure your new app and link it to your GitHub repository.

  1. Enter the Project Details

    Setting Value
    Subscription Concierge subscription
    Resource Group [Sandbox resource group name]
  2. Enter the Static Web Apps details

    Setting Value
    Name Name your app. Valid characters are a-z (case insensitive), 0-9, and _.
    Region Select the region closest to you
    SKU Free
  3. Click the Sign-in with GitHub button and authenticate with GitHub

  4. Enter the Source Control Details

    Setting Value
    Organization Select the Organization where you created the repository
    Repository my-static-blazor-app
    Branch main
  5. From Build Presets, select Blazor and confirm the options are correct for your project.

    Setting Value
    App location /Client
    Api location /Api
    App artifact location wwwroot

    Click the Review + create button. This will bring you to the page where you can review the resource before you create it.

    Review + create button

Review + create

Continue to create the application.

  1. Click the Create button

    Create button

  2. Once the deployment is complete, click the Go to resource button

    Go to resource button

Review the GitHub Action

At this stage, your Static Web Apps instance is created in Azure, but your app isn't yet deployed. The GitHub Action that Azure creates in your repository will run automatically to trigger the first build and deployment of your app, but it takes a couple minutes to finish.

You can check the status of your build and deploy action by clicking the link shown below to navigate to the Actions page of your GitHub repository:

Browse to see the progress of the GitHub Actions workflow

Once you're there:

  1. Click Azure Static Web Apps CI/CD
  2. Click the commit titled Azure Static Web Apps added workflow for file for CI/CD
  3. Click the Build and Deploy Job link

From here, you can observe the progress of your app as it builds.

View website

Once your GitHub Action finishes building and publishing your web app, you can browse to see your running app.

Click on the URL link in the Azure portal to visit your app in the browser.

Azure Static Web Apps overview page

Your app's now globally available, but it's still stuck at Loading data ... because there's no data or API yet. You'll add the API for your web app in the next section.

Congratulations! You've deployed your first app to Azure Static Web Apps!

Note

Don't worry if you see a web page that says the app hasn't been built and deployed yet. Try refreshing the browser in a minute. The GitHub Action runs automatically when the Azure Static Web Apps is created. So if you see the splash page, the app is still being deployed.

Next steps

Your app is missing an API for its shopping list. Next, you'll explore how to add an Azure Functions API to your app that will publish to Azure alongside the static assets.