1. 30th September 2017
Milan

2. Introduction to SharePoint Framework (SPFx)
Fabio Franzini - Office Servers & Services MVP
@franzinifabio
fabiofranzini.com

3. #SPSMilan

4. A Huge “Thank You!” To Our Sponsors …
In cooperation with

5. Agenda
• Introducing SharePoint Framework (SPFx)
• SPFx Toolchain
• SPFx Webpart
• Deploy SPFx WebPart
• Q&A

6. INTRODUCING SHAREPOINT
FRAMEWORK

7. SharePoint – Evolving across versions
2013
APP/ADD-IN MODEL
2010
SANDBOX &
CSOM
<= 2007
FULL TRUST
2016
CLOUD FRIENDLY SPFx

8. WHAT IS THE SPFx?
Is a page and web part model with full support for client-side SharePoint development using modern
web technology and tools
• Runs in the context of the current user and connection in the browser
• The controls are rendered in the normal page DOM, NO iFrames!
• The controls are responsive and accessible by nature
• It's framework agnostic
• The toolchain is based on common open source client development tools
• Component types:
• Client Web Part
• Extensions
• Application Customizer
• Field Customizer
• Command Sets
• SPFx web parts can be added to both classic and modern pages
• Available in the Cloud and On-Prem (SP 2016 Feature Pack 2)

9. SPFx principles
• New/Modern toolchain
• Client-side rendering
• No iFrame needed
• No JavaScript Injection needed
• No server side-code needed
• IDE/Development platform agnostic

10. SPFX TOOLCHAIN

11. TOOLCHAIN COMPARISON
IIS Express
VS Project 
New  <Template>
C#
MS Build

12. SPFx DEVELOPMENT ENVIRONMENT
Use any most OS / workstation
1. Office 365 / SharePoint Online tenant
2. App catalog for deployment
3. Install nodeJS (current Long Term Support (LTS) version)
4. Yeoman and Gulp
• C:> npm i –g yo gulp
5. SPFx Yeoman generator
• C:> npm i –g @microsoft/generator-sharepoint
• C:> npm update –g @microsoft/generator-sharepoint
6. Generate local Trust Cert
• C:> gulp trust-dev-cert
7. Use code editor
• VS Code / Sublime Text / NotePad++, etc

13. DEMO

14. SPFX WEBPART

15. CREATE YOUR FIRST SPFx WEBPART
1. C:> md helloworld-webpart
2. C:> cd helloworld-webpart
3. C:> yo @microsoft/sharepoint
• Working on it… 
• You can execute yo command again to add more webparts to project
4. C:> gulp serve
5. Check out your first WebPart!
1. May also load in SPO workbench:
“../_layouts/15/workbench.aspx”

16. SPFx PROJECT FOLDER OVERVIEW
Get to know your Webpart folder structure
• src: primary webpart TypeScript source code
• config: json configuration files for build process
• typings: TypeScript typings for JS libs – legacy
• lib: Build files (TS compiled JS) ready for bundle
• dist: Final web ready code for distribution
• sharepoint: .spapp file for App Catalog
• node_modules: NodeJS modules (JS) for toolchain

17. DEMO

18. DEPLOY SPFX WEBPART

19. PACKAGE YOUR WEBPART FOR
DEPLOYMENT
1. Set deployment configuration
• config/package-solution.json – general settings and package name
• write-manifests.json – CDN / bundle location – for dev, can serve locally: gulp serve --nobrowser
2. C:> gulp clean (cleans sharepoint and temp folders)
3. C:> gulp build (Rebuilds the solution)
4. C:> gulp bundle (Creates the solution bundles)
5. C:> gulp package-solution (Creates /sharepoint/”webpart”.spapp)
6. C:> gulp –ship (minifies bundle and reads in CDN info from config/write-
manifests.json)
7. C:> gulp package-solution --ship (Recreates /sharepoint/”webpart”.spapp with
CDN info)

20. PACKAGE YOUR WEBPART FOR
DEPLOYMENT
1. After solution created, can then add to SharePoint
2. Add .spapp to app catalog
3. Add Add-In to SharePoint site
4. Add WebPart in site to content page
5. Configure CDN
• Office 365 CDN: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-
started/hosting-webpart-from-office-365-cdn
• Azure CDN: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-
cdn
6. Or manually deploy solution bundle and config write-manifests.json

21. DEMO

22. QUESTIONS&
ANSWERS

23. Thank You!
Please fill the feedback form!

24. 30th September 2017
Milan