Quickstart: Building your first static web app

Azure Static Web Apps publishes websites to a production environment by building apps from a GitHub repository. In this quickstart, you build a web application using your preferred front-end framework from a GitHub repository.

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

Prerequisites

Create a repository

This article uses GitHub template repositories to make it easy for you to create a new repository. The templates feature starter apps built with different front-end frameworks.

Click the Create repository from template button.

Create repository from template

Create a static web app

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

  • Navigate to the Azure portal
  • Click Create a Resource
  • Search for Static Web Apps
  • Click Static Web Apps (Preview)
  • Click Create

Basics

Begin by configuring your new app and linking it to a GitHub repository.

Basics tab

  • Select your Azure subscription
  • Select or create a new Resource Group
  • Name the app my-first-static-web-app.
    • Valid characters are a-z (case insensitive), 0-9, and -.
  • Select a Region closest to you
  • Select the Free SKU
  • Click the Sign-in with GitHub button and authenticate with GitHub

Once you sign in with GitHub, then enter the repository information.

Repository details

  • Select your preferred Organization
  • Select my-first-web-static-app from the Repository drop-down
  • Select master from the Branch drop-down
  • Click the Next: Build > button to edit the build configuration

Next Build button

Note

If you don't see any repositories, you may need to authorize Azure Static Web Apps in GitHub. Browse to your GitHub repository and go to Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and then select Grant. For organization repositories, you must be an owner of the organization to grant the permissions.

Build

Next, add configuration details specific to your preferred front-end framework.

  • Enter / in the App location box
  • Clear the default value from the Api location box
  • Enter dist/angular-basic in the App artifact location box

Click the Review + create button.

Review create button

To change these values after you create the app, you can edit the workflow file.

Review + create

After the request validates, you can continue to create the application.

Click the Create button

Create button

Once the resource is created, click the Go to resource button

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 site, 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.

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 click on 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-first-web-static-app from the top search bar
  3. Click on the app name
  4. Click on the Delete button
  5. Click Yes to confirm the delete action

Next steps