While SharePoint Framework being the upcoming trend in 2017 for the modern SharePoint landscape, SharePoint developers not only saw their tool belt being extended but there was also a shift becoming a modern developer. With modern development some new tools were introduced for the SharePoint developers, like Gulp, Yeoman, Npm,... Development is one thing, but deploying these solutions? That's another matter. Uploading wsp files to SharePoint servers and deploying web applications for SharePoint Add-in's to Azure, are already known actions. But with SharePoint Framework, code has to be deployed to a hosting service as an Azure CDN or a SharePoint CDN/Library and the app package has to be uploaded to the app catalog (like with SharePoint add-ins). Those are new things for the 'classic' SharePoint developers, as also installing solutions by the use the new Application Lifecyle Management API of SharePoint which makes it possible to deploy by code. This session will provide an overview of the deployment options to Azure and SharePoint and will provide a demo intensive part by creating a deployment tool to install/uninstall/retract/upgrade your app on specific sites and on specific site collection catalogs.

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

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

22. Deploy possibilities

23. What defines the hosting location?

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

25. SHAREPOINT
Document library

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

42. DEMO
Office 365 CDN

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.

51. Supported operations

52. Demo
Plain REST Calls
PnP ALM

53. Questions?