SharePoint TechFest

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

Walkthrough

6

Create a web part

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

Walkthrough

11

Test App

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

Walkthrough

14

Deploy to SharePoint

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/