How to automate creation of Azure Static Web Site using bicep? Bicep fails to deploy static web pages in Github repo!

Question

Background:

I am creating a Github workflow that uses bicep and powershell to automate the deployment of this sample application: https://learn.microsoft.com/en-us/azure/api-management/howto-protect-backend-frontend-azure-ad-b2c. Since I want to use github version control for the static web site, I am substituting an azure static web site for the static web site feature of azure (blob) storage used in the tutorial.

Plan:

I create an azure static web site using the portal and decompile the download the ARM template into bicep and run the bicep script. Since I ran into some problems using the portal (see https://learn.microsoft.com/en-us/answers/questions/1381837/error-when-following-azure-static-web-app-tutorial ) I discovered that I could create a static web site using VSCode which is here: https://polite-cliff-0f03d401e.3.azurestaticapps.net/ (but VS code does not give you the opportunity to use an existing resource group).

Here is a screen shot with a slight modification (I added "how are you today?") I made and did a push to prove that the github workflow was working:

Failing Bicep Script:

So I went to the portal for the newly created azure static web app and I downloaded the JSON ARM template and decompiled it into bicep (and made some very minor changes like using a param for location and changing a variable name):

param location string = resourceGroup().location
param name string = uniqueString(resourceGroup().id)

param asw_AzureStaticAngularWebCallsAzureFunc_name string = 'AzureStaticAngularWebCallsAzureFunc'

resource asw_AzureStaticAngularWebCallsAzureFunc 'Microsoft.Web/staticSites@2022-09-01' = {
  name: '${name}_AzureStaticAngularWebCallsAzureFunc'
  location: location
  sku: {
    name: 'Free'
    tier: 'Free'
  }
  properties: {
    repositoryUrl: 'https://github.com/siegfried01/${asw_AzureStaticAngularWebCallsAzureFunc_name}'
    branch: 'main'
    stagingEnvironmentPolicy: 'Enabled'
    allowConfigFileUpdates: true
    provider: 'GitHub'
    enterpriseGradeCdnStatus: 'Disabled'
  }
}

So I say:

 az deployment group create --name $name --resource-group $rg --mode Incremental --template-file  deploy-AzureStaticWebSiteAngular.bicep | tr '\r' -d

Bicep Output:

{-
  "id": "/subscriptions/accxxxxxxxxxxxxxxxxxxxxx/resourceGroups/rg_AzureStaticWebSiteAngular/providers/Microsoft.Resources/deployments/AzureStaticWebSiteAngular",-
  "location": null,-
  "name": "AzureStaticWebSiteAngular",-
  "properties": {-
    "correlationId": "8c082549-c9a0-4ce2-bb9d-8286ab5a29f5",-
    "debugSetting": null,-
    "dependencies": [],-
    "duration": "PT1.051282S",-
    "error": null,-
    "mode": "Incremental",-
    "onErrorDeployment": null,-
    "outputResources": [-
      {-
        "id": "/subscriptions/accxxxxxxxxxxxxxxxx/resourceGroups/rg_AzureStaticWebSiteAngular/providers/Microsoft.Web/staticSites/AzureStaticAngularWebCallsAzureFunc",-
        "resourceGroup": "rg_AzureStaticWebSiteAngular"-
      }-
    ],-
    "outputs": null,-
    "parameters": {-
      "asw_AzureStaticAngularWebCallsAzureFunc_name": {-
        "type": "String",-
        "value": "AzureStaticAngularWebCallsAzureFunc"-
      },-
      "location": {-
        "type": "String",-
        "value": "westus2"-
      },-
      "name": {-
        "type": "String",-
        "value": "rajz6szjnw7ku"-
      },-
      "staticSites_AzureStaticAngularWebCallsAzureFunc_name": {-
        "type": "String",-
        "value": "AzureStaticAngularWebCallsAzureFunc"-
      }-
    },-
    "parametersLink": null,-
    "providers": [-
      {-
        "id": null,-
        "namespace": "Microsoft.Web",-
        "providerAuthorizationConsentState": null,-
        "registrationPolicy": null,-
        "registrationState": null,-
        "resourceTypes": [-
          {-
            "aliases": null,-
            "apiProfiles": null,-
            "apiVersions": null,-
            "capabilities": null,-
            "defaultApiVersion": null,-
            "locationMappings": null,-
            "locations": [-
              "westus2"-
            ],-
            "properties": null,-
            "resourceType": "staticSites",-
            "zoneMappings": null-
          }-
        ]-
      }-
    ],-
    "provisioningState": "Succeeded",-
    "templateHash": "16670300580194434247",-
    "templateLink": null,-
    "timestamp": "2023-10-19T17:28:49.379536+00:00",-
    "validatedResources": null-
  },-
  "resourceGroup": "rg_AzureStaticWebSiteAngular",-
  "tags": null,-
  "type": "Microsoft.Resources/deployments"-
}

Here are the results:

https://witty-dune-0a9dce71e.4.azurestaticapps.net/

Here is the screen shot indicating that it is ignoring the github repository URL I specified:

As of Oct 06 2023 it does not look at all like the original web site (https://polite-cliff-0f03d401e.3.azurestaticapps.net/) I created with VS Code extension. As you can see from the bicep, I'm using the same github repo that VSCode Created for me: https://github.com/siegfried01/AzureStaticAngularWebCallsAzureFunc

Question: How do I make bicep deploy the code in my github repo?

Thanks

Siegfried

---

Answer 1

The problem that when you follow this tutorial (https://learn.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=angular) it (and azure app service) creates a deployment token that the vscode extension grabs from the newly created static web app and puts in the secrets for the github repo.

When my bicep script deletes the contents of the resource group (using this command: az deployment group create --mode complete --template-file ./clear-resources.json --resource-group $rg) and then do az deployment group create --name $name --resource-group $rg --mode Incremental --template-file deploy-AzureStaticWebSiteAngular.bicep to recreate a new static web app, the deployment tokens no longer match.

Shucks! In hindsight, this is very obvious. So the answer is to use the portal to get a new deployment token for the newly created azure static web app and create a new version of the secret in the github portal.

Please see my follow on questions: https://learn.microsoft.com/en-us/answers/questions/1403355/how-to-automate-azure-static-web-app-deployment-to

Answer 2

@Siegfried Heintze It seems like you are having trouble deploying your Azure Static Web App using Bicep. Based on the information you provided, it looks like the deployment was successful, but the code in your GitHub repository is not being used.

One thing to check is whether the GitHub repository you specified in your Bicep script has the correct code. You can try cloning the repository locally and checking if the code matches what you expect to see on your website.

Another thing to check is whether the GitHub repository is set up correctly to work with Azure Static Web Apps. Make sure that the repository is configured to use the correct branch and that the build and deployment settings are configured correctly.

To make sure that your GitHub repository is configured correctly to work with Azure Static Web Apps, you can follow these steps:

Open your GitHub repository in a web browser and click on the "Settings" tab.

Scroll down to the "GitHub Pages" section and make sure that the "Source" setting is set to the correct branch. For example, if your website code is in the "main" branch, make sure that "main" is selected as the source.

If you are using a static site generator like Jekyll or Hugo, make sure that the build settings are configured correctly. This will depend on the specific generator you are using, but you may need to specify the build command and output directory.

If you are using a custom build script, make sure that the script is configured correctly and that any required dependencies are installed.

Finally, make sure that your GitHub repository is configured to allow access to Azure Static Web Apps. You can do this by going to the "Settings" tab in your repository, clicking on "Deploy keys", and adding a new key with the title "Azure Static Web Apps". The key should have write access to your repository.

Once you have checked these settings, you can try deploying your Azure Static Web App again and see if the correct code is being used.

If you have already checked these things and are still having trouble, it may be helpful to look at the logs from the deployment to see if there are any error messages or other clues about what might be going wrong.