Configure a build pipeline for ReactJS in Azure DevOps
I love to have full control of my code deployment and I love the classic way of doing deployments in Azure DevOps while keeping up to date with the new YAML spec for build pipelines.
One sweet thing about Azure DevOps is that it gives me that full control I need to make things happens according to my specs.
Just yesterday, configured a single build pipeline for a huge project (1 solutions, many projects) setting different agent jobs and startup projects using MSBuild Arguments to set my target project per agent job and then publishing each of the artifacts to configure my release pipeline picking each artifact and releasing on-demand.
In this short article, I want to show how I configured my build pipeline for a ReactJS application – yes there is a NodeJS with ReactJS template in there. But because I have a .NET background, I kinda like to have that same feeling. So here we go.
For this, you need an Azure DevOps account (go to dev.azure.com) to follow through, and yes, you can have your source code In a repo of your choice. I decided to have mine in Azure DevOps.
After setting up all git related things and binding your remotes, go to the Pipelines area of your Azure DevOps Project. By default, it goes to the Builds pipeline sub-section.
After clicking on New pipeline, select, Azure Repos Git with the YAML tag – here you can connect to any other repo source you have).
Set the repo to get the code from.
What happens next is that Azure DevOps analyses your code to detect what could be best.
I select the starter pipeline template.
Then copy and paste this overwriting the existing code
name: Hosted Ubuntu 1604
– task: Npm@1
displayName: ‘npm install’
– task: Npm@1
displayName: ‘npm run build’
customCommand: ‘run build’
– task: CopyFiles@2
displayName: ‘Copy Files to: $(Build.ArtifactStagingDirectory)’
– task: PublishBuildArtifacts@1
displayName: ‘Publish Artifact: drop’
Then click on Save and Run
Apply your commit message and decide what branch to put it in.
I will use the default options. This goes on and starts the first build
After some seconds (or minutes), your build should complete.
You can check the content of the deployment ready folder by clicking on Artifacts>drop
Next step would be to configure your release pipeline.
I hope this post helps you.