Quickstart: Building your first static site in the Azure portal

Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository. In this quickstart, 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

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 used to deploy using Azure Static Web Apps.

  1. Navigate to the following location to create a new repository:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Name your repository my-first-static-web-app

Note

Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single index.html file.

Select Create repository from template.

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.

  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.

In the Basics section, begin by configuring your new app and linking it to a GitHub repository.

Basics section

  1. Select your Azure subscription.
  2. Next to Resource Group, select the Create new link.
  3. Enter static-web-apps-test in the textbox.
  4. Under to Static Web App details, enter my-first-static-web-app in the textbox.
  5. Under Azure Functions and staging details, select a region closest to you.
  6. Under Deployment details, select GitHub.
  7. Select the Sign-in with GitHub button and authenticate with GitHub.

After you sign in with GitHub, enter the repository information.

Repository details

  1. Select your preferred Organization name.

  2. Select my-first-web-static-app from the Repository drop-down.

  3. Select main from the Branch drop-down.

    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.

  4. In the Build Details section, add configuration details specific to your preferred front-end framework.

    1. Select Custom from the Build Presets dropdown.
    2. Type ./src in the App location box.
    3. Leave the Api location box empty.
    4. Type ./src App artifact location box.
  5. Select Review + create.

    Review create button

    Note

    You can edit the workflow file to change these values after you create the app.

  6. Select Create.

    Create button

  7. Select Go to resource.

    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. Select the app name.
  4. Select the Delete button.
  5. Select Yes to confirm the delete action (this action may take a few moments to complete).

Next steps