Azure DevOps with SharePoint Framework Apps

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:

  1. Azure DevOps services account. If not having this account, then you can opt for one from here.
  2. Azure DevOps project
  3. Working SPFx solution
  4. Azure DevOps repo populated with source code for your SPFx solution

Steps to automate the build process with YAML:

  1. Open Azure DevOps project from https://dev.azure.com/
  2. Make sure you have updated scripts section in package.json of your source code and added package-ship and build-ship as shown below:build_package-json
  3. 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.
  4. 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 build_connect
  5. 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.
  6. 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.
  7. Replace everything from “- script: |”  line 18 in azure-pipelines.yml filebuild_yaml_to_be_replaced

    with following lines such that azure-pipelines.yml file will look like below screenshot:build_yaml

  8. 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.
  9. Click Queue button to queue your build so that you can check if our yaml build works fine and creates required artifactsbuild_queue
  10. 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_queue_run

  11. Build process will find available build agent in azure and perform tasks defined in azure-pipelines.yml file on the available build agent.build_queue_run_findagent
  12. If everything was setup correctly, then you should see all success messagesbuild_successful
  13. 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:build_artifacts

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.

Sponsored Links

Published by Amol

Amol Awasare aka 'Sam' is highly passionate SharePoint Consultant who has extensively worked on various SharePoint editions starting with MOSS 2007, SP 2010, SP 2013, SP Online. Amol has started this blog to share his knowledge and connect with like minded people to explore SharePoint in all aspects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create your website at WordPress.com
Get started
%d bloggers like this: