get-started-cli.md

title	description	services	author	ms.service	ms.topic	ms.date	ms.author	ms.custom	ms.devlang
Quickstart: Building your first static site with the Azure Static Web Apps using the CLI	Learn to deploy a static site to Azure Static Web Apps with the Azure CLI.	static-web-apps	craigshoemaker	static-web-apps	quickstart	11/17/2021	cshoe	mode-api, devx-track-azurecli	azurecli

Quickstart: Building your first static site using the Azure CLI

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

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

Prerequisites

• GitHub account
• Azure account
• Azure CLI installed (version 2.29.0 or higher)

[!INCLUDE 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 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.

   GITHUB_USER_NAME=<YOUR_GITHUB_USER_NAME>

   Replace the placeholder <YOUR_GITHUB_USER_NAME> with your GitHub user name.

4. Create 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 GitHub interactive login experience. Look for a line in your console that resembles the following message.

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

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

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

7. Select the Continue button.

8. Select the Authorize AzureAppServiceCLI button.

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

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 the 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 (:::image type="icon" source="media/get-started-cli/checkmark-green-circle.png" border="false":::). 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 the browser and navigate 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

[!div class="nextstepaction"] Add an API