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.

SPSNL - SPFx Deployment

215 views

Published on

I developed a SharePoint Framework solution, what to do next and how to install it by code?
SharePoint Saturday Netherlands - 30 June 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SPSNL - SPFx Deployment

  1. 1. #SPSNL18 I developed a SharePoint Framework solution, what to do next and how to install it by code?
  2. 2. Thank you sponsors!
  3. 3. yannickborghmans.com Linkedin.com/in/yborghmans @yborghmans Yannick Borghmans Office 365/SharePoint Technical Lead @Ventigrate
  4. 4. Agenda Building SPFx Deployment SharePoint Azure App catalog ALM API
  5. 5. Building SPFx solution
  6. 6. Package your webpart Use the bundle gulp task to build, localize, and bundle the project Use the package-solution gulp task to package the project into a .sppkg file The ship parameter build task creates a minified version of the bundle and copies all of the web part assets
  7. 7. Package your webpart
  8. 8. Deploy App to the SharePoint App Catalog Hint => Create a specific view for checked out packages
  9. 9. Upload static assets JSON source file • Manifest for webpart JS Files • Minified version of your code • Localized strings Located in /temp/deploy folder
  10. 10. Install the app Go to your SharePoint Site Add an app
  11. 11. Add the web part to a SharePoint page Create a page on your Office 365 site Add the web part to the page
  12. 12. Demo Files
  13. 13. Updating solutions
  14. 14. Update SPFx solution Upgrade version (./config/package-solution.json)
  15. 15. Update SPFx solution Gulp clean (optional) Gulp bundle --ship Gulp package-solution --ship Upload to app catalog & upload static assets (.js, .json)
  16. 16. Update SPFx solution No need to update app on sites => webparts are automaticaly using the latest code Attention! => Updating an app where SPFx v1.4 is used, can break all webparts on the site. => v1.4.1 solves this problem
  17. 17. Upgrading solutions
  18. 18. Upgrade SPFx version Find outdated packages • npm outdated
  19. 19. Upgrade SPFx version Update specific package Clean old build artifacts Any problems? Delete node_modules and execute npm install
  20. 20. Upgrade SPFx version – O365 CLI Install O365 CLI Find outdated packages
  21. 21. Upgrade SPFx version - Yeoman Find outdated Yeoman generator (installed globally) Update
  22. 22. Upgrade SPFx version BE CAREFULL! • Always take a backup
  23. 23. Deploy possibilities
  24. 24. Deploy possibilities SharePoint Document library Client side assets Office 365 CDN Azure CDN Extra Tenant deploy
  25. 25. What defines the hosting location?
  26. 26. SHAREPOINT Document library
  27. 27. SharePoint – document library Create a document library Create a folder/solution you want to host
  28. 28. SharePoint – document library Update the CDNBasePath in write-manifest.json
  29. 29. SharePoint – document library Upload app package to app catalog
  30. 30. SharePoint – document library Upload .js files to document library
  31. 31. SharePoint – document library
  32. 32. Demo
  33. 33. Client side assets Introduced in SPFx v1.4 to include static assets in .sppkg file
  34. 34. Demo CLIENT SIDE ASSETS
  35. 35. AZURE CDN
  36. 36. Demo Azure CDN
  37. 37. Office 365 - CDN
  38. 38. Enable the SharePoint CDN origin Open the SharePoint Online Management Shell Execute the following Powershell commands to enable the CDN, set the CDN origin, and return the CDN Origin ID
  39. 39. Demo Office 365 CDN
  40. 40. Tenant deploy Introduced in SPFx v1.4
  41. 41. SharePoint Application Lifecycle Management API API to manage the deployment of your SharePoint Framework solutions
  42. 42. SharePoint Application Lifecycle Management Add SharePoint Framework solution or SharePoint Add-in to tenant app catalog. Remove SharePoint Framework solution or SharePoint Add-in from tenant app catalog. Enable SharePoint Framework solution or SharePoint Add-in to be available for installation in tenant app catalog. Disable SharePoint Framework solution or SharePoint Add-in not to be available for installation in tenant app catalog. Install SharePoint Framework solution or SharePoint Add-in from tenant app catalog to a site. Upgrade SharePoint Framework solution or SharePoint Add-in to a site, which has a newer version available in the tenant app catalog. Uninstall SharePoint Framework solution or SharePoint Add-in from the site. List all and get details about SharePoint Framework solutions or SharePoint Add-ins in the tenant app catalog.
  43. 43. Supported operations
  44. 44. Demo Plain REST Calls PnP ALM
  45. 45. Questions?
  46. 46. Thanks for attending
  47. 47. Thank you sponsors!

×