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