Static Web Apps - Deployments

In my previous article, we reviewed how to configure the Back-End for our Sinlge Plage Applications (SPA's) using Azure Functions and how to use the Static Web App CLI tool to build and execute from our local machines (works on my machine certification)

In this entry we'll review how to configure our Static Web App from our source code repositories in GitHub or Azure DevOps.

Source repository from GitHub or Azure DevOps

To deploy an Azure Static Web App the most common and more used way to use release pipelines using GitHub Actions or pipelines in Azure DevOps. There are some other ways like the CLI (but at this point I'm getting some error trying it)

In this post, I'll focus on learning how to accomplish the task from a code repository in Azure DevOps. And just to remember I have been using a vanilla JavaScript app, but this concept apply to any other JS framework like Angular, React, Vue, etc.

Static Web App configuration in Azure

The first step will be to configure the Static Web App in Azure

Once we have the common settings configured, like the subscription, resource group, and name, we'll have our first decision to make, we need to select the Hosting Plan, We can check for the comparison table to make your decision.

Another important point is to know that the service is available only in a limited list of regions.

Following our next step we need to configure the repository for our code. As mentioned before, I'll configure it using my Azure DevOps instance.

And once our repository is configured, it will show us a new section where we will configure the build parameters (those that we saw in the previous post where we used to configure with the CLI)

The result of all of these actions we'll be the Static Web App asset configured but we'll also finish with a configured Azure DevOps Pipeline (with yaml code) on our repository.

Manual Pipeline

But if you are like me, you will prefer to configure your own pipeline. In this case, we need to select 'Other' option on the source when we are creating our Static Web App in Azure

And once created, we'll need to get the Deployment Token that you can find in the header of the created resource.

With this, we'll proceed to create the Azure DevOps pipeline using the following code:

trigger: none
 
pool:
  vmImage: ubuntu-latest
 
steps:
- task: AzureStaticWebApp@0
  inputs:
    app_location: '.'
    output_location: '.'
    api_location: 'api'
    azure_static_web_apps_api_token: '$(deployment_token)'

and as you can see, we need to configure the variable in the pipeline

Conclusions

As you can see, the process is very simple and we could even say that it is almost 100% automated.

In the next post, we will talk about how to use an ASP.NET Web API application as our backend, being an alternative to the Azure Functions that we saw in the last posts.