Tech Talk: Use Azure DevOps to Automate SharePoint Framework Widgets
Sharing Our Expertise

Our consultants solve challenging business problems and love sharing their knowledge. Tap into our insights and put them to work for you.

Back to Blogs >>

Published by Mark Roden, on Thursday, January 3, 2019

During this PSC Tech Talk, Mark Roden gave a precursory run-through presentation for his SharePointFest Chicago 2018 presentation on the automation of build and deployment for SharePoint Framework widgets.

What is Azure DevOps?

Mark briefly walked through why Azure DevOps is PSC’s tool of choice for managing Agile projects. During an Agile project we build and deploy projects every two weeks so that progress can be demonstrated to clients and to ensure that the process is tested and working. Azure DevOps allows us to manage the whole process from:

  • Requirements Management (Backlog)
  • Project Management (Sprint Boards)
  • Code Source Control (git)
  • Automated Build and Deploy Pipelines
  • Automated Testing
  • Quality

Having a transparent, visible to client, quality control process generates trust. Not only in the development process, but also in the process for deployment. PSC uses Azure DevOps capabilities to run unit tests and where appropriate, load testing of projects in development. SharePoint Framework is no exception. We want to make sure that anything being developed does not break existing code or the user interface. Traditionally, testing would be done at the end of the project. In an Agile project, it is done every two weeks.

What is SharePoint Framework?

Traditionally, SharePoint on premises allowed an organization to customize the functionality using a “trusted-code” model whereby they were in complete control of the code going into their environment. When SharePoint online came out, this model was not available. Because of the shared-tenant model and because of a lack of access to modify SharePoint in a similar manner than on prem, Microsoft created the front-end-based SharePoint Framework model.

SharePoint online and therefore the SharePoint Framework (SPFx) are based on the React JavaScript framework. Developers create components which are directly integrated into the SharePoint online experience as if they were a first class member of the site.

Hello World

Mark’s presentation used the Hello World example provided by Microsoft as a simple demonstration of how to build and deploy an SPFx widget locally. Mark then walked through the process of adding the widget manually to his SharePoint online development tenant. Manually this process takes a couple of hours to set up and then about 10-15 minutes for every successful deployment.

Using Azure DevOps

Mark walked through the “build” and “deployment” processes provided by Microsoft in the Azure DevOps tool. The build process manager has the ability to create separate tasks which simulate the manual process of creating the deployable code as explained in the Hello World example. The build process is triggered by checking the code into the master branch.

Azure DevOps Agile

The deployment process is similar and automates the process of taking the code and moving it out to the SharePoint tenant. The deployment is triggered on the completion of a successful “build”.

Azure DevOps Agile

The Build and deployment process takes approximately five minutes and Mark showed the ability to track progress and see the console logging provided. Mark’s example also provided code coverage reports and testing dashboards.

Azure DevOps Agile


When working on agile projects PSC recommends using Azure DevOps as the management tool of choice and as Mark demonstrated in this Tech Talk, building, testing and deploying SharePoint Framework widgets can be automated.

Categories: Agile,DevOps,SPFx

Original Post:

Recommended For You
Executives don't want to be told they have to learn something new. Lead your stakeholders to Agile using concepts they already understand.
View More ...
As a consultant, selling Agile can be a tricky business. To many executives, “Agile” smells like time and materials, yet it can help deliver exac...
View More ...
Fibonacci numbers facilitate countable user stories of measurable effort that lead to project management with reliable completion dates and budge...
View More ...
Much has been written about Agile software development for engineers. In these occasional posts, I discuss Agile from the perspective of a busine...
View More ...