Deploy a static web App through Azure DevOps

Deploying static web apps can be an easy task, even in AWS or Azure, and will be easier if you connect the deployment through Azure DevOps.

Why? because once you have connected all your pipelines (from the code to the Deploy), then you will worry about the commit and push, so focus on your code more than your infrastructure.

Ingredients

• dev.azure.com account (with access to Azure Repo and pipelines).
• portal.azure.com account (where you can create a static web app).

Method

Creating a new Azure DevOps project, so go at you dev.azure.com and click on new project.

Then go to Repos and copy the url to clone in your localhost.

Finally set up your webpage and then commit your code into the Repo.

git add .
git commmit -m "first initial commit for static web site"
git push

The web static site is mainly composed by two files: the index.html and an image.

We can check the code pushed into the Repo going to Azure Repo:

Pipeline

In the following steps we will build a simple pipeline to deploy de code from Git to Static web app component.

Let’s go to portal.azure.com the create a static web app component.

Then click on “create static web app” and fill out the following items:

Advise: it’s important to define your name convention, if you don’t have one, is not a bad idea follow this one

Define your naming convention - Cloud Adoption Framework

: https://docs.microsoft.com/en-us/azure/cloud-adoption-framework/ready/azure-best-practices/resource-naming

The name of the resource is “stapp-swae-dev-eastus2–001” where:

• stapp: resource type.
• swae: application name, static web app example.
• dev: environment
• eastus2: region (try to be the preferred region)
• 001: instance

Finally click on “review+create” and then “create”. I have jumped the tag section, it doesn’t mean is not important. I’ll write an article about it.

If you want to check the web site is up and running, you can click on the url. In the meantime, we will go to the “manage deployment token” and will copy. This token will be key to do the deploy in azure devops through pipelines.

Going back to dev.azure.com, go to Repo, then click on “Set up build” button.

Select starter pipeline

and replace the content of the azure-pipeline.yml with the following code:

trigger:
- main
pool:
  vmImage: ubuntu-latest
steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: ''
    env:
      azure_static_web_apps_api_token: $(deployment_token)

Then click on Variables and add the following one: deployment_token with the value picked up from the static web site, the manage deployment token. Remember to tick “keep this value secret”.

Finally click on ok, save and “save and run”.

The execution of the pipeline should end as follow:

Verifying the static web site: