Using Azure DevOps to Build, Deploy and Test your SharePoint Framework solution

Kirti Prajapati

0 comments

This eBook takes you through how you would deploy SPFx code from GitHub or Visual Studio Git repositories to SharePoint or SharePoint Online using Azure DevOps pipelines. You really want the process and deployment defined in your development process along with other product releases.

The takeaway from this eBook would be what products are required and supported in this solution, as well as a quick walkthrough of the process itself.

In this article, I want to show you step-by-step how to use Azure DevOps to Build, Deploy, and Test your SharePoint Framework solution (A Web Part or Extensions).

This article also covers how you would deploy SPFx code from GitHub or Visual Studio Git repositories to SharePoint or SharePoint Online using Azure DevOps pipelines.

By following this article, you will learn what products are required and supported in the usage of Azure DevOps as well as a quick walkthrough on the process itself.

Topics to be covered in this article:

  • Overview – DevOps – An Overview of DevOps, which covers What is DevOps and a few key features of it along with how it is different from traditional IT and why it is required.
  • DevOps Life Cycle – It is necessary to understand what the different phases are – while we are using DevOps. Because DevOps defines an agile relationship between development and operations. It is the process practiced by the development team and operational engineers together from beginning to the final stage of the product. Understanding DevOps is not complete without understanding the DevOps lifecycle phases.
  • Azure DevOps – Here I will explain What Azure DevOps is and Why Should You Care about it. Azure DevOps has a lot of inbuilt functionality that allows teams to get up and running with managing their projects and automating their workflows to increase productivity with a very short initial learning curve.
  • Azure DevOps for SPFx – I have been working on SPFx Solutions for a long time and during the development and deployment – I feel it is very difficult to maintain

their integrity as they grow. When you have a team working on the same SPFx solution, it is quite challenging to manage the continuous development efforts, testing, and deployment of the latest released package. So, to avoid that kind of manual process, it’s better to have an automated process.

  • Example with steps – I want to share the lessons I have learned from building successful projects from a DevOps perspective.

I will explain – how to set up a CI (Continuous Integration) and CD (Continuous Deployment) to automate the process for the SPFx solution.

So, let’s begin with an overview of DevOps

What is DevOps

The term DevOps is a combination of two words namely Development and Operations.

It is the combination of practices, tools, and philosophies that enable rapid development and deployment of enterprise and consumer applications.

