It’s a small project with SharePoint Framework and Azure DevOps. It displays a chart web part for the different bank accounts. This solution is installed on Office 365. Since I work with Office 365, why not use with Azure DevOps? I’m not Azure DevOps Expert, so it is time to get to know this great solution. I just found out that there is no description or the old description on the Internet. The last what I found is here: Continuous integration and deployment for your SharePoint Framework solutions. (https://delucagiuliano.com/continuous-integration-and-deployment-for-your-sharepoint-framework-solutions/#.XHPZz5P0nUL) This article from Giuliano De Luca was created on October 22, 2017, but this is a good start to reuse some tasks for a new build definition. Please download the PowerShell-scripts from this article. (GitHub from Giuliano De Luca: https://github.com/giuleon/AutomatedDeploymentForSPFx – Thank you very much, Giuliano!) You will need it for Azure DevOps.
My goal is, I update some in the SPFx solution and check in this code to Azure Repos – Git-Repositories. Azure DevOps should build this solution, send it to SharePoint Catalog library and update it on the selected site. The great thing about it is, I can see the result right away in SharePoint.
Download both PowerShell-scripts from the article Continuous integration and deployment for your SharePoint Framework solutions. These are in GitHub (https://github.com/giuleon/AutomatedDeploymentForSPFx).
Also download my PowerShell-script: GitHub (https://github.com/Vintaurus/ci_spfx_azure_devops).
Add these three scripts to the root folder in your solution (Visual Studio Code or Visual Studio).
Add SPFx solution to SharePoint app catalog
Before I use with Azure DevOps, I added the SPFx solution manually in SharePoint catalog. Of course, the best solution is, the Azure DevOps should take all my tasks. But in this case, it is a small solution.
Add SPFx web part to a SharePoint site
So after successful deployment in SharePoint catalog, you can add the app in SharePoint site and place it to the site.
Get exiting SPFx web part – app id
For the build definition, you need an app id from SPFx web part. You can get it with the Azure CLI (or PowerShell).
Create a project in Azure DevOps and add a solution to Azure Repos
I won’t describe here precisely, how you can do it. You can find the information on the Internet. I used this configuration:
After that, I check in the solution from Visual Studio Code in Azure Repos.
2. Create pipeline in Azure DevOps
Now it’s finally really off to create a release in Azure DevOps.
1. Go to Pipelines, select Releases and click “New pipeline”:
2. Select “Empty job”:
3. Enter the stage name:
4. Click on “Add an artifact”, select source type “Azure Repos”, select project and source, click “Add”:
5. Click an icon “continuous deployment trigger” and enable the “Continuous deployment trigger”:
Now the configuration for an artifact is done. The next step is to add some tasks in the stage.
6. Go to stage “Production” and click on “1 job, 0 task”:
7. Click on “Agent job” and change the agent pool to “Hosted”:
If you want, you can save it now.
8. Add 10 tasks to the agent job:
For the next steps for the tasks, I will mostly add the only screenshot without comment:
9. Task “Node Tool Installer”:
You will need it because the SPFx solution requires a certain version of node.js.
10. Task “npm” – npm custom install gulp:
11. Task “npm” – npm install:
12. Task “Gulp” – Create bundle:
13. Task “Gulp” – Package solution:
14. Task “Delete Files”:
Before the files should copy to another folder, the folder “node_modules” should be deleted.
15. Task “Copy files”:
16. Task “PowerShell” – Install PnP:
Copy this code and add in the script:
Install-PackageProvider -Name NuGet -Force -Scope "CurrentUser" Install-Module SharePointPnPPowerShellOnline -Scope "CurrentUser" -Verbose -Force
17. Task “PowerShell” – Deploy package:
18. Task “PowerShell” – Update SPFx App:
So all tasks are now added in the stage.
19. The last step is to add some variables:
I used with a deployment account of Office 365 and this is site collection admin for SharePoint App Catalog and other site collection for updating the web part. A variable “psw” means the password for the username.
3. Run deployment
For update the solution and check in to git, increase always the version number.
Go to /config/package-solution.json and increase it.
Hopefully, you could set up your continuous delivery on Azure DevOps successfully. I’m really very excited about this implementation. For maintainability, it’s very useful, so I don’t have to pay more attention to deployment. For me, it is a must be used for SPFx-development with DevOps.