Static web apps are websites that consist of static content such as HTML, CSS, and JavaScript files. They can also have a serverless backend powered by Azure Functions. Static web apps are fast, secure, and easy to develop and maintain. They are ideal for modern web frameworks such as React, Angular, Vue, and Blazor. In this article, we will show you how to deploy static web apps using Azure DevOps.

Azure Static Web Apps

Azure Static Web Apps is a service that enables you to deploy static web apps to a global CDN with a custom domain, SSL certificate, authentication, and authorization. This service also integrates with Azure DevOps Services, a cloud-based platform for DevOps practices such as version control, planning, testing, and continuous delivery.

Deploy Static Web Apps Using Azure 

Deploying Static Web Apps with Azure is a relatively straightforward process. You will need a static web app project hosted in an Azure DevOps repository and an Azure subscription.

The first step is to create an Azure Static Web App resource in the Azure portal.

Next, you need to configure a pipeline in Azure DevOps with the repository where your code lives. You can use the Azure DevOps portal or the YAML editor to create and edit your pipeline. This will provide you with a deployment token. Make sure this token is imported in using a Powershell script, or you can add it manually. The code in your YAML file will define a simple pipeline that triggers upon changes to the main branch of your repo, uses an Ubuntu virtual machine, and runs the Azure Static Web Apps task. This task is native in Azure DevOps, so there is no concern about compatibility.

Finally, run your pipeline. If you immediately navigate to the URL for your web app, you’ll see the below message. After a few minutes, the pipeline will finish running, and your content will show up. Following your deployment, you can also check out deployment logs and build outputs. Your static web app is up and running!

For more information, or to get started today, contact our team of experts here at PRAKTIK.