Power Saturday 2019 F6 - I developed a SPFx solution, what to do next and how to install it by code?

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