Quickstart: Building your first static web app

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 Visual Studio Code extension.

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. Make sure you're signed in to GitHub and 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

Clone the repository

With the repository created in your GitHub account, clone the project to your local machine using the following command.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username.

Next, open Visual Studio Code and go to File > Open Folder to open the repository you just cloned to your machine in the editor.

Create a static web app

  1. Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.

    Azure Logo

    Note

    Azure and GitHub sign in are required. If you are not already signed in to Azure and GitHub from Visual Studio Code, the extension will prompt you to sign in to both during the creation process.

  2. Place your mouse over the Static Web Apps label and select the plus sign.

    Application name

  3. The command palate opens at the top of the editor and prompts you to name your application.

    Type my-first-static-web-app and press Enter.

    Create Static Web App

  4. Select the master branch and press Enter.

    Branch name

  5. Select / as the location for the application code and press Enter.

    Application code location

  6. The extension is looking for the location of the API in your application. This article doesn't implement an API.

    Select Skip for now and press Enter.

    API location

  7. Select the location where files are built for production in your app.

    Clear the box and press Enter.

    App files path

  8. Select a location nearest you and press Enter.

    Resource location

  9. Once the app is created, a confirmation notification is shown in Visual Studio Code.

    Created confirmation

  10. In the Visual Studio Code Explorer window, return to the Static Web Apps section and right-click on Production and select Open in Portal to view app in the Azure portal.

    Open portal

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 extension.

In the Visual Studio Code Explorer window, return to the Static Web Apps section and right-click on my-first-static-web-app and select Delete.

Delete app

Next steps