This blog post is not<\/strong> about Static Web Apps<\/a>. It’s about the amazing pull request workflow that you get right out of the box with Static Web Apps<\/a>.<\/p>\n Static Web Apps<\/a> use GitHub Actions<\/a> for CI\/CD and when a user issues a pull request the following happens:<\/p>\n When the pull request is closed<\/p>\n Ok, HOW COOL IS THAT!!!!<\/p>\n That’s great for Static Web Apps<\/a>, but I have a bunch of apps in Azure App Service<\/a>. The code is in Azure Repos<\/a> and the CI\/CD pipeline uses Azure Pipelines<\/a>. I want that Static Web App pull request workflow for my apps in Azure App Service<\/a>.<\/p>\n 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<\/strong>.<\/p>\n For this post, I’ll use a repo that holds a .NET Core<\/a> web app that is hosted in Azure App Service<\/a>. Currently my CI build looks like this:<\/p>\n Nothing magic about it. This is just your standard .NET Core<\/a> build. Any time code is checked into the main branch, this build kicks off.<\/p>\n I need this build to kick off any time someone issues a pull request. This can be set in the branch policies<\/a> for this repository. This doc<\/a> will walk you through the steps to do this.<\/p>\n After following the above steps, every time a pull request is issued, my CI build is triggered.<\/p>\n If all the build tasks are successful and if the build trigger is because of a pull request, I want the following to happen:<\/p>\n Because I’m using Azure App Service<\/a>, I can totally use deployment slots<\/a> 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<\/a>. 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<\/a>.<\/p>\n To provision a new staging slot, I’ll use the Bash Script task and from there, use the Azure CLI<\/a> to provision my slot.<\/p>\n 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<\/p>\n and I set Control Option > Custom condition to<\/p>\n Next, let’s give this task a better name<\/p>\n and make sure Inline is selected<\/p>\n In the Script text box, that’s where I will drop in my bash script which calls the Azure CLI<\/a> to provision the new slot.<\/p>\n To do that, I will need some pipeline variables. First, to use the Azure CLI<\/a>, I will need to login using an Azure Service Principal<\/a>. Follow the link<\/a> to create a service principal. Next, to create a slot, I will need the app service name as well as the resource group the app service is in.<\/p>\n I add these variables to the variable section of my pipeline. For my service principal password, I encrypt it using the lock function. I usually store all my secrets in key vault, but to simplify this example, I’ll just dump all my variables in the variable section of the pipeline.<\/p>\n Finally, for the script to provisions a new deployment slot, I need to do the following:<\/p>\n Because I can have multiple pull request happening at the same time and each slot must have a unique slot name, I’ll use the pull request ID as part of my slot name. I’ll name my slot<\/p>\n In the Script text field, I add the following script:<\/p>\n To deploy my app to the slot, I just use a standard App Service deploy task. Like the previous task, I only want this task to run if all my previous tasks were successful and this build is triggered by a pull request. So I set Control Option > Run this task to<\/p>\n and I set Control Option > Custom condition to<\/p>\n Next, I give this task a nicer name and set the parameters so I’m deploying to the slot. Everything here is pretty standard except the slot name is dynamic based off of the pull request ID. So for the Slot text field, I put in<\/p>\n To write the URL of the staging slot as a pull request comment, I’ll again use a bash script task to call the Azure DevOps REST API<\/a>. This means I’ll need to use an Azure DevOps PAT<\/a>. I create a PAT using this<\/a>, and then I stick it into the variables section of the pipeline and encrypt it.<\/p>\n Next, I drag a bash task to the end and again, this task should only run if all the previous tasks were successful and the build was triggered by a pull request. So I set Control Option > Run this task to<\/p>\n and I set Control Option > Custom condition to<\/p>\n Next, I give this task a better name<\/p>\n select<\/p>\n and in the Script textbox, I add the bash script which uses the Azure DevOps Rest API to add the comment to the pull request.<\/p>\n I need to add one final step. When the pull request is closed and the code is merged to master, I need to clean up my staging environment and delete the slot<\/a> for the specific pull request.<\/p>\n Azure DevOps doesn’t have any easy triggers in the pipeline for when you close a pull request. You could do this with Azure DevOps Web Hooks<\/a>. But this would require me to use something like Azure Functions<\/a> to do the pull request cleanup\/delete slot logic. I really wanted to keep everything within my pipelines so I’m just triggering this task based on the version control merge message. Whenever a pull request is merged, the merge message will start with I drag a bash task onto the board and I only want this task to run if all the previous tasks were successful and if the commit message starts wtih and I set Control Option > Custom condition to<\/p>\n I give this task a better name, make sure inline is selected and in the Script text box, I add the bash script which uses the Azure CLI to delete the right staging slot<\/a>.<\/p>\n Now, my CI build does everything the Static Web App<\/a> pull request workflow does and it looks like this:<\/p>\n Yes, you can do all this using YML pipelines. In fact, that’s how I would normally do this. However, that classic editor sure looks nicer than a wall of yml so I figured I’d start with the classic editor. Here is my YML<\/p>\n Secrets should not be stored in the YML so my Azure DevOps PAT<\/a> and my password for my Azure Service Principal<\/a> are saved as encrypted variables in the pipeline.<\/p>\n Secret variables are not automatically decrypted in YML pipelines and need to be passed to your YML with My CI pipeline now perfectly emulates the Static Web Apps<\/a> pull request workflow. When a pull request happens, my CI build will trigger and the following will occur<\/p>\n When this pull request is closed out and the changes merged to master, this build will trigger and the following will occure<\/p>\n To figure out how to do this, I used the same strategy I use for any pipeline I craft. I ask myself, “How would I do this from the command line?” If there are pre-built tasks that do what I need, I use those. And if there are not, I use a bash or powershell task to execute the command line calls. For this example to implement the Static Web Apps<\/a> pull request workflow from the command line, I needed to use the Azure CLI<\/a> and the Azure DevOps REST API<\/a>. I then sat down at a command prompt and figured out the exact commands to call, and then copied those into a bash task.<\/p>\n Don’t forget about the edge cases. What happens when multiple pull requests happen at once? What happens if tasks in the workflow fail? What happens when a pull request merge happens to the main branch and the staging environment doesn’t exist? Things like that.But with a little care, your pipeline will be able to handle all situations.<\/p>\n Static Web Apps<\/a><\/p>\n GitHub Actions<\/a><\/p>\n Azure App Service<\/a><\/p>\n Azure Repos<\/a><\/p>\n Azure Pipelines<\/a><\/p>\n .NET Core<\/a><\/p>\n Branch Policies<\/a><\/p>\n Staging with Deployment Slots<\/a><\/p>\n Azure CLI<\/a><\/p>\n Login to Azure<\/a><\/p>\n Creating Slots with Azure CLI<\/a><\/p>\n Azure Service Principal<\/a><\/p>\n Pipeline Built In Variables<\/a><\/p>\n Azure DevOps REST API<\/a><\/p>\n Write Comment To Pull Request<\/a><\/p>\n Azure DevOps PAT<\/a><\/p>\n Azure DevOps Web Hooks<\/a><\/p>\n Azure Functions<\/a><\/p>\n\n
\n
Making this PR workflow for Azure App Service, Azure Repos and Azure Pipelines<\/h2>\n
![\"Initial](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/bb923c182472586ca0fd64da82f6e6da7a0d99510039b9f658736c1168968ed6-1.png\")
<\/a><\/p>\nEnabling Build For Every Pull Request<\/h2>\n
Adding Steps for a Pull Request<\/h2>\n
\n
Creating a Task to Provision the Staging Slot<\/h3>\n
Custom conditions\n<\/code><\/pre>\nand(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n<\/code><\/pre>\n![\"Control](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/cce9f2d2fda9bd1df06573ff9979f3238ec5e7816f15269d29214e5643fe2be2.png\")
<\/p>\nCreate CI Staging Slot For PR\n<\/code><\/pre>\n![\"Inline](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/0cd7501b662408a549d17c87f76f9264b3858a68365ea04db5966a69e4a24303.png\")
<\/a><\/p>\n![\"VariablesInPipeline\"](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/690d9662f1ea9b88bfe9477d34a6e526f30e49f7e6f32b8136e048c4927d9759.png\")
<\/a><\/p>\n\n
staging-pr-$(System.PullRequest.PullRequestId)\n<\/code><\/pre>\nSystem.PullRequest.PullRequestId<\/code> is a built in pipeline variable<\/a><\/p>\n # Login to Azure using service principal\n echo 'Logging into Azure with service principal...'\n az login \\\n --service-principal \\\n --username $(servicePrincipal.name) \\\n --tenant $(servicePrincipal.tenant) \\\n --password $(servicePrincipal.password)\n echo 'Logged into Azure'\n echo ''\n\n # Create staging slot for PR\n echo 'Creating staging slot for PR...'\n az webapp deployment slot create \\\n --name $(webApp.name) \\\n --resource-group $(webApp.resourceGroup) \\\n --slot staging-pr-$(System.PullRequest.PullRequestId)\n echo \"Created staging slot for PR \" $(System.PullRequest.PullRequestId)\n<\/code><\/pre>\n![\"Create](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/2ec7941f7a3b8f4228e452e5531a6bfc810409157183a6baabfc68eba101239e.png\")
<\/a><\/p>\nDeploy App To The Newly Provisioned Slot<\/h3>\n
Custom conditions\n<\/code><\/pre>\nand(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n<\/code><\/pre>\n![\"Control](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/f31326505826ff8555eaba9c96d283fbdd82f400667c6f6b69490e7cb9d83554.png\")
<\/a><\/p>\nstaging-pr-$(System.PullRequest.PullRequestId)\n<\/code><\/pre>\n![\"Slot](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/f2ed80cc652c6b58518de3873820a7376722641906d3544c160d95209d5dde7b.png\")
<\/a><\/p>\nWrite the URL of the Staging Slot as a PR Comment<\/h3>\n
![\"Pipeline](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/2ece48164cab18b898dfa16e474e2f215a0d0b64d8238e7a822302ed4530a9cd.png\")
<\/a><\/p>\nCustom conditions\n<\/code><\/pre>\nand(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n<\/code><\/pre>\n![\"Control](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/7d3b6c8ad30759426b3180dfc11ea63d76071237cb81a94510e721b46c301ef1.png\")
<\/a><\/p>\nAdd staging URL to PR Comment\n<\/code><\/pre>\nInline\n<\/code><\/pre>\n# Add PR comment with link to staging\necho \"Adding PR comment with link to staging environment...\"\nmessage=\"Created staging environment for PR - https:\/\/$(webApp.name)-staging-pr-\"$(System.PullRequest.PullRequestId)\".azurewebsites.net\/\"\necho \"message: $message\"\n\n# post message to PR using azure devops rest api\ncurl -i --user :$(azureDevOpsPAT) -H \"Content-Type: application\/json\" -H \"Accept: aon\" -X POST -d '{\"comments\": [{ \"parentCommentId\":0, \"content\": \"'\"$message\"'\", \"commentType\": 1}], \"status\": 1}' $(System.TeamFoundationCollectionUri)\/$(System.TeamProject)\/_apis\/git\/repositories\/$(Build.Repository.ID)\/pullRequests\/$(System.PullRequest.PullRequestId)\/threads?api-version=6.1-preview.1\n\necho \"Done adding PR comment with link to staging environment\"\n<\/code><\/pre>\n![\"Inline](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/179f146782b38ace5612a55adebfb4566db5ce0fb4e9c51ca55483f10f9eea68.png\")
<\/a><\/p>\nAdd Step For When PR Closes<\/h2>\n
Merged PR xxx<\/code> where xxx is the pull request ID.<\/p>\nMerged PR<\/code>. So I set Control Option > Run this task to<\/p>\nCustom conditions\n<\/code><\/pre>\nand(succeeded(), startsWith(variables['Build.SourceVersionMessage'], 'Merged PR '))\n<\/code><\/pre>\n![\"Control](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/ad6e831e183b98ed36a8b7cd9c1e32103a27e3796a356788d33a3a6f2c04fd37.png\")
<\/a><\/p>\n# PR Closed, changes merged to main\necho 'PR close, changes merged to main'\n\n# get the source version message\nsourceVersionMessage=\"$(Build.SourceVersionMessage)\"\necho 'build source version message: ' $sourceVersionMessage\n\n# parse the PR number from the source version message\nprNumber=$(echo $sourceVersionMessage| sed -r 's\/^([^.]+).*$\/\\1\/; s\/^[^0-9]*([0-9]+).*$\/\\1\/')\necho 'prNumber: ' $prNumber\n\n# Login to Azure using service principal\necho 'Logging into Azure with service principal...'\naz login \\\n --service-principal \\\n --username $(servicePrincipal.name) \\\n --tenant $(servicePrincipal.tenant) \\\n --password $SERVICE_PRINCIPAL_PASSWORD\necho 'Logged into Azure'\necho ''\n\n# Delete PR staging slot\necho 'Deleting staging slot for PR ' $prNumber '...'\naz webapp deployment slot delete \\\n --name $(webApp.name) \\\n --resource-group $(webApp.resourceGroup) \\\n --slot staging-pr-$prNumber\necho 'Deleted slot for PR ' $prNumber\n<\/code><\/pre>\nComplete CI Pipeline<\/h2>\n
![\"Complete](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/0c58c39bc1c07beef35e65fd0e5deebb0a70f5b969d7730dfcb5e8f7af7267be.png\")
<\/a><\/p>\nWhat about YML pipelines?<\/h2>\n
trigger:\n- master\n\npool:\n vmImage: 'ubuntu-latest'\n\nvariables:\n servicePrincipal.name: 'http:\/\/AbelDeployDemoBackupPrincipal'\n servicePrincipal.tenant: '72f988bf-86f1-41af-91ab-2d7cd011db47'\n webApp.name: 'PRWorkflowBlogAppService'\n webApp.resourceGroup: 'PRWorkflowBlog'\n BuildConfiguration: 'release'\n\nsteps:\n\n# Use .NET core 5 sdk\n- task: UseDotNet@2\n displayName: 'Use .NET Core 5 SDK'\n inputs:\n version: 5.x\n includePreviewVersions: true\n\n# Build .net core project \n- task: DotNetCoreCLI@2\n displayName: Build\n inputs:\n projects: '$(Parameters.RestoreBuildProjects)'\n arguments: '--configuration $(BuildConfiguration)'\n\n# Restore project\n- task: DotNetCoreCLI@2\n displayName: Build\n inputs:\n projects: '$(Parameters.RestoreBuildProjects)'\n arguments: '--configuration $(BuildConfiguration)'\n\n# Run unit tests\n- task: DotNetCoreCLI@2\n displayName: Test\n inputs:\n command: test\n projects: '$(Parameters.TestProjects)'\n arguments: '--configuration $(BuildConfiguration)'\n\n# Publish .net core app to staging directory\n- task: DotNetCoreCLI@2\n displayName: Publish\n inputs:\n command: publish\n publishWebProjects: True\n arguments: '-r win-x64 --self-contained true --configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory)'\n\n# Publish build bits as build artifact\n- task: PublishBuildArtifacts@1\n displayName: 'Publish Artifact'\n inputs:\n PathtoPublish: '$(build.artifactstagingdirectory)'\n condition: succeededOrFailed()\n\n# Create CI Staging Slot for PR\n- bash: |\n # Login to Azure using service principal\n echo 'Logging into Azure with service principal...'\n az login \\\n --service-principal \\\n --username $(servicePrincipal.name) \\\n --tenant $(servicePrincipal.tenant) \\\n --password $SERVICE_PRINCIPAL_PASSWORD\n echo 'Logged into Azure'\n echo ''\n\n # Create staging slot for PR\n echo 'Creating staging slot for PR...'\n az webapp deployment slot create \\\n --name $(webApp.name) \\\n --resource-group $(webApp.resourceGroup) \\\n --slot staging-pr-$(System.PullRequest.PullRequestId)\n echo \"Created staging slot for PR \" $(System.PullRequest.PullRequestId)\n\n displayName: 'Create CI Staging Slot For PR'\n condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n env:\n SERVICE_PRINCIPAL_PASSWORD: $(servicePrincipal.password)\n\n# Add staging URL to PR comment\n- bash: |\n # Add PR comment with link to staging\n echo \"Adding PR comment with link to staging environment...\"\n message=\"Created staging environment for PR - https:\/\/$(webApp.name)-staging-pr-\"$(System.PullRequest.PullRequestId)\".azurewebsites.net\/\"\n echo \"message: $message\"\n\n # post message to PR using azure devops rest api\n curl -i --user :$AZURE_DEVOPS_PAT -H \"Content-Type: application\/json\" -H \"Accept: aon\" -X POST -d '{\"comments\": [{ \"parentCommentId\":0, \"content\": \"'\"$message\"'\", \"commentType\": 1}], \"status\": 1}' $(System.TeamFoundationCollectionUri)\/$(System.TeamProject)\/_apis\/git\/repositories\/$(Build.Repository.ID)\/pullRequests\/$(System.PullRequest.PullRequestId)\/threads?api-version=6.1-preview.1\n\n echo \"Done adding PR comment with link to staging environment\"\n displayName: 'Add staging URL to PR Comment'\n condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n env:\n AZURE_DEVOPS_PAT: $(azureDevOpsPAT)\n\n# Deploy build to staging environment\n- task: AzureRmWebAppDeployment@4\n displayName: 'Deploy to PR Staging'\n inputs:\n ConnectionType: 'AzureRM'\n azureSubscription: 'AbelDemosSubscription(2f42eaaf-1883-462f-a04f-a1d88fa6fd44)'\n appType: 'webApp'\n WebAppName: 'PRWorkflowBlogAppService'\n deployToSlotOrASE: true\n ResourceGroupName: 'PRWorkflowBlog'\n SlotName: 'staging-pr-$(System.PullRequest.PullRequestId)'\n packageForLinux: '$(System.DefaultWorkingDirectory)\/**\/netlandingpage.zip'\n enableCustomDeployment: true\n DeploymentType: 'webDeploy'\n RemoveAdditionalFilesFlag: true\n ExcludeFilesFromAppDataFlag: false\n condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))\n\n\n\n\n# Delete staging slot\n- bash: |\n # PR Closed, changes merged to main\n echo 'PR close, changes merged to main'\n\n # get the source version message\n sourceVersionMessage=\"$(Build.SourceVersionMessage)\"\n echo 'build source version message: ' $sourceVersionMessage\n\n # parse the PR number from the source version message\n prNumber=$(echo $sourceVersionMessage| sed -r 's\/^([^.]+).*$\/\\1\/; s\/^[^0-9]*([0-9]+).*$\/\\1\/')\n echo 'prNumber: ' $prNumber\n\n # Login to Azure using service principal\n echo 'Logging into Azure with service principal...'\n az login \\\n --service-principal \\\n --username $(servicePrincipal.name) \\\n --tenant $(servicePrincipal.tenant) \\\n --password $SERVICE_PRINCIPAL_PASSWORD\n echo 'Logged into Azure'\n echo ''\n\n # Delete PR staging slot\n echo 'Deleting staging slot for PR ' $prNumber '...'\n az webapp deployment slot delete \\\n --name $(webApp.name) \\\n --resource-group $(webApp.resourceGroup) \\\n --slot staging-pr-$prNumber\n echo 'Deleted slot for PR ' $prNumber\n displayName: 'Delete Staging Slot For PR'\n condition: and(succeeded(), startsWith(variables['Build.SourceVersionMessage'], 'Merged PR '))\n env:\n SERVICE_PRINCIPAL_PASSWORD: $(servicePrincipal.password)\n<\/code><\/pre>\n![\"Secret](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/ad6c5b141aea565a8f9490d2aaf0a9562a0e66ad7404831453718d965199c6ef.png\")
<\/a><\/p>\nenv:<\/code>. This<\/a> shows how to do it.<\/p>\n![\"Using](\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/8ee25357a5b433e26fdf86bed613d06701856c75c2e2e21aaaba26e279c73e4f.png\")
<\/a><\/p>\nConclusion<\/h2>\n
\n
\n
Related Links<\/h2>\n