Static-web-apps: Arm templates

[johnpapa]

@danwahlin wants to add buttons to automate deployment possibly using arm templates

[DanWahlin]

Thanks @johnpapa. Whether it's through:

• ARM templates (can be complex for people not familiar with them)
• JSON config included in the repo that follows a set schema
• A Github action from the market that uses the Azure CLI (once that part is ready)
• Or some other technique

....having the ability to automate the initial creation of the service through config would be a great way to have people get any compatible static web app repo going quickly by simply dropping a file in the repo and kicking off the process through some mechanism in Github (an action??). Once they login to Azure the config from the repo would be used to create the Azure Static Web Apps service for them. All done without leaving Github.

From a pseudo-code standpoint, something like this potentially (yes...I made this up quickly :-)):

azure-deployment.json

{
  "service": "AzureStaticWebApps",
  "properties": {
    "resourceGroup": "MyRG",
    "tags": ["tag1"],
    "name": "my-static-web-app",
    "region": "westus",
    "sku": "free",
    "branch": "master",
    "appLocation": "/",
    "apiLocation": "api",
    "appBuildLocation": "dist"
  }
}

The github account, org, and repo could be dynamic I'm assuming since the file would be in the target repo already. If not, those props could be added too of course.

I could see this for Azure Static Web Apps, Azure Web Apps, Azure Functions, and potentially other Azure services too. Drop the appropriate file, initiate the process in Github, login to Azure, done! Having a simple JSON schema would be easiest IMO. ARM templates are more "standard" of course for Azure but definitely more complex for those who haven't used them.

[johnkors]

Hoping it would be even less cluttered than that. If you look at what the competition (Vercel, using AWS / Netlify using both AWS & Google) is doing, the infra is not even mentioned.

• Given that the service is "geographically distributed around the world", is region and the other azure specifics really relevant? Couldn't Azure just handle this instead?
• Can the branch trigger be solely a github actions yaml concept, and not duplicated into the infra deploy?

If so, the setup would be reduced to:

    "appLocation": "/",
    "apiLocation": "api",
    "appBuildLocation": "dist"

[DanWahlin]

I agree - that would be even better. I based it on what's there as of today, but getting to the bare minimum would be the ultimate solution. Expanding the idea to potentially cover multiple Azure services could be useful too though.

For example, an Azure Functions or Azure Web App project could deploy directly from Github with the proper config. That really depends on if Azure as a whole is looking to simplify all of this though and allow people to do it right from Github.

[johnkors]

Yeah, agreed. The whole ARM concept needs a diet for common scenarios like that.

@DanWahlin wants to add buttons to automate deployment possibly using arm templates

I'd argue very few would _like_ to use ARM templates. ARM is used just because it's the only option we have to do what we need/want. Heck, even a company built a business around ARM being so hard to manage (https://www.pulumi.com/). 😂 If that is not telling for the Azure team, I'm not sure what is.

[isaacabraham]

If there is an ARM template defined, we would be happy to create a Farmer builder around it. We already have a great story around App Service and recently added static website support for storage accounts so this would nicely round off the web story for Azure.

[miwebst]

@isaacabraham lets sync! We have ARM template support today, they just aren't documented. We are looking into options to streamline this experience.

[MaxMommersteeg]

@miwebst Do you know if there is an ARM Template example on GitHub?

[isaacabraham]

@miwebst feel free to reach out to me by email or through Twitter (isaac_abraham) and we can chat.

[lgulliver]

@miwebst any chance we could get a quick example around this? I'd love to be able to throw together a Bicep version

[miwebst]

Sorry for the delay on this, here is an example. The key is that you will need to get a GitHub PAT (https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token) with admin/write access to the repository and the ability to interact with workflows:

Values:
Name - name of your Static Web App
Location - one of the locations where Static Web Appcan be deployed to
Sku - Free
RepositoryUrl - ie https://github.com/{username}/{repo}
Branch - ie main
RepositoryToken - PAT (described above)
App location - directory of your app
Api location - direction of any azure functions (optional)
App Artifact Location - output directory of your app after building

Template:

{
    "$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "name": {
            "type": "string"
        },
        "location": {
            "type": "string"
        },
        "sku": {
            "type": "string"
        },
        "repositoryUrl": {
            "type": "string"
        },
        "branch": {
            "type": "string"
        },
        "repositoryToken": {
            "type": "securestring"
        },
        "appLocation": {
            "type": "string"
        },
        "apiLocation": {
            "type": "string"
        },
        "appArtifactLocation": {
            "type": "string"
        }
    },
    "resources": [
        {
            "apiVersion": "2019-12-01-preview",
            "name": "[parameters('name')]",
            "type": "Microsoft.Web/staticSites",
            "location": "[parameters('location')]",
            "properties": {
                "repositoryUrl": "[parameters('repositoryUrl')]",
                "branch": "[parameters('branch')]",
                "repositoryToken": "[parameters('repositoryToken')]",
                "buildProperties": {
                    "appLocation": "[parameters('appLocation')]",
                    "apiLocation": "[parameters('apiLocation')]",
                    "appArtifactLocation": "[parameters('appArtifactLocation')]"
                }
            },
            "sku": {
                "Tier": "[parameters('sku')]",
                "Name": "[parameters('sku')]"
            }
        }
    ]
}

