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

1. #SPSNL18
I developed a SharePoint Framework solution, what to
do next and how to install it by code?

2. Thank you sponsors!

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

5. Building SPFx solution

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. Package your webpart

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

13. Updating solutions

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. Upgrading solutions

18. Upgrade SPFx version
Find outdated packages
• npm outdated

19. Upgrade SPFx version
Update specific package
Clean old build artifacts
Any problems? Delete node_modules and execute npm install

20. Upgrade SPFx version – O365 CLI
Install O365 CLI
Find outdated packages

23. Upgrade SPFx version - Yeoman
Find outdated Yeoman generator (installed globally)
Update

24. Upgrade SPFx version
BE CAREFULL!
• Always take a backup

25. Deploy possibilities

26. Deploy possibilities
SharePoint
Document library
Client side assets
Office 365
CDN
Azure
CDN
Extra
Tenant deploy

27. What defines the hosting location?

28. SHAREPOINT
Document library

29. SharePoint – document library
Create a document library
Create a folder/solution you want to host

30. SharePoint – document library
Update the CDNBasePath in write-manifest.json

31. SharePoint – document library
Upload app package to app catalog

32. SharePoint – document library
Upload .js files to document library

33. SharePoint – document library

34. Demo

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

39. Demo
CLIENT SIDE ASSETS

40. AZURE
CDN

41. Demo
Azure CDN

42. Office 365 - CDN

44. 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

46. Demo
Office 365 CDN

47. Tenant deploy
Introduced in SPFx v1.4

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

52. 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.

53. Supported operations

56. Demo
Plain REST Calls
PnP ALM

57. Questions?

58. Thanks for attending

59. Thank you sponsors!