ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
2 likes432 views
The document discusses automating the process of shipping SharePoint client-side web part solutions. It provides manual steps for cleaning, bundling, packaging, and deploying solutions. It then discusses options for automating this process using tools like Node scripts, Gulp, Azure Pipelines, and the Office 365 CLI. The document demonstrates setting up build and release pipelines in Azure Pipelines to continuously integrate, build, test, and release solutions. It discusses next steps like adding environments and implementing tests.
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
- 8. Release process automation options • Node script • Gulp • Office 365 CLI • PowerShell • VSCode extension • …
- 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
- 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 [email protected] Elio Struyf Architect @Valo Intranet