Introduction to SharePoint Framework (SPFx)

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

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

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

INTRODUCING SHAREPOINT FRAMEWORK

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

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)

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

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

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

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”

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

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)

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

Thank You! Please fill the feedback form!

Introduction to SharePoint Framework (SPFx)

In this document