React js ➡ Azure DevOps ➡ Azure App Service

How to use Azure DevOps to build and deploy your React js Web App to Azure

This Post guides you step by step through a simple process of using Azure DevOps to deploy a React js Web App (or any other Node.js based Web App) to an Azure Web App Service.

✅ Requirements:

1. Azure Account (If you are a student, click here to find out how to get free Azure Ressources)
2. A running Azure Web App Service
3. A React Web App
4. An Azure DevOps Service Account

Build and Deployment

In the Azure DevOps portal go to the Builds tab of the Pipelines page. There you will have an overview of your previous builds and will later on also find the build status of your React Web App builds.

Create a new build pipeline and choose the location/service of your web app's repository. You will have to authorize the repository access if you are not using Azure Repository and do not have authorized your access before.

Then select the repository of your web app from the list (in the screenshot I am using Azure repositories, so the look of this menu might vary depending on your repository).

After choosing the repository Azure DevOps is trying to automatically create a Yaml file. In our case, it first defines which kind of VM-Pool we will be using to build our web app. Then it defines the steps of our build starting with installing Node.js and going on with installing the dependencies of our web app (npm install) and then running the build command of our web app (npm run build).
In end, the standard output is set to archiving the working directory or in other words our build.

Our goal is to also directly trigger a deployment to our Azure Web App Service, so we need to change the last task to:

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: <YourWebAppNameHere>'
  inputs:
    azureSubscription: <YourAzureSubscriptionId>
    WebAppName: <YourWebAppNameHere>
    Package: '$(System.DefaultWorkingDirectory)/build'

You still need to put in your Azure Subscription Id and the name of your web app, so Azure DevOps knows where you want to deploy the build. Moreover, we define in the last line where our build is located, to make sure only our final build is deployed.

The Yaml file you just created will be added to the repository as azure-pipelines.yml. So if you need to configure additional steps like tests you just have to edit the Yaml file in your repository. Furthermore, if you are editing the file online in Azure DevOps it will show you a list of tasks to add in which you also are able to configure each task using a UI.

Of course, you could (and for bigger projects should) explicitly divide the build and deployment.
Now every time you merge new commits into your production branch, a new build will be triggered.

And that is everything you need to do to have a basic build and deployment process running, have fun! 🐱‍💻