SharePoint Development with the SharePoint Framework
-
Upload
joanna-cheshire -
Category
Technology
-
view
113 -
download
4
Transcript of SharePoint Development with the SharePoint Framework
Agenda
2
What is SharePoint Framework?Framework vs AppsSetting up test siteSetting up for developmentCreate the web partTest in workbenchTest in SharePointDeploy to SharePoint
About me
3
SharePoint Consultant for 5 yearsWorked for SparkHound for over 3 yearsTaught SharePoint workshops training ASP.Net developers in SharePoint developmentMicrosoft Certified Professional – HTML5 and CSS3
What is the SharePoint Framework
4
A fully supported client side development frameworkEnhanced Script Editor Web partDevelop using TypeScript and JavaScriptUses REST or JavaScript Client Object Model for SharePoint interactionEasily integrate with favorite JavaScript LibraryDevelop locally or through SharePoint using Node.JSCreate reusable web parts to be used throughout your siteCreate Web hooks for pushing and consuming data
Apps Vs. SharePoint Framework
5
FrameworkRun in context (direct access to site, web, current user) Access to full page lifecycleChoice of any dev environmentUses TypeScript
AppsRun in an IframeMust use Visual Studio or NAPA JavaScript or MVCProvider hosted apps
Setting Up Development Site
7
Create a developer tenantNeed developer tenant for SharePoint deploymentStill in Preview phase
Create App catalog siteUsed for storing web part
Create a developer site collectionOther site collections will not work
Setting up for developmentAdd ClientSideApplicationId column to document library
Needed for workbench.aspxDownload workbench.aspx from GitHub
Setting Up Development PC
8
Install NodeJS 3.0 or laterserver
Install a code editorVisual Studio Code
Install windows-build-toolsCompiler tools
Install gulpTask automation
Install YeomanTemplate generator
Creating a web part
9
Create File DirectoryRun YeomanName web partGive a descriptionSelect JS Frameworks
Allows framework to preinstall knockout or reactTest: gulp serve
Web Part Breakdown
10
ConfigStores configurations for CDN deployment and test serverReferences to external files
Node_modulesMaster storage of JS files
SrcTypeScript files
TempDeployment files for debug and release
TypingsTypeScript definitions
Deploy to SharePoint
12
Set CDN URL write-manifests.jsonSetup azure CDN credentials in deploy-azure-storage.json (if applicable)Run gulp bundle --ship
Bundles files and scriptsRun gulp package-solution –ship
Creates feature for deployment to app storeUpload app to app storeAdd app to siteAdd web part to page
Deploy to SharePoint
13
DebugUses local server Filename does not changeFiles are not minimized
ReleaseUses CDN URLFiles generated have unique GUID Must upload web part to app store everytimeMinimized Files
Important Links
15
Walkthroughshttp://dev.office.com/sharepoint/docs/spfx
Workbenchhttps://github.com/SharePoint/sp-dev-docs/blob/master/workbench.aspx
Troubleshootinghttp://sharepoint.stackexchange.com/#spfx, #spfx-webparts, #spfx-tooling
Type Script Definition repositoryhttp://definitelytyped.org/