[isaacabraham]

@miwebst cool. Can you give some examples of:

• What the output artifact location should be?
• What other values the SKU can have?
• Are all parameters mandatory?

Ta

[miwebst]

• App artifact location: imagine you have a React app that when you build it, all of the data goes to a directory called 'build'. In this case, 'build' would be your app artifact location. Similarly assume that you had an Angular app that output to 'dist/myapp' then similarly 'dist/myapp' would be the app artifact location.

• Skus: Free is the only sku currently offered by Static Web Apps while we are in preview!

• The apiLocation and appArtifactLocation parameters are optional. You should include api location if you project uses Azure Functions. You should include the appArtifactLocation if your app requires a build step that outputs static assets to a separate folder (purely static websites do not need this)

[isaacabraham]

It's alive! https://twitter.com/isaac_abraham/status/1318323982664404993

[isaacabraham]

Are app settings and custom domains supported in ARM?

[miwebst]

Good question, if you are using Azure DNS Zones for DNS management then you can do custom domains (it's a little complicated) but app settings are fairly straight forward. Here is an example of app settings:

{
    "$schema": "http://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "name": {
            "type": "string"
        },
        "location": {
            "type": "string"
        },
        "sku": {
            "type": "string"
        },
        "repositoryUrl": {
            "type": "string"
        },
        "branch": {
            "type": "string"
        },
        "repositoryToken": {
            "type": "securestring"
        },
        "appLocation": {
            "type": "string"
        },
        "apiLocation": {
            "type": "string"
        },
        "appArtifactLocation": {
            "type": "string"
        }
    },
    "resources": [
        {
            "apiVersion": "2019-12-01-preview",
            "name": "[parameters('name')]",
            "type": "Microsoft.Web/staticSites",
            "location": "[parameters('location')]",
            "properties": {
                "repositoryUrl": "[parameters('repositoryUrl')]",
                "branch": "[parameters('branch')]",
                "repositoryToken": "[parameters('repositoryToken')]",
                "buildProperties": {
                    "appLocation": "[parameters('appLocation')]",
                    "apiLocation": "[parameters('apiLocation')]",
                    "appArtifactLocation": "[parameters('appArtifactLocation')]"
                }
            },
            "sku": {
                "Tier": "[parameters('sku')]",
                "Name": "[parameters('sku')]"
            },
            "resources":[
                {
                    "apiVersion": "2019-12-01-preview",
                    "name": "appsettings",
                    "type": "config",
                    "location": "[parameters('location')]",
                    "properties": {
                        "testAppSetting": "hello_world"
                    },
                    "dependsOn": [
                        "[resourceId('Microsoft.Web/staticSites', parameters('name'))]"
                    ]
                }
            ]
        }
    ]
}

[NickDarvey]

Are app settings and custom domains supported in ARM?

you can do custom domains (it's a little complicated)

I can kind of get an idea what to do with custom domains with Azure DNS between the reference docs and what I'm doing here. I don't see any equivalent for Microsoft.Web/sites/hostnameBindings's thumbprint property in Microsoft.Web/staticSites (for specifying to a Microsoft.Web/certificates).

What approach should I be taking for TLS?

[miwebst]

Good question! There is a small bug in how we respond to polling requests when creating custom domains so it appears they do not work as I expected. We are working on getting a fix for that in the near future!