January 20, 2019

/

Building Create React App with Azure Devops YAML

Building Create React App with Azure Devops YAML

In 2018 Microsoft re-launched VSTS as Azure Devops with a new UI and a bunch of new features. The best new feature in my opinion is that you can create your build configurations in code using YAML. Visual editors can be great but I prefer to put my build definition directly in my repo and have full control over what happens.

In this article I wanted to give a simple and easy guide to how to build a React app that was created using Create React App using the new YAML configuration. I have created a Github repo here that has multiple examples in it which you can look to as a reference.

Note: One thing you might notice is I have multiple .yml files in one repository. If you would like to know how to do that see my other article Using multiple YAML build definitions in Azure Devops.

Imagine you have the following project structure:

src/
   react/ # React app here
azure-pipelines.yml

YAML build definitions make it really simple to run a build, and create a production package while keeping all of your build definition along side the code you are building. In this tutorial I’m going to walk through the steps I’ve used to build a Create React App into a package for deployment.

Examining our YAML file

In my Azure Devops Examples repo there is a file react-pipeline.yml. Don’t worry if you don’t understand what is going on, I am going to walkthrough each step below.

Defining the virtual machine image

The first section of the file selects the VM image that you want to run your build on. You can choose between the available images which includes Linux, Windows and MacOS:

# define the VM image I want to use for my build
pool:
  vmImage: 'Ubuntu 16.04'

Here I am using Ubuntu 16.04.

Defining build variables

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

In this React 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 can define both custom scripts to run as well as use all of the build-in tasks you can use in the GUI editor. You can also use “jobs” for more complex build see the documentation here if you are interested in learning more. For this simple build I am just going to use steps.

First you have the key word steps: which you use to define a number of tasks or scripts

# 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 build pipeline, or in a stage of a release pipeline. A task is simply a packaged script or procedure that has been abstracted with a set of inputs.

I have used the following tasks (click on the task to see its’ documentation):

  • 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: [email protected]
  inputs:
    sourceFolder: '$(buildOutputFolder)' 
    contents: '**/*' 
    targetFolder: '$(Build.ArtifactStagingDirectory)'
    cleanTargetFolder: true

## Archive the files into a zip file for publishing
- task: [email protected]
  inputs:
    rootFolderOrFile: $(Build.ArtifactStagingDirectory)
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    includeRootFolder: false

## Publish the zip file
- task: [email protected]
  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.

Creating a new 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.

Useful resources

Seth Reid

/

Building Create React App with Azure Devops YAML