Deploying static webs apps with the Azure cli and bicep
Tags: azure, devops, bicep, react
Published: 2024-06-04 22:49:08

---
title: Deploying static webs apps with the Azure cli and bicep
published: true
description: Deploying static webs apps via the cli and bicep
tags: #Azure #devops #Bicep #react
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-02 20:49 +0000
---
## 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.

## What is a static web app


## 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](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](https://github.com/sirBassetDeHound/techTuesday)