How to deploy a React App for each PR in a different URL on Azure?

user_4529681 0
Viewed 140

I want to build and deploy a version of my React App for each pull request. The issue here is that I want to host on a different URL for each PR so I can test just what is going to be merged.

I managed to build and deploy on each PR but only on the same URL because I'm using the same App Service, so my guess is that I need to create a new App Service on my pipeline before deploying and then once merged, delete this App Service, but I'm not sure if this is possible at all.

So for example, let's say that I opened a PR, then I want to have this build deployed to https://my-react-app-BUILD_NUMBER_HERE.azure.com.br

Is this possible at all?

reactjs azure-devops azure
1 Answers

You can create slots for your app service.

So you have the original web app that and from that you:

az webapp deployment slot create --name my-react-app
                                 --resource-group some-rg
                                 --slot build-number
                                 --configuration-source qa

The benefits are:

  • You don't need to open a new webapp for each deployment so its centralized
  • Its cost effecient since its the same webapp and you can control the % of each slot and how much it gets of the traffic
  • You can switch with the main slot easily after you confirm that the PR is valid via CI/CD with az webapp deployment slot swap (if you have such flow)

After finishing it up you can delete it easily.

user_24902860
Related