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.

SharePoint Development with the SharePoint Framework


Published on

presented at SharePoint TechFest Houston 2016

Published in: Technology
  • Login to see the comments

  • Be the first to like this

SharePoint Development with the SharePoint Framework

  1. 1. SharePoint TechFest SharePoint Development with the SharePoint Framework
  2. 2. Agenda 2 What is SharePoint Framework? Framework vs Apps Setting up test site Setting up for development Create the web part Test in workbench Test in SharePoint Deploy to SharePoint
  3. 3. About me 3 SharePoint Consultant for 5 years Worked for SparkHound for over 3 years Taught SharePoint workshops training ASP.Net developers in SharePoint development Microsoft Certified Professional – HTML5 and CSS3
  4. 4. What is the SharePoint Framework 4 A fully supported client side development framework Enhanced Script Editor Web part Develop using TypeScript and JavaScript Uses REST or JavaScript Client Object Model for SharePoint interaction Easily integrate with favorite JavaScript Library Develop locally or through SharePoint using Node.JS Create reusable web parts to be used throughout your site Create Web hooks for pushing and consuming data
  5. 5. Apps Vs. SharePoint Framework 5 Framework Run in context (direct access to site, web, current user) Access to full page lifecycle Choice of any dev environment Uses TypeScript Apps Run in an Iframe Must use Visual Studio or NAPA JavaScript or MVC Provider hosted apps
  6. 6. Walkthrough 6 Create a web part
  7. 7. Setting Up Development Site 7 Create a developer tenant Need developer tenant for SharePoint deployment Still in Preview phase Create App catalog site Used for storing web part Create a developer site collection Other site collections will not work Setting up for development Add ClientSideApplicationId column to document library Needed for workbench.aspx Download workbench.aspx from GitHub
  8. 8. Setting Up Development PC 8 Install NodeJS 3.0 or later server Install a code editor Visual Studio Code Install windows-build-tools Compiler tools Install gulp Task automation Install Yeoman Template generator
  9. 9. Creating a web part 9 Create File Directory Run Yeoman Name web part Give a description Select JS Frameworks Allows framework to preinstall knockout or react Test: gulp serve
  10. 10. Web Part Breakdown 10 Config Stores configurations for CDN deployment and test server References to external files Node_modules Master storage of JS files Src TypeScript files Temp Deployment files for debug and release Typings TypeScript definitions
  11. 11. Walkthrough 11 Test App
  12. 12. Deploy to SharePoint 12 Set CDN URL write-manifests.json Setup azure CDN credentials in deploy-azure-storage.json (if applicable) Run gulp bundle --ship Bundles files and scripts Run gulp package-solution –ship Creates feature for deployment to app store Upload app to app store Add app to site Add web part to page
  13. 13. Deploy to SharePoint 13 Debug Uses local server Filename does not change Files are not minimized Release Uses CDN URL Files generated have unique GUID Must upload web part to app store everytime Minimized Files
  14. 14. Walkthrough 14 Deploy to SharePoint
  15. 15. Important Links 15 Walkthroughs Workbench docs/blob/master/workbench.aspx Troubleshooting #spfx, #spfx-webparts, #spfx-tooling Type Script Definition repository