In one of my recent posts – Configure a build pipeline for ReactJS in Azure DevOps, I described how to setup a build pipeline for React JS in Azure DevOps. In the past few weeks, there has been changes to Azure App Service, so there are a few changes to configurations you must make.

One fun thing here is – we will be using the Unified YAML based pipeline and throwing in some sauce – ready to get started?

What you need

Let’s get started

Step 1

First is to have your React App setup – Refer to earlier.

Step 2

Get your code into source control – I have mine in Azure DevOps

Step 3

Let’s start having fun now.

  • Login to Azure DevOps (dev.azure.com)
  • Navigate to Pipelines
  • Create a new Pipeline
  • Select your repository source – in my case, I am using Azure Repos Git YAML
  • Select your ReactJS Project
  • Use Starter pipeline

Some code will be YAML code will be pre-populated for you. Feel free to delete them.

Step 4.0

I will be deploying the application to Azure. I am not covering ARM Templates in this post, so I have gone ahead to create an Azure Web App (Linux – Runtime – PHP 7.3). I could have used Node LTS but it would require some configurations which I don’t want to go into for simplicity sake.

Step 4.1

Let’s now go YAML by YAML

Please note – INDENTING is a thing in YAML, so take good note. You can get the full code in my GitHub Repo.

First is to set your build trigger, what this means is the branch to watch for updates to initiate the pipeline. I’m setting this to master.

trigger:
- master

Stages exist to simplify build and release management. So, I can have my build and release stages as I have in this sample.

First is to build my project – for this I set the build stage, give it a display name (for cleanliness and sanity sake).

stages:
  - stage: build
    displayName: 'master-branch-build'

Next is to set up my build agent job. I am using Ubuntu – the latest version

And I define my build steps, first is to do npm install, then run build. After build, I copy the generated file to the artifacts staging folder in Azure DevOps. The publish build artifact task is optional – you use this if you would like to download the build result folder or do something with it much later so I keep it here just for ref.

#build job
    jobs:
      - job: build
        displayName: 'master-branch-build'
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - task: Npm@1
            displayName: 'npm install'

          - task: Npm@1
            displayName: 'npm run build'
            inputs:
              command: custom
              customCommand: 'run build'

          - task: CopyFiles@2
            displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
            inputs:
              SourceFolder: '$(System.DefaultWorkingDirectory)/build'
              TargetFolder: '$(Build.ArtifactStagingDirectory)'

          - task: PublishBuildArtifacts@1
            displayName: 'Publish Artifact: drop'

Note that in the pipeline, I am not running any tests.

After a successful build, next step is to release. So, I define my release stage as follows.

 - stage: release
    displayName: 'dev-env-release'

I then define the release job config and steps

#release job
    jobs:
      - job: release
        displayName: 'dev-env-release'
        pool:
              vmImage: 'ubuntu-latest'

Note the <> tags in the code below, you will need to get the values from Azure and substitute them in here.

 steps:
         - task: AzureRmWebAppDeployment@4
           inputs:
            ConnectionType: 'AzureRM'
            azureSubscription: <subscriptionNameHere>(<subscriptionIDHere>)'
            appType: 'webAppLinux'
            WebAppName: '<appNameHere>'
            packageForLinux: '$(Build.ArtifactStagingDirectory)'
            RuntimeStack: 'PHP|7.3'

Full YAML Code can be found here.

Step 6

After all has been said and done, it’s time to put our pipeline to work.

Save your pipeline.

You will then have to decide if you want to save this pipeline in the master (or whatever branch you’re on) or create a new branch and create a pull request. I’ll use my master branch as is.

Click Save and run

Wait for the pipeline to run.

Side note: If you go to your repos, you should find your YAML file waiting there

Let’s now go see our pipeline tasks. There goes below.

Clicking into it. (Now I am using a live project with the same steps)

And visiting the website, we’ll see our code working.

As you see below, there have been updates to the repo and at each time, a build and release was triggered using the coming-soon branch.

I hope this was worth your read.