Summary

My customer needs a way to help the developers to create CI/CD pipeline build for the developers. The customer has the Azure DevOps Server (ADOS). They need guidelines for the DevOps process for SPFx projects.

The requirement is to utilize the existing shared build agents which were Windows VMs. Additionally, the deployment should be in the site collection app catalog not in the app catalog.

The sample on the web provided by Andrew Connel was a very good start. I modified it to meet the above requirements. I hope this may be helpful to you.

Prerequisites

1. Azure DevOps (ADO) Server if not you can utilize the online ADO. (Follow this article to get a free five-user Basic Plan Azure Subscription.)
2. GitHub Repo

Step By Step Solution

Step # 1: Create a Jobs folder in your source repo.

Create the following three files.

1. build.yml (File is located here.)
2. test.yml (File is located here.)
3. deploy.yml (File is located here.)

Create a file in your repository

azure-pipleline.yml (File is located here.)

Step # 2: The above jobs files will be used to define the pipeline.

Click on the New Pipeline under the Pipelines.

Select the code location, in this case, select the Azure Repos Git.

Select the repository

Select the “Existing Azure Pipelines YAML file.

Now point to the azure-pipeline.yml file from Step # 1.

Step # 3: Create the side loading of the site where you want to create an app catalog.

The site collection app catalog can be created by SPO admins.

Use the Add-SPOSiteCollectionAppCatalog PowerShell command.

OR

Use the PnP Add-PnPSiteCollectionAppCatalog command.

Step # 4: You need to create APP ID and APP SECRET

Add-in permissions in SharePoint

SharePoint Add-In — Permission XML cheat sheet

The following three URLs will be handy, the first one is to register a new app, the second is to set the permissions for the app and the third one is to list apps you or others have previously created.

1. https:// [Your SharePoint Site URL]/_layouts/15/AppRegNew.aspx
2. https:// [Your SharePoint Site URL]/_layouts/15/AppInv.aspx
3. https:// [Your SharePoint Site URL]/_layouts/15/AppPrincipals.aspx

Step # 5: Finally you need to create the following two variables in the pipelines.

ClientID

ClientSecret

Conclusion

The above steps were to provide the CI/CD pipelines to deploy the SPFX packages to the site collection app catalog.

To know more about SPFx. Please use the following links.

(678) SharePoint Framework Tutorials – YouTube

(678) SharePoint Framework – YouTube