loading...

React js ➡ Azure DevOps ➡ Azure App Service

jakob_vdh profile image Jakob von der Haar ・3 min read

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.

Screenshot of the possible repository services

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).

Screenshot of the menu to choose your single 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.

Screenshot of the automatically generated azure-pipelines Yaml file

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.

Screenshot of the edited azure-pipelines Yaml to deploy to Azure file

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.

Screenshot of the task list provided by Azure DevOps

Screenshot of deploy to Azure task configuration using a GUI

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.

Screenshot of an automatically triggered build

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

Posted on by:

jakob_vdh profile

Jakob von der Haar

@jakob_vdh

Microsoft Student Partner

Discussion

markdown guide