Bicep and static web apps

In my experience, static web apps is almost too easy. Setting up one is really easy and deploying code is only one single step! This too easy approach is found in setting up custom domains.

There is a really good and easy to follow article in the official docs. There is even a video showing you the process. It does not, however, show you how to do it using Bicep.

My Bicep for provisioning the static app

Here is the Bicep I use to provision a new staticweb app:

var webappName = 'Identifier-${env}-stapp'

resource staticwebApplication 'Microsoft.Web/staticSites@2021-03-01' = {
  name: webappName
  location: location
  properties:{
    stagingEnvironmentPolicy:'Enabled'
    allowConfigFileUpdates: true
  }
  sku: {
    tier: 'Free'
    name: 'Free'
  }

  tags: resourceGroup().tags
}

How to add a custom domain using Bicep

The steps for adding a custom domain are outlined in the documentation linked above, but the steps are these:

1. Find your static web app’s autogenerated URL.
2. Update your DNS with a CNAME-record pointing your domain to that autogenerated URL.
3. Update the Custom Domain setting. (Run the Bicep update)

Step 1 and 2 has to be done before running the Bicep update.

The Bicep

The official documentation is very limited I am sorry to say. That is the reason I wrote this post.

Here is my Bicep for setting a custom domain:

var domain = {
  PROD: {
    fqdn: 'smart.workdomain.com'
  }
  TEST: {
    fqdn: 'test-smart.workdomain.com'
  }
  DEV: {
    fqdn: 'dev-smart.workdomain.com'
  }
}

resource staticwebApplicationDomain 'Microsoft.Web/staticSites/customDomains@2022-03-01' = {
  name: domain[env].fqdn
  parent: staticwebApplication
}

A couple of things to point out.

• The parent is the static web app created above.
• You do not need to add your SSL-cert, Azure takes care of that for you. Almost too simple.
• The name is the domain you need to add.
• Adding the domain takes about 10-15 minutes. So don’t give up.