ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps

2. ♡ ♡

3. The project

4. Code is ready, let’s
ship it!

5. #SPSOslo - @eliostruyf
Client-side solution creation flow
Scaffold SharePoint Web Part
Project
Build Web Part Code
Test
Local
UAT / Pre-production
Minify Assets
Available on Classic and
Client-Side Pages
Ship?
Release using app catalog*
Package/Deploy

6. #SPSOslo - @eliostruyf
Manual steps for shipping your solutions
1. Clean your solution
→ gulp clean
2. Bundle your solution
→ gulp bundle --ship
3. Package your solution
→ gulp package-solution --ship
4. (Optionally) upload your files to your CDN
5. Upload the solution package and deploy it in
the app catalog (site or tenant)
Minify Assets
Available on Classic and
Client-Side Pages
Release using app catalog*
Package/Deploy
Cleans project

7. What are the
options?

8. Release process automation options
• Node script
• Gulp
• Office 365 CLI
• PowerShell
• VSCode extension
• …

9. Demo:
Manual steps

10. Gain time by
automating this

15. Plan
1
Develop + Test
2
Development Production
Monitor + Learn
4
Release3
DevOps process

16. What is the process to get it automated?
CI CD

17. Installs dependencies
Push the build artifacts
ready for the releasePackage/DeployMinify Assets
Continuous Integration → build process

18. Demo:
Setting up the build
pipeline

19. Issues in your pipeline?

20. Be one of the cool kids, start using YAML
• Pipelines as code
• Automated from your repo
• Easier to go back to earlier builds
• Defined in: azure-pipelines.yml
• Set secret variables via the web UI

21. Task groups:
Reuse tasks in other pipelines / projects

24. Demo:
Task groups

25. Next is the release to SharePoint
CI CD

26. Continuous Delivery → Release process
Release process Check out the solution
once shippedAdd *.sppkgInstall Office 365 CLI Deploy *.sppkg

27. Demo:
Setting up the
release pipeline

28. • Releases can target different environments
• Dev → Test → Q&A → Production
Environments

29. What’s next?

30. What’s next?
• Adding more environments
• Implementing unit tests in the CI process
• Code quality test (SonarQube)
• Automated UI tests
• …

31. Questions?

32. Office Apps & Services MVP
Azure / Office 365 / SharePoint
@eliostruyf
eliostruyf.com
info@estruyf.be
Elio Struyf
Architect @Valo Intranet