Exercise - Create an Azure Static Web App

• 5 minutes

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

Continue to create the application.

1. Click the Create button

   

2. Once the deployment is complete, click the 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:

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.

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!

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.