This is a live walkthrough where we convert a common full trust solution to a SharePoint Framework solution. May the demo Gods be kind to me. Really, we will do it. Does not cover all possible scenarios, but I will show you the general workflow for converting your full trust solutions to SPFx solutions. I show you the proper configuration for your development environment. We walk through building the SPFx solutions and deploying it to Office 365. Lots of DO’s and DON’Ts will be shared. I’ll show you some of my scars too. From this session forward, you will want to hone your skills in modern SharePoint and convert everything to SPFx solutions. Attendee Takeaways: 1. Understand the why, the how, and what make up the SharePoint Framework (SPFx). 2. Discussion where we compare common Full Trust Solutions and options for converting to the SharePoint Framework (SPFx) in less than 1 hour.

1. Learn to convert your
Full Trust Solutions to the
SharePoint Framework (SPFx)
Brian Culver ● #SPSHOU ● April 28, 2018

2. Welcometothe9th Annual SharePointSaturday

4. About Brian Culver
 SharePoint Solutions Architect for Expert Point Solutions in
Houston, Texas.
 Microsoft Certified Master (MCM) in SharePoint
 Brian has worked in the Information Technology industry for
since 1998 and he has been working with SharePoint since
2005. His deep expertise includes Azure, Office365,
SharePoint, ASP.Net, SQL Server and Project Server. He
has been involved in many large SharePoint
implementations including Internet and Intranet sites, Partner
Portals, Enterprise Content Management and Governance,
and much custom application integration and development.
 Author, Speaker and Blogger
Email : brian.culver(at)expertpointsolutions.com
Twitter : @spbrianculver
LinkedIn : https://www.linkedin.com/in/bculver
Blog : http://blog.expertpointsolutions.com

5. Session Agenda
 What is the SharePoint Framework (SPFx)?
 Where does the SharePoint Framework fit?
 SharePoint Framework Toolchain
 JavaScript Frameworks
 SharePoint Framework Build Flow
 SharePoint Framework Developer Environment

6. What is the SharePoint Framework (SPFx)
 New client-side framework for building Modern UI
customizations
 https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/enterprise-guidance
 Built on the well-known web stack
 Open model, not tied to Microsoft tools
 Works great on the cloud
 Available on-premises for SP2016 with Feature Pack 2 (
and newer)
 Enterprise-ready when used with back-end services
 REST API and micro-services, Azure Functions, etc.
 Build client-side Web Parts or client-side Extensions
 Some key features of the SharePoint Framework:
 Runs in the context of the current user and the connection in
the browser. No IFRAMEs for the customization (JavaScript is
embedded directly to the page).
 The controls are rendered within the page DOM.
 The controls are responsive, accessible and mobile friendly.
 Developers are able to access the page lifecycle fully, including
rendering, loading, serializing and deserializing, configuration
changes, and more.
 Framework-agnostic. Use any JavaScript framework: React,
Knockout, Angular, Bootstrap and more.
 The toolchain is based on common open source client
development tools such as npm, nvm, TypeScript, Yeoman,
Yarn, webpack, and gulp.
 Performance is reliable.
 End users can use SPFx client-side solutions that are approved
by the tenant administrators (or their delegates) on all sites,
including self-service team, group, or personal sites.
 SPFx web parts can be added to both classic and modern
pages. Modern pages can only use client-side web parts.

7. Where does the SharePoint Framework fit?
 Full Trust Solutions
 Server-side code
 Full server side API
 Only supported on-premise
 Visual Studio Only
 Farm Scoped
 Webparts, Timers Jobs, Event Receivers (Feature, Web, Site,
List, etc.)
 Sandbox Solutions
 Restricted Server-side code
 Declarative Solutions only supported in SPO
 Visual Studio Only
 Site Collection Scoped
 Features & Declarative Solutions
 Site columns, content types, Lists, List instances, File
Resources, etc.
 SharePoint Add-in / Apps
 Client-side or Server-side code
 Client-side API
 Execution context was externalized from SharePoint and
displayed via IFRAMEs
 Visual Studio Only
 Tenant and Site Scoped
 SharePoint Framework (SPFx)
 Client-side code only
 Client-sde web parts and extensions
 Execution context is in the page (yeah Baby!!)
 Open source and cross-platform tooling
 Tenant Scoped
 Only way to customize modern pages
 Responsive, accessible and mobile friendly

8. IIS Express
Project Templates
SharePoint Framework Toolchain
SharePoint server side
SharePoint client side

9. JavaScript Frameworks

10. SharePoint Framework Build Flow

11. SPFx Developer Environment
Office 365
• Existing Office 365 tenant
• Partner Program
• Office 365 Developer program
• Sign up: https://dev.office.com/devprogram
• Separate from Subscription but great source
of information
• After tenant subscription is created, create the
following:
• App Catalog site
• Developer Site

