You might have developed SharePoint Framework (SPFx) apps before, but have you ever looked to automate build pipeline for your app so that your builds, tests and releases could all be automated? If so, you are at the right place. In this article. I have tried to gather all the steps that you would have to go through to setup basic build automation process for your SPFx app.
Prerequisites:
In order to follow the steps in this article, you will need to have following things already setup:
- Azure DevOps services account. If not having this account, then you can opt for one from here.
- Azure DevOps project
- Working SPFx solution
- Azure DevOps repo populated with source code for your SPFx solution
Steps to automate the build process with YAML:
- Open Azure DevOps project from https://dev.azure.com/
- Make sure you have updated scripts section in package.json of your source code and added package-ship and build-ship as shown below:
- Make sure that your source code is already uploaded to Azure DevOps project’s repository which is named as spfx for example. By clicking on Repos, you should be able to see your source code and commit history.
- Click on Pipelines -> Builds -> + New -> New build pipeline. In the new yaml based editor, select the repo which hosts your source code, in our case you need to click Azure Repos Git
- In Select step, you will be provided with all the available repos. You need to select your repo namely spfx. As soon as you select your repo, azure will start analyzing your repository to suggest you compatible template.
- Azure will suggest multiple compatible options, you need to select Node.js under Configure section which will make you move forward to Review section where you will be presented with azure-pipelines.yml file.
- Replace everything from “- script: |” line 18 in azure-pipelines.yml file
with following lines such that azure-pipelines.yml file will look like below screenshot:
- We have now completed the yaml build. You may click Save from Save and run dropdown to save this yaml or you may choose to click Save and run to save and run the build immediately. Please note that save operation will commit azure-pipelines.yml to spfx repository for which you will need to enter required commit message and you may choose to either commit directly to master branch or you may create a new branch for this commit. For now, you may choose default options and click Save button to commit yaml build file.
- Click Queue button to queue your build so that you can check if our yaml build works fine and creates required artifacts
- Clicking queue button opens following dialog where you need to select the master branch assuming you have latest working code committed in that branch then select Run to kick-off the build process online.
- Build process will find available build agent in azure and perform tasks defined in azure-pipelines.yml file on the available build agent.
- If everything was setup correctly, then you should see all success messages
- If you click Artifacts button then you will see following artifacts generated by the successful build process in drop folder as defined in our yaml build file:
Thanks for your patience. Hopefully this article helped you create your yaml build and run it with Azure DevOps. Do post your comments and let me know in case you have any queries. I will soon post next article in this series where I will take this build to next level and discuss creation of release and deployment stages.
