Quickstart: Building your first static site using the Azure CLI

Azure Static Web Apps publishes websites to production by building apps from a code repository.

In this quickstart, you deploy a web application to Azure Static Web apps using the Azure CLI.

Prerequisites

• GitHub account
• Azure account.
  • If you don't have an Azure subscription, you can create a free trial account.
• Azure CLI installed (version 2.29.0 or higher)
• A Git setup.

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

No Framework

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.

Angular

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

Blazor

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

React

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

Vue

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

Select Create repository from template.

Deploy a static web app

Now that the repository is generated from the template, you can deploy the app as a static web app from the Azure CLI.

1. Sign in to the Azure CLI by using the following command.

   az login
   

2. Create a resource group.

   az group create \
     --name my-swa-group \
     --location "eastus2"
   

3. Create a variable to hold your GitHub user name.

   Before you execute the following command, replace the placeholder <YOUR_GITHUB_USER_NAME> with your GitHub user name.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>
   

4. Deploy a new static web app from your repository.

   No Framework

   az staticwebapp create \
       --name my-first-static-web-app \
       --resource-group my-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
       --location "eastus2" \
       --branch main \
       --app-location "src" \
       --login-with-github
   

   Angular

   az staticwebapp create \
       --name my-first-static-web-app \
       --resource-group my-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
       --location "eastus2" \
       --branch main \
       --app-location "/" \
       --output-location "dist/angular-basic" \
       --login-with-github
   

   Blazor

   az staticwebapp create \
       --name my-first-static-web-app \
       --resource-group my-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
       --location "eastus2" \
       --branch main \
       --app-location "Client" \
       --output-location "wwwroot"  \
       --login-with-github
   

   React

   az staticwebapp create \
       --name my-first-static-web-app \
       --resource-group my-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
       --location "eastus2" \
       --branch main \
       --app-location "/"  \
       --output-location "build"  \
       --login-with-github
   

   Vue

   az staticwebapp create \
       --name my-first-static-web-app \
       --resource-group my-swa-group \
       --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \
       --location "eastus2" \
       --branch main \
       --app-location "/" \
       --output-location "dist"  \
       --login-with-github
   

   Important

   The URL passed to the --source parameter must not include the .git suffix.

   As you execute this command, the CLI starts the GitHub interactive log in experience. Look for a line in your console that resembles the following message.

   Go to https://github.com/login/device and enter the user code 329B-3945 to activate and retrieve your GitHub personal access token.

5. Go to https://github.com/login/device.

6. Enter the user code as displayed your console's message.

7. Select Continue.

8. Select Authorize AzureAppServiceCLI.

View the website

There are two aspects to deploying a static app. The first operation creates the underlying Azure resources that make up your app. The second is a workflow that builds and publishes your application.

Before you can go to your new static site, the deployment build must first finish running.

1. Return to your console window and run the following command to list the URLs associated with your app.

   az staticwebapp show \
     --name  my-first-static-web-app \
     --query "repositoryUrl"
   

   The output of this command returns the URL to your GitHub repository.

2. Copy the repository URL and paste it into your browser.

3. Select the Actions tab.

   At this point, Azure is creating the resources to support your static web app. Wait until the icon next to the running workflow turns into a check mark with green background ( ). This operation may take a few minutes to complete.

   Once the success icon appears, the workflow is complete and you can return back to your console window.

4. Run the following command to query for your website's URL.

   az staticwebapp show \
     --name my-first-static-web-app \
     --query "defaultHostname"
   

   Copy the URL into your browser to go to your website.

Clean up resources

If you're not going to continue to use this application, you can delete the resource group and the static web app by running the following command:

az group delete \
  --name my-swa-group

Next steps

Add an API