Building Create React App with Azure Devops YAML

Azure Devops is a set of tools that allow you to automate the building, testing and deploying of your applications. It supports defining how you build your application in as a pipeline file that lives along side your code rather than as manual steps done in a UI. While visual editors might be convenient at first it can quickly become very difficult to manage especially if you have a complex system with many people working on it.

This article is will guide you through how to build and package a React app using Azure Devops by defining a our build in a YAML file. The article doesn't go into deploying the package as that is going to differ depending on your host and I wanted to just focus on the React part for now.

You can explore the code directly by going to the Github repository for this article.

The project was created by running the following command to use the Create React App to create the base project:

npx create-react-app my-app

This leaves us with the following structure, including the azure-pipeline.yml file which we will look at next.

my-app/
  # React app here
azure-pipelines.yml

Examining the YAML file

In the repo mentioned about there is a file azure-pipelines.yml. AT first glance there is quite a lot going on in that file but don't work I'm going to explain each step below.

Defining the virtual machine image

The first section of the file selects the Virtual Machine (VM) image that the build will run on. You can choose between the available images on Azure Devops which includes Linux, Windows and MacOS:

pool:
  vmImage: "ubuntu-latest"

Here I am using Ubuntu "ubuntu-latest" since I don't mind which version exactly and would rather keep my build agent up to date.

Defining build variables

Azure Build Pipeline will give you a number of predefined build and release variables and you can also define your own. This means that you don't need to repeat the same strings and values throughout your build.

In this example I have defined projectFolder and buildOutputFolder for using later in the script:

# define variables to use during the build
variables:
  projectFolder: "src/react"
  buildOutputFolder: "src/react/build"

Defining the steps of the build

This is the main section of your build where you define the steps of your build. You can use custom scripts as well as use huge list of the build-in tasks which are available.

First you have the key word steps: which you can then follow up with any number of custom scripts or pre-defined tasks:

# define the steps of the build
steps:

Running custom scripts

First I have defined a script that will run the install and build for the React application:

## Run the npm install/build
- script: |
    pushd $(projectFolder) && npm install && popd
    pushd $(projectFolder) && npm run build && popd

Notice how I have used the PowerShell syntax $(projectFolder) to use variables I defined earlier. These scripts can be used to script any task and on Linux/MacOS will run using bash, while on Windows they will use cmd.exe.

Running build in tasks

A task is the building block for defining automation in a Azure Devops Pipeline. A talk is just a packaged set of scripts with inputs that allow you to carry out a task.

I have used the following tasks:

CopyFiles - to copy the files from the React build output into the staging directory.
ArchiveFiles to create a zip from the staging directory
PublishBuildArtifacts to publish a package from the build for later deployment.

This looks like this this in the YAML file:

## Copy the client to the staging directory
- task: CopyFiles@2
  inputs:
    sourceFolder: "$(buildOutputFolder)"
    contents: "**/*"
    targetFolder: "$(Build.ArtifactStagingDirectory)"
    cleanTargetFolder: true

## Archive the files into a zip file for publishing
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: $(Build.ArtifactStagingDirectory)
    archiveType: "zip"
    archiveFile: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"
    includeRootFolder: false

## Publish the zip file
- task: PublishBuildArtifacts@1
  inputs:
    pathtoPublish: "$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip"

Notice again how I am using the PowerShell syntax $(Build.ArtifactStagingDirectory)' to refer to a variable but this time I am using the predefined Build.ArtifactStagingDirectory variable.

What does the PublishBuildArtifacts step actually do?

I wanted to point out specifically that this step in the build file publishes the artifacts to the build itself within Azure Devops. It adds the specified zip file to the build for other pipelines to pick up. For example you would likely couple this build with a release pipeline to take the published release package through to production. This article is just focussing on the build part and that is why we stop with the PublishBuildArtifacts step

Creating your own build

For more information on how to create a new build pipeline see the documentation getting started guide.

Once you've done that you will just need to copy in the React Example YAML file to your azure-pipelines.yml and make sure that the projectFolder and buildOutputFolder are pointing to your react project.