Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
♡ ♡
The project
Code is ready, let’s ship it!
#SPSOslo - @eliostruyf Client-side solution creation flow Scaffold SharePoint Web Part Project Build Web Part Code Test Lo...
#SPSOslo - @eliostruyf Manual steps for shipping your solutions 1. Clean your solution → gulp clean 2. Bundle your solutio...
What are the options?
Release process automation options • Node script • Gulp • Office 365 CLI • PowerShell • VSCode extension • …
Demo: Manual steps
Gain time by automating this
Plan 1 Develop + Test 2 Development Production Monitor + Learn 4 Release3 DevOps process
What is the process to get it automated? CI CD
Installs dependencies Push the build artifacts ready for the releasePackage/DeployMinify Assets Continuous Integration → b...
Demo: Setting up the build pipeline
Issues in your pipeline?
Be one of the cool kids, start using YAML • Pipelines as code • Automated from your repo • Easier to go back to earlier bu...
Task groups: Reuse tasks in other pipelines / projects
Demo: Task groups
Next is the release to SharePoint CI CD
Continuous Delivery → Release process Release process Check out the solution once shippedAdd *.sppkgInstall Office 365 CLI...
Demo: Setting up the release pipeline
• Releases can target different environments • Dev → Test → Q&A → Production Environments
What’s next?
What’s next? • Adding more environments • Implementing unit tests in the CI process • Code quality test (SonarQube) • Auto...
Questions?
Office Apps & Services MVP Azure / Office 365 / SharePoint @eliostruyf eliostruyf.com info@estruyf.be Elio Struyf Architec...
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
ECS19 Elio Struyf - Setting Up Your SPFx CI/CD pipelines on Azure DevOps
Upcoming SlideShare
Loading in …5
×

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

225 views

Published on

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

Published in: Software
no profile picture user
  • I’ve personally never heard of companies who can produce a paper for you until word got around among my college groupmates. My professor asked me to write a research paper based on a field I have no idea about. My research skills are also very poor. So, I thought I’d give it a try. I chose a writer who matched my writing style and fulfilled every requirement I proposed. I turned my paper in and I actually got a good grade. I highly recommend ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is a useful site for you that will help you to write a perfect and valuable essay and so on. Check out, please ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.HelpWriting.net ⇐ and place your order
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. ♡ ♡
  2. 2. The project
  3. 3. Code is ready, let’s ship it!
  4. 4. #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
  5. 5. #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
  6. 6. What are the options?
  7. 7. Release process automation options • Node script • Gulp • Office 365 CLI • PowerShell • VSCode extension • …
  8. 8. Demo: Manual steps
  9. 9. Gain time by automating this
  10. 10. Plan 1 Develop + Test 2 Development Production Monitor + Learn 4 Release3 DevOps process
  11. 11. What is the process to get it automated? CI CD
  12. 12. Installs dependencies Push the build artifacts ready for the releasePackage/DeployMinify Assets Continuous Integration → build process
  13. 13. Demo: Setting up the build pipeline
  14. 14. Issues in your pipeline?
  15. 15. 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
  16. 16. Task groups: Reuse tasks in other pipelines / projects
  17. 17. Demo: Task groups
  18. 18. Next is the release to SharePoint CI CD
  19. 19. Continuous Delivery → Release process Release process Check out the solution once shippedAdd *.sppkgInstall Office 365 CLI Deploy *.sppkg
  20. 20. Demo: Setting up the release pipeline
  21. 21. • Releases can target different environments • Dev → Test → Q&A → Production Environments
  22. 22. What’s next?
  23. 23. What’s next? • Adding more environments • Implementing unit tests in the CI process • Code quality test (SonarQube) • Automated UI tests • …
  24. 24. Questions?
  25. 25. Office Apps & Services MVP Azure / Office 365 / SharePoint @eliostruyf eliostruyf.com info@estruyf.be Elio Struyf Architect @Valo Intranet

×