Static Web App PR Workflow for Azure App Service Using Azure DevOps

Static Web App PR Workflow for Azure App Service Using Azure DevOps

Static Web App PR Workflow for Azure App Service using Azure DevOps Microsoft recently announced a new Azure service called Static Web Apps. Static Web Apps are tailored for apps with their code in GitHub with static content (html/javascript/css) and backend api’s.

Static Web App PR Workflow for Azure App Service using Azure DevOps

Microsoft recently announced a new Azure service called Static Web AppsStatic Web Apps are tailored for apps with their code in GitHub with static content (html/javascript/css) and backend api’s.

This blog post is not about Static Web Apps. It’s about the amazing pull request workflow that you get right out of the box with Static Web Apps.

Static Web Apps use GitHub Actions for CI/CD and when a user issues a pull request the following happens:

  • The app is built/packaged
  • A staging environment is dynamically provisioned
  • The app with the PR code is deployed into the newly provisioned staging environment
  • A comment is added to the pull request with the URL to the newly provisioned staging environment

When the pull request is closed

  • The provisioned staging environment for this pull request is deleted

Ok, HOW COOL IS THAT!!!!

That’s great for Static Web Apps, but I have a bunch of apps in Azure App Service. The code is in Azure Repos and the CI/CD pipeline uses Azure Pipelines. I want that Static Web App pull request workflow for my apps in Azure App Service.

Luckily it wasn’t hard to do. In this blog post, I’ll walk you through how I did it. First I’ll show everything using the classic editor as that looks better than a wall of yml. And at the end, I’ll share the yml for my pipeline.

Making this PR workflow for Azure App Service, Azure Repos and Azure Pipelines

For this post, I’ll use a repo that holds a .NET Core web app that is hosted in Azure App Service. Currently my CI build looks like this:

Initial CI Pipeline

Nothing magic about it. This is just your standard .NET Core build. Any time code is checked into the main branch, this build kicks off.

Enabling Build For Every Pull Request

I need this build to kick off any time someone issues a pull request. This can be set in the branch policies for this repository. This doc will walk you through the steps to do this.

After following the above steps, every time a pull request is issued, my CI build is triggered.

Adding Steps for a Pull Request

If all the build tasks are successful and if the build trigger is because of a pull request, I want the following to happen:

  • Provision a staging environment
  • Deploy my app to the staging environment
  • Write a comment to the pull request with the url of the newly provisioned slot.

Because I’m using Azure App Service, I can totally use deployment slots for the staging environments. Since there are no tasks that let me dynamically create slots, I’ll just use the Azure CLI to dynamically create my slot. Once it is created, I can use a normal App Service deploy task to deploy my app to the slot. And to write a comment to the pull request, I’ll use the Azure DevOps REST API.

Creating a Task to Provision the Staging Slot

To provision a new staging slot, I’ll use the Bash Script task and from there, use the Azure CLI to provision my slot.

I also want this task to run only if all the previous tasks were successful and the reason for this build is a pull request. To do this, I drag a Bash Script Task to the end and I set the Control Option > Run this task to

Custom conditions

and I set Control Option > Custom condition to

and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))

Control Options Settings

Next, let’s give this task a better name

Create CI Staging Slot For PR

agile azure & cloud ci/cd devops git & version control

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Multi-cloud Spending: 8 Tips To Lower Cost

Mismanagement of multi-cloud expense costs an arm and leg to business and its management has become a major pain point. Here we break down some crucial tips to take some of the management challenges off your plate and help you optimize your cloud spend.

Kick-Off Your Agile Team With A Working Agreement Workshop

In this article, I will discuss how I adapted Avi’s original canvas to the needs of the teams I was coaching, elaborate on the different elements of a working agreement, and share with you a step-by-step guide to facilitating collaborative working agreement development workshops.

Serverless CI/CD on the AWS Cloud

To set up a serverless CI/CD pipeline in your AWS environments, there are several key services that you need to use. Find out more here.

How to Extend your DevOps Strategy For Success in the Cloud?

DevOps and Cloud computing are joined at the hip, now that fact is well appreciated by the organizations that engaged in SaaS cloud and developed applications in the Cloud. During the COVID crisis period, most of the organizations have started using cloud computing services and implementing a cloud-first strategy to establish their remote operations. Similarly, the extended DevOps strategy will make the development process more agile with automated test cases.

CI/CD Pipeline with Azure DevOps for Data Science project.

CI/CD Pipeline with Azure DevOps for Data Science project.: A CI/CD Pipeline implementation, or Continuous Integration/Continuous Deployment for Data science.