Skip to content
Carmel Eve By Carmel Eve Software Engineer I
How to deploy a Vue app to Azure Static Web Apps using Azure DevOps and YAML

The newly GA Azure Static Web Apps are Microsoft's offering for hosting static web applications on Azure. This week I decided to migrate the VueJS web app that I've been building over to the new service.

The code repository is in Azure DevOps so I needed to set up an ADO pipeline to deploy the site. I decided, instead of using a classic release pipeline, to set it up using YAML.

I first created a new static web app by hand via the portal.

Power BI Weekly is a collation of the week's top news and articles from the Power BI ecosystem, all presented to you in one, handy newsletter!

As I was deploying the app from Azure Devops, I needed to select the Other option for the source:

Deploying an Azure Static Web App from the portal, selecting "Other" as the application source

There is currently support for creating a Web App using the CLI using the following command:

az staticwebapp create \
    -n <APPLICATION_NAME> \
    -g <RESOURCE_GROUP_NAME> \
    -s https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/<APPLICATION_LOCATION> \
    -l <LOCATION (e.g. westeurope)> \
    -b main \
    --token <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>

However, this assumes that you will be using a GitHub repository as the application source. Hopefully support for deploying a new (empty) Static Web App using the CLI will be coming soon!

Once I had created the Web App, I retrieved the deployment token:

Image showing "Manage Deployment Token" button.

Then, I set up a new pipeline in ADO and set the deployment token that I'd retrieved as a variable on the pipeline (called DeploymentToken).

The first two steps in the pipeline build the Vue app:

- task: NodeTool@0
  displayName: 'Install Node.js'
  inputs:
    versionSpec: '10.x'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'
  workingDirectory: $(Build.SourcesDirectory)/Solutions/WebApp

The script step first runs an npm install which installs all the necessary node modeules.

Discover your Power BI Maturity Score by taking our FREE 5 minute quiz.

The npm run build command then builds the application (this generates the html pages, compiles the code, etc). Within my solution the web application project lives in the Solutions/WebApp folder so we set this folder as the workingDirectory.

The output of the build will end up in a dist folder within the project directory (Solutions/WebApp). And it is this output that we need to deploy.

To do this we use the AzureStaticWebApp@0 task which is defined by ADO, using the following inputs:

- task: AzureStaticWebApp@0
  inputs:
    app_location: 'Solutions/WebApp/dist'
    api_location: ''
    output_location: ''
  env:
    azure_static_web_apps_api_token: $(DeploymentToken)

Here we are using our DeploymentToken variable to tell Azure DevOps where to deploy the application.

We also provide an app_location which is the location of the code to deploy. In this case, this is the location of the build output from the previous step. Notice that the path to the application code is relative to the root of the solution, and does not need to be qualified with $(Build.SourcesDirectory) (this tripped me up for a while!).

This task will deploy the contents of the Solutions/WebApp/dist folder to the Azure Static Web App that provided the deployment token.

I left the api_location blank as I did not want to deploy an Azure Function as a part of the solution. Azure Static Web Apps support adding APIs to your Web Applications which are powered by Azure Functions. I didn't need to deploy Azure Functions as part of my application, but this api_location parameter is what you would use to provide the link to the code for your functions based APIs.

Note: At the time of writing there are quite a few constraints on the functions that are supported which are worth considering before deciding to host your APIs within you Static Web App!

Finally, the output_location is relative location that you want the output to be placed within your site (this could, for example, be a wwwroot folder). However, in this case I just wanted to place these files at the root of the site, so again I left this blank.

And that's it! By running the pipeline with the three above steps I was able to use Azure Devops to deploy my VueJS app as an Azure Static Web App.

FAQs

What are Azure Static Web Apps? The newly GA Azure Static Web Apps are Microsoft's offering for hosting static web applications on Azure.
How do you deploy a Static Web App using Azure Devops? Using the AzureStaticWebApp@0 task you can deploy application code to an existing Static Web App. You just provide the location of the built application code, and a deployment token provided by the Web App.
Troubleshooting "NotImplemented / Access is denied" error when integrating Azure App Service with Azure Virtual Network (VNet)

Troubleshooting "NotImplemented / Access is denied" error when integrating Azure App Service with Azure Virtual Network (VNet)

Ed Freeman

Are you configuring your Azure App Service to use a VNet? The regional VNet integration for an Azure App Service is a preview feature, and so comes with some quirks. One of the documented limitations of this preview feature is that "The feature is only available from newer App Service scale units that support PremiumV2 App Service plans." This has interesting implications as to how you need to deploy your App Service, otherwise you could end up with a rather perplexing pattern of errors. Read about how we came about this error, and how we ended up fixing it.
Avoiding deployment locking errors by running Web and Functions Apps from packages

Avoiding deployment locking errors by running Web and Functions Apps from packages

Carmel Eve

Fix DLL locking errors in Azure Function deployment by using "deploy from package" option. This runs the function from a package file, resolving issues.
Using Cloud CI/CD in Zero Trust Environments

Using Cloud CI/CD in Zero Trust Environments

James Dawson

Performing certain deployment operations from a cloud-based CI/CD agent against resources that are only accessible via private networking are problematic. The often-cited solution is to use your own hosted agents that are also connected to the same private networks, however, this introduces additional costs and maintenance overhead. This post discusses an approach that combines the use of cloud-based CI/CD agents with 'just-in-time' allow-listing as an alternative to operating your own private agents.

Carmel Eve

Software Engineer I

Carmel Eve

Carmel is a software engineer and LinkedIn Learning instructor. She worked at endjin from 2016 to 2021, focused on delivering cloud-first solutions to a variety of problems. These included highly performant serverless architectures, web applications, reporting and insight pipelines, and data analytics engines. After a three-year career break spent travelling around the world, she rejoined endjin in 2024.

Carmel has written many blog posts covering a huge range of topics, including deconstructing Rx operators, agile estimation and planning and mental well-being and managing remote working.

Carmel has released two courses on LinkedIn Learning - one on the Az-204 exam (developing solutions for Microsoft Azure) and one on Azure Data Lake. She has also spoken at NDC, APISpecs, and SQLBits, covering a range of topics from reactive big-data processing to secure Azure architectures.

She is passionate about diversity and inclusivity in tech. She spent two years as a STEM ambassador in her local community and taking part in a local mentorship scheme. Through this work she hopes to be a part of positive change in the industry.

Carmel won "Apprentice Engineer of the Year" at the Computing Rising Star Awards 2019.