Streamline SPFx Builds with Azure DevOps CI/CD Pipeline – Part 1: Setting Up Continuous Integration

Introduction

If you're developing SharePoint Framework (SPFx) solutions, streamlining your build process is key. In this post, we’ll walk through setting up a Continuous Integration (CI) pipeline using Azure DevOps to automatically prepare your SPFx solution whenever you push code.

Step 1: Set Up the Repo

• First, create a DevOps repository and add your SPFx source code into a dedicated folder.

Step 2: Create the CI Pipeline

• Navigate to Pipelines: In Azure DevOps, go to the Pipelines section and click Create Pipeline.

• Classic Editor: Choose the classic editor for easier configuration.

• Repo & Branch: Select your repository and branch, then continue.

 

Step 3: Configure Pipeline Jobs

• Empty Job: Choose the empty job template.

• Add Tasks:

1. Node.js Tool Installer : Set the Node.js version required for your SPFx project.
   
   
2. NPM Install: Add the npm task to install dependencies (install command).
   
   
3. Gulp Clean: Add the gulp task with clean.
   
   
4. Gulp Build: Repeat the above for build.
   
   
5. Gulp Bundle: Add another gulp task for bundle.
   
   
6. Gulp Package Solution: Finally, a gulp task for package-solution
   
   

Step 4: Handle Artifacts

• Copy Files: Add a task to copy the generated .sppkg file from the solution folder to the drop folder.

Step 5: Publish Artifacts

Add a task to publish the pipeline artifacts for the next stage.

Step 6: Set Up Triggers

In the trigger settings, define the source code path. This ensures that every commit triggers the pipeline automatically.

Conclusion:

With this setup, every push to your repository will automatically trigger the CI pipeline, ensuring your SPFx solution is built and packaged consistently.

Next Up: Part 2 – Deploy SPFx Solution to SharePoint App Catalog using Azure DevOps, we’ll cover how to automate the deployment of the .sppkg file to your SharePoint App Catalog as part of a Continuous Deployment (CD) pipeline.

If you have any questions you can reach out our SharePoint Consulting team here.