Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#SPSNL18
I developed a SharePoint Framework solution, what to
do next and how to install it by code?
Thank you sponsors!
yannickborghmans.com
Linkedin.com/in/yborghmans
@yborghmans
Yannick Borghmans
Office 365/SharePoint Technical Lead @Ventig...
Agenda
Building SPFx Deployment
SharePoint
Azure
App catalog
ALM API
Building SPFx solution
Package your webpart
Use the bundle gulp task to build, localize, and bundle the project
Use the package-solution gulp tas...
Package your webpart
Deploy App to the SharePoint App Catalog
Hint => Create a specific view for checked out packages
Upload static assets
JSON source file
• Manifest for webpart
JS Files
• Minified version of your code
• Localized strings
...
Install the app
Go to your SharePoint Site
Add an app
Add the web part to a SharePoint page
Create a page on your Office 365 site
Add the web part to the page
Demo
Files
Updating solutions
Update SPFx solution
Upgrade version (./config/package-solution.json)
Update SPFx solution
Gulp clean (optional)
Gulp bundle --ship
Gulp package-solution --ship
Upload to app catalog & upload ...
Update SPFx solution
No need to update app on sites => webparts are
automaticaly using the latest code
Attention! => Updat...
Upgrading solutions
Upgrade SPFx version
Find outdated packages
• npm outdated
Upgrade SPFx version
Update specific package
Clean old build artifacts
Any problems? Delete node_modules and execute npm i...
Upgrade SPFx version – O365 CLI
Install O365 CLI
Find outdated packages
Upgrade SPFx version - Yeoman
Find outdated Yeoman generator (installed globally)
Update
Upgrade SPFx version
BE CAREFULL!
• Always take a backup
Deploy possibilities
Deploy possibilities
SharePoint
Document library
Client side assets
Office 365
CDN
Azure
CDN
Extra
Tenant deploy
What defines the hosting location?
SHAREPOINT
Document library
SharePoint – document library
Create a document library
Create a folder/solution you want to host
SharePoint – document library
Update the CDNBasePath in write-manifest.json
SharePoint – document library
Upload app package to app catalog
SharePoint – document library
Upload .js files to document library
SharePoint – document library
Demo
Client side assets
Introduced in SPFx v1.4 to include static assets in .sppkg file
Demo
CLIENT SIDE ASSETS
AZURE
CDN
Demo
Azure CDN
Office 365 - CDN
Enable the SharePoint CDN origin
Open the SharePoint Online Management Shell
Execute the following Powershell commands to ...
Demo
Office 365 CDN
Tenant deploy
Introduced in SPFx v1.4
SharePoint Application
Lifecycle Management API
API to manage the deployment of your SharePoint Framework
solutions
SharePoint
Application
Lifecycle
Management
Add SharePoint Framework solution or SharePoint Add-in to tenant
app catalog.
...
Supported operations
Demo
Plain REST Calls
PnP ALM
Questions?
Thanks for attending
Thank you sponsors!
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
SPSNL - SPFx Deployment
Upcoming SlideShare
Loading in …5
×

SPSNL - SPFx Deployment

347 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SPSNL - SPFx Deployment

  1. 1. #SPSNL18 I developed a SharePoint Framework solution, what to do next and how to install it by code?
  2. 2. Thank you sponsors!
  3. 3. yannickborghmans.com Linkedin.com/in/yborghmans @yborghmans Yannick Borghmans Office 365/SharePoint Technical Lead @Ventigrate
  4. 4. Agenda Building SPFx Deployment SharePoint Azure App catalog ALM API
  5. 5. Building SPFx solution
  6. 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. 7. Package your webpart
  8. 8. Deploy App to the SharePoint App Catalog Hint => Create a specific view for checked out packages
  9. 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. 10. Install the app Go to your SharePoint Site Add an app
  11. 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. 12. Demo Files
  13. 13. Updating solutions
  14. 14. Update SPFx solution Upgrade version (./config/package-solution.json)
  15. 15. Update SPFx solution Gulp clean (optional) Gulp bundle --ship Gulp package-solution --ship Upload to app catalog & upload static assets (.js, .json)
  16. 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. 17. Upgrading solutions
  18. 18. Upgrade SPFx version Find outdated packages • npm outdated
  19. 19. Upgrade SPFx version Update specific package Clean old build artifacts Any problems? Delete node_modules and execute npm install
  20. 20. Upgrade SPFx version – O365 CLI Install O365 CLI Find outdated packages
  21. 21. Upgrade SPFx version - Yeoman Find outdated Yeoman generator (installed globally) Update
  22. 22. Upgrade SPFx version BE CAREFULL! • Always take a backup
  23. 23. Deploy possibilities
  24. 24. Deploy possibilities SharePoint Document library Client side assets Office 365 CDN Azure CDN Extra Tenant deploy
  25. 25. What defines the hosting location?
  26. 26. SHAREPOINT Document library
  27. 27. SharePoint – document library Create a document library Create a folder/solution you want to host
  28. 28. SharePoint – document library Update the CDNBasePath in write-manifest.json
  29. 29. SharePoint – document library Upload app package to app catalog
  30. 30. SharePoint – document library Upload .js files to document library
  31. 31. SharePoint – document library
  32. 32. Demo
  33. 33. Client side assets Introduced in SPFx v1.4 to include static assets in .sppkg file
  34. 34. Demo CLIENT SIDE ASSETS
  35. 35. AZURE CDN
  36. 36. Demo Azure CDN
  37. 37. Office 365 - CDN
  38. 38. 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
  39. 39. Demo Office 365 CDN
  40. 40. Tenant deploy Introduced in SPFx v1.4
  41. 41. SharePoint Application Lifecycle Management API API to manage the deployment of your SharePoint Framework solutions
  42. 42. 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.
  43. 43. Supported operations
  44. 44. Demo Plain REST Calls PnP ALM
  45. 45. Questions?
  46. 46. Thanks for attending
  47. 47. Thank you sponsors!

×