12. SPFx Developer Environment
Node.js
• Installing Node.js LTS
• https://nodejs.org/en/download
• Run install
• Node -v
• Npm -v
• You can use Homebrew and/or Chocolatey
• https://chocolatey.org/
• Choco install nvm
NPM
• Installed with Node.js
• https://www.npmjs.com/
• Used to install just about everything

13. SPFx Developer Environment
Gulp
• Make sure Node,js and npm are installed
• Install Gulp
• npm install --global gulp-cli
TypeScript
• Installed with Node.js
• Strongly typed Language
• Interpreted language that is a cross between C#
and JavaScript
• Generates clean JavaScript

14. SPFx Developer Environment
 Office 365 Tenant
 App Catalog
 Developer Site
 Azure
 Node.js (LTS – Long Term Support) - www.nodejs.org
 NPM v. 3
 npm install -g npm@3
 Yeoman or Yarn
 npm install -g yo
 npm install -g yarn
 Chocoletey
 yarn install v0.24.6
 Gulp
 npm install -g yo gulp
 Yeoman SharePoint Generator
 npm install -g @microsoft/generator-sharepoint
 Configure SSL for localhost testing environment
 gulp trust-dev-cert
 IDE of Choice
 Notepad or Notepad++
 Visual Studio Code
 Visual Studio 2015/2017
 https://marketplace.visualstudio.com/items?itemName=Share
PointPnP.SPFxProjectTemplate
 Atom
 Storm
 Sublime
 Etc.
 Webpack

15. SPFx Developer Environment
 Console for Node.js
 PowerShell
 CMDER for Windows - http://cmder.net/
 Etc.
 Code Editor
 Visual Studio Code
 https://code.visualstudio.com/docs?start=true
 Visual Studio 2015/2017
 https://marketplace.visualstudio.com/items?itemName=SharePointPnP.SPFxProjectTemplate
 Atom
 Storm
 Sublime
 Etc.
 Source control system and Project management
 GitHub
 VSTS
 Etc.
 Additional tooling
 Fiddler - http://www.telerik.com/fiddler
 Postman - https://www.getpostman.com/

16. Code Editors
 Open source code editor
 Windows, Mac and Linux
 Built-in support for JavaScript,
TypeScript and Node.js
 Powered by rich ecosystem of
extensions for Visual Studio Code
 Extensions for other languages
 Debugger extensions
 Source code repository extensions
 And more…
•
•
•
•

Community-driven SPFx extensionPreferred SPFx code editor

17. Debugging code
Browsers
Developer Console
Visual Studio Code
Chrome Debugger Extension
Edge Debugger Extension
Work in progress
Support for:
Breakpoints
Watch variables
Step into/over

18. Writing conditional code
Global constants
Uses Webpack DefinePlugin
Different behaviors between
development and release builds
Available constants
DEBUG
UNIT_TEST
..and more internal constants

19. Custom gulp tasks
Define custom gulp tasks in gulpfile.js: build.subtask and build.task
let helloWorldSubtask = build.subTask('log-hello-world-subtask',
function(gulp, buildOptions, done) {
return gulp.src('images/*.png')
.pipe(gulp.dest('public'));
})
let helloWorldTask = build.task('hello-world', helloWorldSubtask);
gulp hello-world

20. Extend webpack configuration
Define your webpack loaders in gulpfile.js
npm i --save markdown-loader
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.module.loaders.push([
{ test: /.md$/, loader: "html!markdown" }
]);
return generatedConfiguration;
}
});

21. Component bundles
Components into a single .js file
Loaded on demand by SharePoint
Choose between:
One bundle per component
One bundle multiple
components
Dependencies are optional
Do not include dependencies in your bundle. Keep it small and simple!

22. Resources Useful
 http://dev.office.com/sharepoint
 https://dev.office.com/devprogram
 https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
 https://github.com/SharePoint/sp-dev-docs/wiki
 https://github.com/SharePoint/sp-dev-docs
 https://github.com/SharePoint/sp-dev-fx-webparts
 https://github.com/SharePoint/PnP-JS-Core
 https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
 https://www.youtube.com/playlist?list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq
 https://chocolatey.org/
 https://developer.microsoft.com/en-us/office/events


23. Questions
??
?
?

24. Constructive Feedback Is Appreciated
Great information,
but would like to
have learned more
about [Insert Topic]Brian – Your
presentation
was …
Good
Demos!
Thanks!

25. Thank you!
Brian Culver, MCM
Twitter:
@spbrianculver
E-mail:
brian.culver(at)expertpointsolutions.com
Blog:
http://blog.expertpointsolutions.com/
Slides:
http://www.slideshare.net/bculver