blog.roostech.secontentpostsDeploy Azure Static Web App using Bicep and YAML pipeline.md (April 30, 2023)

---
title: Deploy Azure Static Web App using Bicep and YAML pipeline
date: 2023-04-30 08:48:00 +0200 CEST
draft: false
author: John Roos
----

When you build some kind of web application it might be interesting to have a look at Azure Static Web Apps. This is a very light weight service which doesn’t have to cost much, and can even be free. This is the first in a series of posts about Azure Static Web Apps. In this post I will start with the basics and show how to deploy a html page to a free Static Web App. Compared to many other Azure services, the process of creating and deploying a solution is rather simple.

The content

Imagine you have this awesome website:

<!-- StaticWebApp\index.html -->
<html>
    <body>
        <h1>This is an awesome website</h1>
    </body>
</html>

The index.html file is stored in the StaticWebApp folder. In this scenario we want to deploy any file located in this folder.

Bicep template

Before we can deploy the website we need to create the resources in Azure. We only need one resource with minimal configuration. Notice that the Free tier is used.

// StaticWebApp.bicep
resource staticWebApp 'Microsoft.Web/staticSites@2022-09-01' = {
    name: 'MyStaticWebApp'
    location: 'West Europe'
    properties: {}
    sku: {
        name: 'Free'
    }
}

If you read the documentation you will notice that there are more options available, especially when it comes to configuring build and deployment. Its even more obvious if you decide to click your way through the portal to create the resource. In this case I prefer to skip the deployment part of the configuration and instead create a pipeline in Azure DevOps manually later. If you create the resource by clicking in the portal, you can select Other as Deployment Source and you will end up with the same result.

Resource deployment script

Deployment can be done with your language of choice. I prefer PowerShell and I am using the Bicep PowerShell module to build my Bicep templates (and so should you).

# DeployStaticWebApp.ps1
$ResourceGroupName = 'rg-MyStaticWebApp'
$Template = '.\StaticWebApp.bicep'

Build-Bicep -Path $Template -ErrorAction Stop 
New-AzResourceGroupDeployment -ResourceGroupName $ResourceGroupName -TemplateFile $Template.Replace('.bicep','.json') -Verbose

Now that the infrastructure is in place, its time to get the website up and running.

Azure DevOps pipeline

In this scenario I am using Azure DevOps for the source code and deployment pipeline. I create a new pipeline with the following content.

# DeployStaticWebApp.yaml
name: "Static Web App - Deploy"

trigger:
  branches:
    include:
    - 'main'

stages:
- stage: Deploy
  jobs: 
    - job: Deploy
      displayName: 'Deploy'
      pool:
        vmImage: 'ubuntu-latest'

      variables:
      - group: StaticWebApp

      steps:
      - checkout: self

      - task: AzureStaticWebApp@0
        displayName: 'Deploy Static Web App'
        inputs:
          azure_static_web_apps_api_token: $(AzureStaticWebAppApiToken)
          app_location: "/StaticWebApp"
          api_location: ""
          skip_app_build: true 
          skip_api_build: true
          is_static_export: true
          output_location: ""

There are a couple of things to keep in mind here. The pipeline will trigger any time a commit is pushed to the main branch. The task input app_location is set to “/StaticWebApp” which means that the website need to be in a folder with that name. Since we are only deploying regular html we disable the build features. More information can be found here.

Note: The AzureStaticWebApp task requires Linux to run. If you want to build your app on a Windows host, you would probably want to publish your build artifacts so that you can use them on the Linux host during deployment. This is outside the scope of this post and not needed to continue.

Deployment token

In the pipeline yaml, there is a variable called “AzureStaticWebAppApiToken” (which belongs to variable group “StaticWebApp”). This variable should contain the deployment token for your Static Web App. You can get the token in the portal, by clicking “Manage deployment token” on the Overview page for your Static Web App.

When you have copied the deployment token, go back to Azure DevOps and create a variable group called “StaticWebApp”. In the variable group, add a variable called “AzureStaticWebAppApiToken”. Paste the deployment token into the Value field.

Variable group

Verify deployment

When the pipeline and variable has been saved we are ready to go. During the first run, it might ask you to assign permissions for the pipeline to the variable group. From now on, any time you commit to the main branch a new deploy will start.

It doesn’t have to be harder than that to get a website up and running. In the next post will show how to add authentication to the Static Web App.

Deploy Azure Static Web App using Bicep and YAML pipeline