This document discusses different options for deploying SharePoint Framework (SPFx) solutions. It begins with an overview of building and packaging an SPFx solution. It then covers deploying the solution to the SharePoint app catalog and adding the web part to a site. The document also discusses hosting client-side assets in SharePoint document libraries, Azure CDN, and the Office 365 CDN. It introduces the SharePoint Application Lifecycle Management API and PnP library for deploying solutions across a tenant.

1. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Power
Saturday
I developed a SPFx solution, what to do next
and how to install it by code?
Yannick Borghmans

2. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Merci à nos sponsors
http:// PowerSaturday.com
Silver
Bronze
Gold

3. yannickborghmans.com
Linkedin.com/in/yborghmans
@yborghmans
Yannick Borghmans
Office 365/SharePoint Technical Lead @Ventigrate

4. Agenda
Building SPFx Deployment
SharePoint
Azure
App catalog
ALM API

6. SharePoint UX – Evolving cross versions
2009
SharePoint
Server 2010
2006
Office SharePoint
Server 2007
2003
SharePoint
Portal Server 2003
2001
SharePoint
Portal Server 2001
2012
SharePoint
Server 2013
2016 …
SharePoint
Server 2016, SPO

7. SharePoint Framework

8. Is all SP Online development in JavaScript?
In similar ways as with SharePoint Add-in model,
server side development is needed for back end
services
SharePoint Framework concentrates on user
interface, not on fundamentals around the API
usage

9. • Tooling
• Node.js
• Yeoman
• Gulp
• TypeScript
• Visual Studio (Code)
• Frameworks – Choose yours
• React
• Angular.js
• Knockout
• Etc.
Typical tooling for SharePoint Framework

11. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Client-side Web Part Build Flow

12. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
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
Package your webpart

13. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Package your webpart

14. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Deploy App to the SharePoint App Catalog

15. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
JSON source file
 Manifest for webpart
JS Files
 Minified version of your code
 Localized strings
Located in /temp/deploy folder
Upload static assets

16. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Go to your SharePoint Site
Add an app
Install the app

17. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Create a page on your Office 365 site
Add the web part to the page
Add the web part to a SharePoint page

18. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
• Files

19. Updating solutions

20. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Upgrade version (./config/package-
solution.json)
Update SPFx solution

21. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Gulp clean (optional)
Gulp bundle --ship
Gulp package-solution --ship
Upload to app catalog & upload static assets
(.js, .json)
Update SPFx solution

22. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
No need to update app on sites => webparts
are automaticaly using the latest code
Update SPFx solution

23. Deploy possibilities

24. SharePoint
Document library
Client side
assets
Office 365
CDN
Azure
CDN
Extra
Tenant deploy

25. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
What defines the hosting location?

26. SHAREPOINT
Document library

27. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Create a document library
Create a folder/solution you want to host
SharePoint – document library

28. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Update the CDNBasePath in write-
manifest.json
SharePoint – document library

29. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Upload app package to app catalog
SharePoint – document library

30. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Upload .js files to document library
SharePoint – document library

31. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
SharePoint – document library

32. Client side assets
Introduced in SPFx v1.4 to include static assets in .sppkg file

33. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

34. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

35. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

36. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
• SharePoint

37. AZURE
CDN

38. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
• Azure CDN

39. Office 365 - CDN

40. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

41. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
 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
Enable the SharePoint CDN origin

42. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

43. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

44. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
• Office 365 CDN

45. Tenant deploy
Introduced in SPFx v1.4

46. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

47. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

48. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

49. SharePoint Application
Lifecycle Management API
API to manage the deployment of your SharePoint Framework solutions

50. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
SharePoint Application Lifecycle Management

51. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
 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.
SharePoint Application Lifecycle Management

52. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Supported operations

53. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
• PnP ALM

54. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019

55. @ClubPowerBI @aosComm @GUSS_FRANCEPower Saturday 2019
Evaluations