Biwug 20180410 - I developed a SharePoint Framework solution, what to do next and how to install it by code?
- 1. I developed a SharePoint Framework solution, what to do next and how to install it by code? Yannick Borghmans
- 2. Special thanks to our sponsors
- 3. Veldkant 37 – 2550 Kontich +32 497 28 83 24 Linkedin.com/in/yborghmans @yborghmans Yannick Borghmans Office 365/SharePoint Technical Lead
- 4. Agenda Building SPFx Deployment SharePoint Azure App catalog ALM API
- 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
- 8. Deploy App to the SharePoint App Catalog Hint => Create a specific view for checked out packages
- 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. Install the app • Go to your SharePoint Site • Add an app
- 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. Demo Files
- 14. Update SPFx solution • Upgrade version (./config/package-solution.json)
- 15. Update SPFx solution • Gulp clean (optional) • Gulp bundle --ship • Gulp package-solution --ship • Upload to app catalog & upload static assets (.js, .json)
- 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. Demo
- 18. Update SPFx version • Find outdated packages • npm outdated
- 19. Update SPFx version • Update specific package • npm install mypackage@newversion –save • Clean old build artifacts • gulp clean • Any problems? Delete node_modules and execute npm install
- 20. Update SPFx version - Yeoman • Find outdated Yeoman generator (installed globally) • npm outdated –g • Update • npm install @microsoft/generator-sharepoint@latest -g
- 21. Update SPFx version • BE CAREFULL! • Always take a backup
- 23. What defines the hosting location?
- 24. Deploy possibilities SharePoint Document library Client side assets Office 365 CDN Azure CDN Extra Tenant deploy
- 26. SharePoint – document library • Create a document library • Create a folder/solution you want to host
- 27. SharePoint – document library • Update the CDNBasePath in write-manifest.json
- 28. SharePoint – document library • Upload app package to app catalog
- 29. SharePoint – document library • Upload .js files to document library
- 30. SharePoint – document library
- 31. AZURE CDN
- 32. DEMO Azure
- 33. Client side assets Introduced in SPFx v1.4 to include static assets in .sppkg file
- 37. DEMO CLIENT SIDE ASSETS
- 38. Office 365 CDN
- 40. 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
- 43. Tenant deploy Introduced in SPFx v1.4
- 47. SharePoint Application Lifecycle Management API API to manage the deployment of your SharePoint Framework solutions
- 48. 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.
- 52. Demo Plain REST Calls PnP ALM
- 53. Questions?
Editor's Notes
- #40: Administrator enables Office 365 Public CDN for the tenant using SharePoint Online Management Shell. Static assets to be shared from CDN are uploaded to the SharePoint libraries, which are enabled as CDN origins. Assets are being exposed from the configured libraries and folders and they can be accessed using CDN URLs. URLs pointing to CDN location are available to be used in the SharePoint sites and in the customizations hosted from SharePoint.
- #41: Open the SharePoint Online Management Shell. Connect to your Office 365 Developer Tenant within PowerShell session by executing the following commands: $creds = Get-Credential Connect-SPOService -Url https://<TENANCY>-admin.sharepoint.com/ -Credential $creds Enable the Public CDN in the tenant by executing the following command: Set-SPOTenant -PublicCdnEnabled $true Configure the allowed file extensions by executing the following command: Set-SPOTenant -PublicCdnAllowedFileTypes "CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,TXT“ Add the CDN Origin by executing the following command: New-SPOPublicCdnOrigin -Url "https://<TENANCY>.sharepoint.com/sites/dev/siteassets/cdn“ Get the CDN Origin Id by executing the following command: Get-SPOPublicCdnOrigins