A practice that allows a single team to manage the entire application development life cycle (development, testing, deployment, operations

DevOps combines and merges the development team and IT Ops team to work closely in the application lifecycle. They share their skills and are involved from development, through testing into the deployment of the application.

Quality Assurance and Security teams are also tightly integrated and work with the DevOps team.

DevOps team uses practices to automate all development and operations processes.

Promotes collaboration between Development and Operations Team to deploy code to production faster in an automated & repeatable way.

In DevOps, the technology stack and tooling are reliable and evolve quickly and help engineers to accomplish tasks quickly, for example, continuous deployment of code from GitHub. Normally these would have required help from other teams but as DevOps integrate these into a single unit, this increases development velocity.

So, this was just a brief overview of DevOps, let’s now consider why DevOps is required?

Why DevOps?

As I mentioned in the beginning – DevOps is a management culture that improves the IT service delivery agility based on:

  • Communication
  • Collaboration
  • Integration

It is a kind of platform that identifies the relationship between various tools, ideas, and themes of software development and IT operations, using rapid iterations and continuous improvement.

Now the point is – There were a lot of challenges when we consider the traditional waterfall model instead of DevOps, like:

  • After Development, the code deployment time was huge.
  • Pressure of work on old, pending, and new code was high because development and deployment time was high.
  • On the other hand, Operations was also not completely satisfied.
  • It was difficult to maintain ~100% uptime of the production environment.
  • Infrastructure Automation tools were not very effective.
  • The number of servers to be monitored keeps on increasing with time and therefore adds complexity.

Let me give you an example of how DevOps brings great changes when compared to the traditional Waterfall model.

Let’s say for an example – The application is fresh launch, and the process of buying servers to ship the code has just begun as the scheduled to go live for this application is in 3 weeks, and coding is 75% done.

After placing an order for the required servers:

In the Waterfall model process – The development team works on testing, and the Operations team works on extensive paperwork as required in enterprises to deploy the infrastructure.

In DevOps – Development and Operations teams work together on the paperwork to set up the new servers. This results in better visibility of the infrastructure requirement.

In the Waterfall model process – The operations team has no clue about the progress of the Development team. The operations team develop a monitoring plan as per their understanding.

In DevOps – The operations team is completely aware of the progress the developers are making. The operations teams interact with developers and jointly develop a monitoring plan that caters to the IT and business needs.

In the Waterfall model process – Before go-live, the load testing crashes the application. The release is delayed.

In DevOps – Before go-live, the load testing makes the application a bit slow. The development team quickly fixes the bottlenecks. The application is released on time.

Based on this, I can say:

The team worked in complete isolation

  • Before DevOps, the development and operation team worked in complete isolation.
  • By Improved Collaboration – With DevOps and a single combined platform Developers and Operation team, collaborate easily. They are no longer isolated from each other and share responsibilities and feedbacks.

Testing and Deployment were isolated activities

  • Testing and Deployment were isolated activities done after design-build. Hence, they consumed more time than actual build cycles.
  • By Rapid Delivery – DevOps combines tools and all processes in the cloud so starting from developing the apps and testing it in the cloud by using automated tools and deploying as soon as code commit happens. This enables rapid delivery.

Time Consuming (testing, deploying, and designing):

  • Without using DevOps, team members are spending a large amount of their time in testing, deploying, and designing instead of building the project.
  • Speed: In DevOps, microservices and continuous delivery allowed teams to take ownership of services and then release updates to them faster.
  • Reliability: Monitoring and logging practices help you stay informed of performance in real-time.

Manual code deployment leads to human errors in production.

Separate timelines for development and operations team:

  • Coding & operation teams have their separate timelines and are not in synch causing further delays.
  • By Scaling: Infrastructure as code helps you manage your development, testing, and production environments in a repeatable and more efficient manner.
  • In terms of Security: Automated compliance policies, fine-grained controls, and configuration management techniques can define and then track compliance at scale.

Does this show why DevOps was required?

The DevOps Lifecycle

DevOps is deep integration between development and operations along with that it is a software development approach through which superior quality software can be developed quickly and with more reliability.

So, understanding DevOps is not possible without knowing the DevOps lifecycle.

Let’s assume your Marketing and Sales team gets an idea from Market on some product they are interested in building.

Based on their research, they will prepare a business plan and share the details with the technical team for further planning.

The planning team will decide the development architecture based and share the details with the Development team.

The development team will identify the suitable Source control IDE to write code and build the solutions.

Once the initial development is complete – the testing team will be involved to test the application and after passing all the test scenarios the application will be moved to Production.

After that, there are chances to get some feedback from the actual users or marketing/sales team after launching the product to market – now, in this scenario, it’s very difficult to make the changes or enhance the functionality based on specific input if not used the DevOps.

There are various phases such as continuous development, continuous integration, continuous testing, continuous deployment, and continuous monitoring that constitute the DevOps Life cycle.

Now let us have a look at each of the phases of the DevOps life cycle one by one.

There are seven phases in the DevOps lifecycle – Continuous development, continuous integration, continuous testing, continuous delivery, continuous feedback, continuous deployment, and continuous operations.

Let us discuss each of the DevOps lifecycle phases below.

Continuous Development (Plan and Code)

This is the phase that involves ‘planning’ and ‘coding’ of the software.

The vision of the project is decided during the planning phase, and the developers begin developing the code for the application.

There are no DevOps tools that are required for planning, but there are several tools for maintaining the code.

The code can be written in any language and maintained by using any Version Control tools and can be used in this phase for building/ packaging the code into an executable file that can be forwarded to any of the next phases.

In the first phase of the DevOps lifecycle, you should plan your application objectives that must be delivered to the customer.

Once you are sure of the application objectives, start with the project development. It includes activities like code generation and putting the same to the next phase. As DevOps follows the continuous development approach, so work may carry out on the existing code by using continuous feedback in the development and operation scheme.

Continuous Testing (Build and Test)

This is the stage where the developed software is continuously tested for bugs. The testing process checks the actual use of an application in the DevOps.

Testers produce results while still ensuring that the application can have its intended use in a live environment.

The testing process gives more information about different aspects of an application that, in turn, is sent to the development process to improve the application.

Continuous Integration

This is the stage where new functionality is integrated with the prevailing code, and testing takes place. Continuous development is only possible due to continuous integration and testing.

This stage is the heart of the entire DevOps life cycle.

It is a software development practice in which the developers require to commit changes to the source code more frequently.

This may be on a daily or weekly basis.

Every commit is then built, and this allows early detection of problems if they are present.

Building code not only involves compilation but also includes code review, unit testing, integration testing, and packaging.

The code supporting new functionality is continuously integrated with the existing code.

Since there is the continuous development of software, the updated code needs to be integrated continuously as well as smoothly with the systems to reflect changes to the end-users.

Continuous Deployment

In this phase, the deployment process takes place continuously. It is performed in such a manner that any changes made at any time in the code, should not affect the functioning of a high traffic website.

This is the stage where the code is deployed to the production servers. It is also important to ensure that the code is correctly deployed on all the servers.

Since the new code is deployed on a continuous basis, configuration management tools play an important role in executing tasks quickly and frequently.

Continuous Monitoring

In this phase, the operation team will take care of the inappropriate system behaviour or bugs that are found in production.

This is a very crucial stage of the DevOps life cycle where you continuously monitor the performance of your application.

Here vital information about the use of the software is recorded. This information is processed to recognize the proper functionality of the application.

The system errors such as low memory, server not reachable, etc. are resolved in this phase.

The root cause of any issue is determined in this phase. It maintains the security and availability of the services.

They can also improve productivity and increase the reliability of the systems, which in turn reduces IT support costs.

Any major issues, if found, are reported to the development team so that it can be fixed in the continuous development phase. This leads to a faster resolution of the problems.

Here is the different representation of the DevOps life cycle

These DevOps stages are carried out on loop continuously till you achieve the desired product quality.

Therefore, almost all the major IT companies have shifted to DevOps for building their products.

Now I will explain What can be achieved using Azure DevOps

Azure DevOps

Azure DevOps was launched on 10th September 2018 and has become increasingly

critical to a team’s success. As per Microsoft – Azure DevOps captures over 15 years of investment and learnings in providing tools to support software development teams.

The evolution of VSTS (Visual Studio Team Services)

In the simplest terms, Azure DevOps is the evolution of VSTS (Visual Studio Team Services).

It spans the breadth of the development lifecycle to help developers ship software faster and with higher quality. They represent the most complete offering in the public cloud

DevOps brings together people, processes and technology, automating software delivery to provide continuous value to your users. In other words, it enables any developer to ship customer value faster, more reliably, and with better quality.

Inbuilt functionality

Azure DevOps has a lot of inbuilt functionality that allows teams to get up and running with managing their projects and automating their workflows to increase productivity with a very short initial learning curve.

Get Azure Boards, Azure Repos, Azure Pipelines, Azure Test Plans, and Azure Artifacts

It is the result of years of using their own tools and developing a process for building and delivering products in an efficient and effective way.

But it’s more than that, too. I think of it as VSTS, TFS (Team Foundation Server) and Azure all rolled up into one, with some improvements and a few extras.

With Azure DevOps, you get Azure Boards, Azure Repos, Azure Pipelines, Azure Test Plans, and Azure Artifacts.

Here I will brief you about what we get with Azure DevOps

Azure Boards

Azure Boards is your ultimate, built-in agile project planning and management tool and has all the functionality you would expect to find in a standalone piece of software with the ability to link work items and tasks with your pipelines.

Azure Repositories

Provides you with UNLIMITED Git repositories.

You can create a project in Azure DevOps and create as many repositories as you need and collaborate with your team members to build code with pull requests and advanced file management.

Azure Repos functionality differs between choosing Git or Team Foundation Source Control as your Git version when creating a project.

Within repo’s, you can create or import repositories and manage them using your standard git GUI or git CLI.

All the functionality you would expect from Git is there with the added benefit of linking commits and pull requests to Work Items and CI.

Azure Pipelines

Pipelines within Azure DevOps is the CI/CD tool that allows the building, testing, and deployment of code using DevOps practices, so you spend less time with the nuts and bolts and more time being creative.

Azure Test Plans

You can use Azure Test Plans to run manual tests for your web and desktop applications and log defects. You can track and assess quality throughout your testing lifecycle that helps you to get end to end traceability.

Improve your code quality using planned and exploratory testing services for your apps.

Azure Artifacts

Add fully integrated package management to your continuous integration/continuous delivery (CI/CD) pipelines with a single click.

Azure Artifacts helps you to create and share npm, and NuGet package feeds from public and private sources – fully integrated into CI/CD pipelines.

How to use Azure DevOps for SPFx solution

  • Create your solution/project using SharePoint Framework
  • Push/Commit your code to GitHub
  • Create required Azure Pipelines that allow the building, testing, and deployment of code, so we can spend less time with configuration and more time being creative.
  • You can use PnP, Office 365 CLI command to push your solution package and other artifacts from source to destination
  • In our case the Office 365 portal would be source and destination.

The source could be your Development server and the Destination could be your QA/UAT/Production server.

Example with steps:

In the example, I will explain Continuous Integration to automate the SharePoint Framework build process and Continuous Deployment to automate the SPFx solution deployment using Azure DevOps.

As I mentioned earlier, CI/CD helps developers to deliver the product faster with transparency. Setting up CI/CD helps to maintain the solutions for their integrity when it is being worked on by a team. First, I will explain Continuous Integration:

Assume that you have a team working on the SPFx solution and they are using source control.

Continuous Integration will help to automate the build process when a developer commits their changes to source control, and this will trigger an automated build that grabs the latest code from version control and build it.

In addition to this testing is also an important part. Manual testing involved people and time – so to speed up the development process we can prepare test cases to test the component rendering which can help to develop new components and ensure the integrity of the existing functionality. You can use Jest to prepare unit tests for your solution.

Create Git Repository:

Login to https://github.com and create a new or use an existing repository.

Manage Git Repository (Note: For this example, I have used “CollabSPSummit” GitRepo) Create your solution/project using SharePoint Framework

Map your GitRepo using “GitHub Desktop”

Map Git Repo with your Solution

  • Push/Commit your code to GitHub
  • Create required Azure Pipelines that allow the building, testing, and deployment of code, so we can spend less time with configuration and more time being creative.
  • Follow the steps to manage Azure Pipelines:
  • Login into https://dev.azure.com with your credentials and create a new project or use an existing one.
  • Note: I have used “Collab365” for this example. You can also create a new project by clicking on the “New project” button (right top corner).
  • Once you have your project – click on the specific project card (in this case – I will use “Collab365”).
  • This will open the Project Dashboard screen as below – from where you can create/manage Azure DevOps Pipelines and builds.

Manage Builds: Click on “Pipelines” link from the left navigation and click on “Builds” option.

Create a new build and give it a proper name.

You can use existing builds as well – Select your build (I have used “Collab365-CI” for this example) and click on “Edit” button.

You must select the source by clicking on the “Get sources” link. In this example, I am using GitHub as my repository, so I am selecting “GitHub.”

Selecting repository name by browsing from my physical folder location along with the branch (I have used ‘master’ as default branch)

Once we have associated the source – now it is time to create an agent job. Click on “Agent Job 1” and create an agent with a predefined set of commands.

Add the following commands using command-line task

Install Node.js: Use the following command line to use and install Node.js

Install “npm”: Use the following command line to use and install npm

Bundle the solution using the gulp bundle command as below

Package the solution using below command line

Copy all artifacts files at the drop folder using the below command line.

Publish the artifacts to drop folder using below command line

Click on “Release” from left navigation. You will have an option to create new release or edit an existing release.

Create “New Release” by selecting “New release pipelines” as below screen.

Edit “Release” – For this example, I have created a release with the name “Development”, and you can edit by clicking on the “Edit” button (top right corner)

Once you click on the “Edit” button, it will open below the screen from where you must add artifacts. I have added an artifact with the name “Collab-CI,” – which was created as a build.

Once you click on that – you will have an option to select build (which has been created in the first step) and provide source alias as below screen.

Add job and tasks to newly created “Release” – for this example, I have named my release as “Development”.

By clicking on “job, tasks” – you will prompt with a new screen from where you can add jobs and tasks as per your requirement.

To create tasks – click on “+” symbol as below screen

Add tasks as per your requirements. Make sure you use the “Command line” option when clicking on the “+” symbol wherever I have mentioned “Command line” just below the tasks. For this example, I have added 5 tasks as below screen.

Install Node.js

Install office365-cli

Connect to App Catalog

Add solution package to app catalog

Deploy the App

Manage variables

You can enter hardcoded values as well in all the commands but it’s better to configure in variables so that will help us to manage going forward.

Update the code for your client-side web part and push it to the git hub repository

Verify the latest code is available in git hub repository

Queue your build pipeline to automate the process. Select “Build” we have created in the first step and click on “Queue” button (top right corner)

This will allow us to run the build pipeline by clicking on the “Run” button

This will execute all the commands we have mentioned in the build process, and if everything goes fine – you can see the below screen with a “succeeded” message for all commands.

Go to release from the left navigation and find that the release is also in progress

Once you click on the release name – In this case “Development” you will have a screen from where you can see an execution of all commands, we wrote in release pipelines

Once all commands are executed successfully – we can see the below screen

Verify “App Catalog” with the updated package should be deployed

Verify the page on the SharePoint site where you have added this web part – the changes should be reflected.

This is how we can achieve an automated process for client-side web part deployment using continuous integration and continuous deployment using Azure DevOps for SharePoint Framework.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}