This is a walkthrough on the tools, steps and process for converting common full trust solution to SharePoint Framework solutions. We will cover several scenariosn and discuss how to handle each appropriately. We have established a general workflow for converting your full trust solutions to SPFx solutions that I will share. We also will cover the proper configuration for your development environment. Lastly I will quickly highlight and show the process for building an SPFx solution 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. A demonstration where we take a common Full Trust Solutions and covert it to the SharePoint Framework (SPFx).
3. I share lots of tips, DO’s and DON’Ts to save you hours and days of your life. You’re welcome :)
2. 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
3. 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
4. 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.
5. 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
9. 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
• Pair with Azure for:
• Azure Web Applications
• Azure Web Jobs
• Azure Functions
• Azure …. Etc.
10. SPFx Developer Environment
Node.js, NPM, Typescript
• Installing Node.js LTS (8.11.1 w/ NPM 5.6.0)
• https://nodejs.org/en/download
• Run install
• node -v
• npm -v
NPM
• Installed with Node.js
• https://www.npmjs.com/
• Used to install just about everything
TypeScript
• Strongly typed Language
• Interpreted language that is a cross between
C# and JavaScript
• Generates clean JavaScript
Chocolatey (Optional)
• You can use Chocolatey and/or Homebrew
• https://chocolatey.org/
NVM (Node Version Manager)
• Choco install nvm
Yeoman and Yarn
• npm install -g yo
• npm install -g yarn
Gulp
• Make sure Node,js and npm are installed
• Install Gulp
• npm install -g gulp
• npm install -g gulp-cli
• Configure SSL for localhost testing
environment
• gulp trust-dev-cert
11. 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
Notepad or Notepad++
Etc.
Source control system and Project management
GitHub
VSTS
Etc.
Additional tooling
Fiddler - http://www.telerik.com/fiddler
Postman - https://www.getpostman.com/
12. 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
13. SPFx - Helloworld
In a console:
md helloworld-webpart
cd helloworld-webpart
yo @microsoft/sharepoint
Hit Enter through all the options
gulp trust-dev-cert
code .
gulp serve
14. Helloworld Deployment
After making changes, in console:
Test with real data:
https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx
Packaging:
cd helloworld-webpart
Update package-solution.json
gulp package-solution
helloworld-webpart.sppkg
Deploy helloworld-webpart.sppkg to App Catalog
Add App to a page
15. Helloworld Deployment
Use Office 365 CDN:
Connect-SPOService -Url https://contoso-admin.sharepoint.com
Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public
Set-SPOTenantCdnEnabled -CdnType Public
16. Beyond Helloworld
Patterns and Practices Group - https://github.com/SharePoint
PnP
SharePoint / Office 365 Developer Patterns and Practices
PnP-PowerShell
SharePoint PnP PowerShell CmdLets
PnP-JS-Core
Repository for the PnP JavaScript Core component development together with community members
sp-dev-docs
SharePoint Developer Documentation
sp-dev-fx-webparts
Code samples and developer content targeted towards SharePoint Framework client-side web parts.
sp-dev-fx-extensions
Code samples and developer content targeted towards SharePoint Framework client-side extensions.
http://dev.office.com/sharepoint
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
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!
24. Constructive Feedback Is Appreciated
Great information,
but would like to
have learned more
about [Insert Topic]Brian – Your
presentation
was …
Good
Demos!
Thanks!