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

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

After just a few basics you will know the Static Web Application PR Workflow for Azure App Service using Azure DevOps Pt 2

In part 1 (Static Web App PR Workflow for Azure App Service), I walked you you through how to set up that sweet pull request workflow for Static Web Apps for your app if your app was:

But what if your code is GitHub and your CI/CD Pipeline is using Azure Pipelines? Easy peasy. Just continue reading and I’ll show you what to do.

Again, like that first blog post of mine, I’ll show the classic editor first because it’s prettier than a wall of YAML. But if you want the TLDR version, I’ll post the YAML for my CI pipeline at the end of the blog post.

What Needs To Change?

Luckily, not much has to change. All you need to do is make two small tweaks.

  • Update the task, Add Staging URL to PR Comment
  • Decide what you want to happen with pull requests from forks.

The first tweak is simple enough. Instead of using the Azure DevOps REST API to add the staging URL to the PR comment, we will now use the GitHub REST API for Pull Requests.

For the second tweak, there are some security concerns to think about and a couple of different ways to work through them.

Changing the task, Add Staging URL to PR Comment

Last time, by the time we were done, our CI pipeline looked like this with a task named Add Staging URL to PR Comment:

Our inline code for that task looked like this:

This script uses the Azure DevOps REST API to dynamically add a message with the staging url to the pull request comment in Azure Repos.

Since our code is in GitHub, we need to change the script so it uses the GitHub REST API for Pull Requests. In order for that to work, GitHub recommends using an OAuth2 token sent in the authorization header. The easiest way to do that is to create and use a GitHub personal access token (PAT).

azure & cloud devops

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

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

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.

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.

AWS DevOps vs Azure DevOps | Difference Between AWS Devops And Azure Devops

This Edureka "AWS DevOps vs Azure DevOps" video will give a detailed comparison of how AWS and Azure fare in handling and supporting DevOps approach on the respective cloud platforms along with latest trends and numbers in the domain.

Building an Azure DevOps-based ARM CI/CD for Azure Cloud

Learn how to building an Azure DevOps-based ARM CI/CD for Azure Cloud. This blog series focuses on presenting complex DevOps projects as simple and approachable via plain language and lots of pictures.

Create, Build, Deploy and Configure an Azure Function with Azure DevOps and Azure CLI

How to create, build, deploy and configure an Azure Function using Azure DevOps, Azure CLI and Powershell.