Deploying static webs apps with the Azure cli and bicep

Deploying static web apps

A brief intro deploying Azure static web apps using the Azure cli, and Bicep, Microsoft’s domain specific language (DSL) for deploying Azure resources.

This will deploy a create-react-app (CRA) starter repo located in a DevOps repo using a simple .yaml file into a static app resource.

Azure cli deployment

As a precursor to deploying via the cmd line you will need the azure cli installed

Use az version to determine if you have the cli installed. If not follow these instructions for installing https://learn.microsoft.com/en-us/cli/azure/install-azure-cli

Login using az login and set the subscription you wish to work in with az account set --subscription <SUBSCRIPTION-NAME>.

Create a resource group to manage any resource deployed using az group create –name <RESOURCE-NAME> –location <LOCATION>

Finally deploy the resource into the resource group at a location az staticwebapp create – name <SWA-RESOURCE-NAME> –resource-group <RESOURCE-NAME> –location <LOCATION>

In the Azure portal under resource groups navigate to the newly deployed resource group which will contain the static web app.

Bicep

This will deploy 1 resource and 1 module into a resource group within a subscription. Create a new git repo in Azure Devops to work in which will can be deployed using a ./azure-pipelines.yaml file.

In order to create the resource group set the scope of the ./main.bicep file from its default of resourceGroup to subscription and then deploy the resource. The parameters needed will be passed in from a ./mian.parameters.bicepparam file that can be altered.

./main.bicep

targetScope = 'subscription'

// Parameters imported from `./mian.parameters.bicepparam` file
param globalTags object
param resourceGroupName string
param resourceGroupLocation string
@description('Timestamp last deployment')
param utcShort string = utcNow('d')

var customTags = {
  LastDeployed: utcShort
}

resource resourceGroup 'Microsoft.Resources/resourceGroups@2024-03-01' = {
  name: resourceGroupName
  location: resourceGroupLocation
  tags: union(globalTags, customTags)
}

The parameters file will hold customizable options needed to deploy the resources. Update the resource group name and location with values and add custom global tags to be used in all resources.

./main.parameters.bicepparam

using './main.bicep'

param globalTags = {
  Environment: 'Dev'
}

param resourceGroupLocation = '<RESOURCE-GROUP-LOCATION>'
param resourceGroupName = '<RESOURCE-GROUP-NAME>'

To add the staticWebApp and keep its config out of the main file and aid reuse add the staticWebApp as a module.

./modules/static-web-app.bicep

@description('Global tags')
param tags object
@allowed(['centralus', 'eastus', 'eastus2', 'westus', 'westus2'])
param resourceGroupLocation string
@description('Timestamp last deployment')
param utcShort string = utcNow('d')

var customTags = {
  LastDeployed: utcShort
}

resource staticwebapp 'Microsoft.Web/staticSites@2023-12-01' = {
  name: 'azStaticWebApp'
  location: resourceGroupLocation
  tags: union(tags, customTags)
  properties: {}
  sku: {
    name: 'Free'
  }
}

From here you can deploy the resources using the Azure cli, using az deployment sub create --location centralus --template-file ./main.bicep --parameters './main.parameters.bicepparam'

To deploy the resources through a pipeline create a './azure-pipelines.yaml' file and use an inlineScript to run the same cli command as above.

'./azure-parameters.yaml'

trigger:
- main

name: Bicep deploy

variables:
  vmImageName: 'ubuntu-latest'
  AzureServiceConnection: <SERVICE-CONNECTION-NAME>
  bicepParamFile: './main.parameters.bicepparam'

pool:
  vmImage: $(vmImageName)

steps:
- task: AzureCLI@2
  inputs:
    azureSubscription: $(AzureServiceConnection)
    scriptType: bash
    scriptLocation: inlineScript
    useGlobalConfig: false
    inlineScript: az deployment sub create --location <LOCATION> --template-file ./main.bicep --parameters $(bicepParamFile)

In Azure DevOps create a service connection that can be used to grant access to Azure for deploying resources into:

1. DevOps -> project settings -> service connections
2. New service conection -> Azure Resource Manager -> workload identity federeation (automatic)
3. Scope: subscription -> ResourceGroup: leave blank -> Add a service connection name and description -> Grant access permission to all pipelines

Once created replace <SERVICE-CONNECTION-NAME> with the name of the newly created service connection and push the code changes.

Deploy create react app

Create a new repo with create react app and add a './azure-pipelines.yaml' file that deploys the repo in the static web app any time new changes are pushed to it.

'./azure-parameters.yaml'

trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      output_location: '/build'
    env:
      azure_static_web_apps_api_token: $(deployment_token)

Get the deployment token from the static app resource under the Manage deployment token at the top of the overview tab.

Inside Azure DevOps click create a new pipeline from an Azure GitRepo with an existing Azure pipelines yaml file. On the review stage add new variable for the deployment_token and add the static web app deployment token before running.

Validate the web app has been deployed by navigating to the URL on the overview tab.

Now any time now changes are pushed to the create-react-repo those changes will be deployed to the web app.

Link to the Git repo