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.
- Sign in to the Azure portal, making sure you use the same account to sign in as you did to activate the sandbox.
- Click Create a Resource
- Search for Static Web Apps
- Click Static Web Apps (Preview)
- Click Create
Next, configure your new app and link it to your GitHub repository.
Enter the Project Details
Setting Value Subscription Concierge subscription Resource Group [Sandbox resource group name]
Enter the Static Web Apps details
Setting Value Name Name your app. Valid characters are
Region Select the region closest to you SKU Free
Click the Sign-in with GitHub button and authenticate with GitHub
Enter the Source Control Details
Setting Value Organization Select the Organization where you created the repository Repository my-static-blazor-app Branch main
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.
Click the Create button
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:
- Click Azure Static Web Apps CI/CD
- Click the commit titled Azure Static Web Apps added workflow for file for CI/CD
- Click the Build and Deploy Job link
From here, you can observe the progress of your app as it builds.
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!
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.
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.