Azure Static Web Apps – Custom build and deployments
Tags: azure, devops, webdev
Published: 2021-09-07 12:42:02


---
title: Azure Static Web Apps – Custom build and deployments 
published: true
description: Despite Microsoft claims "First-class GitHub and Azure DevOps integration" with Static Web Apps, one is significantly easier to use than the other. Let’s take a quick look at how much features we’re giving up by sticking to Azure DevOps
tags: azure, devops, webdev
canonical_url: https://blog.wiseowls.co.nz/index.php/2021/08/06/azure-static-web-apps-custom-build-and-deployments/
cover_image: https://blog.wiseowls.co.nz/wp-content/uploads/2021/02/cloud-computing-2001090_1920.jpg
series: Azure Static Web Apps
---

Despite Microsoft [claims](https://docs.microsoft.com/en-us/azure/static-web-apps/overview#key-features) “First-class GitHub and Azure DevOps integration” with [Static Web Apps](https://blog.wiseowls.co.nz/index.php/2021/07/23/azure-static-web-apps-when-speed-to-market-matters/), one is significantly easier to use than the other. Let’s take a quick look at how much features we’re giving up by sticking to Azure DevOps:

| |**GitHub**|**ADO**
---|---|---
|Build/Deploy pipelines|Automatically adds pipeline definition to the repo|Requires manual pipeline setup
Azure Portal support|✓|✗
VS Code Extension|✓|✗
Staging environments and Pull Requests|✓|✗

Looks like a lot of functionality is missing. This however begs the question whether we can do something about it?

Turns out we can…sort of
------------------------

Looking a bit further into ADO build pipeline, we notice that Microsoft has published this task [on GitHub](https://github.com/microsoft/azure-pipelines-tasks/tree/master/Tasks/AzureStaticWebAppV0). Bingo!

The process seems to run a [single script](https://github.com/microsoft/azure-pipelines-tasks/blob/master/Tasks/AzureStaticWebAppV0/launch-docker.sh) that in turn runs a docker image, something like this:

```
...
docker run \
    -e INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN="$SWA_API_TOKEN" \
    ...
    -v "$mount_dir:$workspace" \
    mcr.microsoft.com/appsvc/staticappsclient:stable \
    ./bin/staticsites/StaticSitesClient upload
```


What exactly `StaticSitesClient` does is shrouded with mystery, but upon successful build ([using Oryx](https://github.com/Microsoft/Oryx)) it creates two zip files: `app.zip` and `api.zip`. Then it uploads both to Blob storage and submits a request for `ContentDistribution` endpoint to pick the assets up.

It’s Docker – it runs anywhere
------------------------------

This image does not have to run at ADO or Github! We can indeed run this container locally and deploy without even committing the source code. All we need is a deployment token:

```bash
docker run -it --rm \
   -e INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN=<your_deployment_token> 
   -e DEPLOYMENT_PROVIDER=DevOps \
   -e GITHUB_WORKSPACE="/working_dir"
   -e IS_PULL_REQUEST=true \
   -e BRANCH="TEST_BRANCH" \
   -e ENVIRONMENT_NAME="TESTENV" \
   -e PULL_REQUEST_TITLE="PR-TITLE" \
   -e INPUT_APP_LOCATION="." \
   -e INPUT_API_LOCATION="./api" \
   -v ${pwd}:/working_dir \
   mcr.microsoft.com/appsvc/staticappsclient:stable \
   ./bin/staticsites/StaticSitesClient upload
```


![build process](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image.png)Also notice how this deployment created a staging environment:

![can manage environments in GitHub-enabled resource](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-1-1024x310.png)Word of caution 
----------------

Even though it seems like a pretty good little hack – this is not supported. The Portal would also [bug out](https://github.com/Azure/azure-cli/issues/19433) and refuse to display Environments correctly if the resource were created with “Other” workflow:

![a bug in Portal preventing environment management](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-2.png)Portal 

![console shows environments but no delete still](https://blog.wiseowls.co.nz/wp-content/uploads/2021/09/image-3.png)AZ CLI



Conclusion
----------

Diving deep into Static Web Apps deployment is lots of fun. It may also help in situations where external source control is not available. For real production workloads, however, we’d recommend sticking with GitHub flow.