Close
AlgoliaLogoLight
Close full mode
logo

Azure Static Web Apps

Git RepositoryEdit on Github

Requirements

  • Create an Azure Account.
  • Setup Azure CLI.
  • Log in with Azure CLI.
  • Create a resource group.
  • If you haven't done these requirements, please refer to Azure CLI content.
  • GitHub repository with source code that consists of an HTML page (index.html) or an output from static site generator, e.g. Gatsby, Jekyll.

Create a static app from existing source code

  • Use the following command to create Azure static web app with a free plan.
    az staticwebapp create \
    --name <STATIC_WEB_APP_NAME> \
    --resource-group <RESOURCE_GROUP_NAME> \
    --location <LOCATION_NAME> \
    --source <GITHUB_REPOSITORY_URL_OF_STATIC_SITE> \
    --branch <REPOSITORY_BRANCH_TO_DEPLOY> \
    --token <GITHUB_PERSONAL_ACCESS_TOKEN>
  • For RESOURCE_GROUP_NAME, use az group list --output table.
  • Available regions for the location are westus2, centralus, eastus2, westeurope, eastasia.
  • To list all locations, use az account list-locations --output table.
  • For GITHUB_REPOSITORY_URL_OF_STATIC_SITE, use https://github.com/account-name/repository-name pattern.
  • For REPOSITORY_BRANCH_TO_DEPLOY, use a branch that you want to deploy source code to a static app, e.g. main, develop.
  • For GITHUB_PERSONAL_ACCESS_TOKEN, please refer to "Creating a personal access token" document. Get only repo (full control of private repo) permission.
  • Learn more about az staticwebapp create command, please refer to https://docs.microsoft.com/en-us/cli/azure/staticwebapp?view=azure-cli-latest#az_staticwebapp_create
  • After you have configured all options, execute the command and wait until deployment has finish.

Create an empty static app

  • Azure Static Web Apps does not currently support deploying a website from an existing source code with Azure CLI as mentioned in this issue (https://github.com/Azure/static-web-apps/issues/446). However, you can create an empty static web app with some empty required options.
  • An example code to create an empty static web app:
    az staticwebapp create \
    --name codesanook-example-static-web-app \
    --resource-group codesanook-example-resource-group \
    --location eastasia \
    --source "" \
    --branch "" \
    --token dummy

Testing a website

  • You should get defaultHostname value as a result from az staticwebapp create command.
  • Copy a value of defaultHostname and paste it into an address bar of your browser and press enter.
  • You should see an HTML page with message Your Azure Static Web App is live and waiting for your content.

Deploy website's source code with GitHub Action

  • In a root of you project folder, create .github/workflows/build-and-deploy-to-azure-static-web-apps.yml file.

  • Add the following content to the workflow file to deploy a main branch to Azure Static Web Apps.

    # .github/workflows/build-and-deploy-to-azure-static-web-apps.yml
    # Learn more about Azure/static-web-apps-deploy https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow
    name: Build and deploy to Azure Static Web Apps
    on:
    push:
    branches:
    - main
    jobs:
    deploy_job:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout the latest source code from ${{ github.sha }} commit
    uses: actions/[email protected]
    - name: Deploy to Azure Static Web Apps
    uses: Azure/static-web-apps-[email protected]
    with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    action: upload
  • Create GitHub secret AZURE_STATIC_WEB_APPS_API_TOKEN and set a value which we can get from Deployment Token in Azure portal. get azure static web apps deployment token

  • Commit your code and push to a main branch.

  • In GitHub's Actions tab, you should see your deployment log and status. azure static web app actions log

  • After deployment has finished, check your website in a browser.

  • Open a browser and navigate to your static app URL.

  • You should now see a homepage from your source code.

Get a deployment token with Azure CLI

  • Command:
    az staticwebapp secrets list \
    --name <STATIC_WEB_APP_NAME> \
    --resource-group <RESOURCE_GROUP_NAME>
  • Example code to get a deployment token:
    az staticwebapp secrets list \
    --name codesanook-example-static-web-app \
    --resource-group codesanook-example-resource-group

Other useful commands

Show details of an existing static web app

  • Command:
    az staticwebapp show \
    --name <STATIC_WEB_APP_NAME> \
    --resource-group <RESOURCE_GROUP_NAME>
  • Example code to show details of an existing static web app:
    az staticwebapp show \
    --name codesanook-example-static-web-app \
    --resource-group codesanook-example-resource-group

Delete an existing static web app

  • Command:
    az staticwebapp delete \
    --name <STATIC_WEB_APP_NAME> \
    --resource-group <RESOURCE_GROUP_NAME> \
    --yes
  • Example code to delete an existing static web app:
    az staticwebapp delete \
    --name codesanook-example-static-web-app \
    --resource-group codesanook-example-resource-group \
    --yes

Useful resources

Loading comments...