Here are the steps to add PnP-JS to the React web part project:
1. Stop any running gulp serve process if it's running
2. Install PnP-JS packages:
```
npm install @pnp/common @pnp/logging @pnp/odata @pnp/sp @pnp/graph --save
```
3. Import PnP-JS packages at the top of HelloWorldWebPart.ts:
```
import { sp } from '@pnp/sp';
```
4. Establish the PnP context:
```
sp.setup({
spfxContext: this.context
});
```
5
2. Bootcamp Outline
Session 1
Getting Started
O365 Developer Program
Tenant Setup
Client Setup
Intro to SPFx
Session 2
Building You First Web Part
Scaffolding
Building
Deployment
Pulling Data from SharePoint
Intro to PnP-JS
Intro to PnP-JS
Part 3
Intro to React
Rebuild Part 2 using React
Intro to Office UI Fabric
Text Box
Button
Creating New Items via PnP
Part 4
SPFx in Teams
Building a Package for Teams
Creating Teams Tab
3. Organizers
Thomas Daly
Office Servers & Services MVP
O365 UG + SPSNYC
SoHo Dragon
Team Lead
thomasd@sohodragon.com
@_tomdaly_
Manpreet Singh
Office Servers & Services MVP
C# Corner MVP
SPSPhilly
SharePoint Consultant
manpreetletterbox@hotmail.com
Jason Rivera
Tri-State Office 365 UG + SPSPhilly
Solution Architect
Anexinet
jrivera@anexinet.com
@SharePointJR
4. Breakfast Sponsor
Microsoft Partner
Inc 5000 [3 years]
What We Do
Digital Workspace
Cloud Services [Azure]
Managed Services
Data & Analytics
Quality Assurance
Development
Staffing / Recruitment
https://sohodragon.nyc/
6. Bootcamp Outline
Session 1
Getting Started
O365 Developer Program
Tenant Setup
Client Setup
Intro to SPFx
Session 2
Building You First Web Part
Scaffolding
Building
Deployment
Pulling Data from SharePoint
Intro to PnP-JS
Intro to PnP-JS
Part 3
Intro to React
Rebuild Part 2 using React
Intro to Office UI Fabric
Text Box
Button
Creating New Items via PnP
Part 4
SPFx in Teams
Building a Package for Teams
Creating Teams Tab
7. Office 365 Developer Subscription
Sign up – Online, FREE [Required Live Account]
https://developer.microsoft.com/en-us/office/dev-program
Starting in April 2019, we offer renewable 90-day subscriptions
What's included in the developer subscription?
Office 365 E3 – 25 User License
SharePoint, Teams …. everything else
9. Create App Catalog Site
Go to the Classic SharePoint Admin Center by entering the following URL in your browser.
Replace yourtenantprefix with your Office 365 tenant prefix.
https://yourtenantprefix-admin.sharepoint.com
In the left sidebar, select the Classic Features > apps menu item, and then select app catalog.
Select OK to create a new app catalog site.
On the next page, enter the following details:
Title: Enter app catalog.
Web Site Address suffix: Enter your preferred suffix for the app catalog; for example: apps.
Administrator: Enter your username, and then select the resolve button to resolve the username.
Select OK to create the app catalog site.
SharePoint creates the app catalog site, and you are able to see its progress in the SharePoint admin
center.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-
tenant#to-create-an-app-catalog-site
10. Create Test Site Collection
Go to the SharePoint Admin Center by entering the following URL in your browser.
Replace yourtenantprefix with your Office 365 tenant prefix.
https://yourtenantprefix-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx
In the left sidebar, select Sites > Active Sites.
In the toolbar, select Create.
In the Create a site dialog, select Communication Site.
In the panel that appears, enter the following details:
Choose a design: choose blank.
Site name: Enter a title for your site; for example: Test Site.
Site owner: Specify the name / email address of the site owner.
Select Finish to create the site collection.
12. Software / Tooling
Install NodeJS
Install NodeJS LTS version 10
Install a code editor
Visual Studio Code
Install Yeoman and gulp
npm install -g yo gulp
Install Yeoman SharePoint generator
npm install -g @microsoft/generator-
sharepoint
Trusting the self-signed developer certificate
Do this after creating your first project
gulp trust-dev-cert
Install Google Chrome
optional but recommended
Extensions
SP Editor
React Developer Tools
Internet Explorer 11
Not Good for Web Development
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-
environment
14. SharePoint Framework (SPFx)
Page / Web Part model that provides full support for client-side SharePoint development
Easy integration with SharePoint data
Support for Open Source tooling
“The” customization model for Office 365
Support for SharePoint 2016 Feature Pack 2, SharePoint 2019, & Office 365
15. Key Features
It runs in the context of the current user and connection in the browser.
NO iframes(JavaScript is embedded directly to the page).
The controls are rendered in the normal page DOM.
It is framework-agnostic. You can use any JavaScript framework that you like: React, Handlebars,
Knockout, Angular, and more.
The toolchain is based on common open source client development tools such as npm,
TypeScript, Yeoman, webpack, and gulp.
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.
16.
17. Session 2
First Look at SPFx - Building your first web part, talking to SharePoint via REST & PnP-JS
18. Bootcamp Outline
Session 1
Getting Started
O365 Developer Program
Tenant Setup
Client Setup
Intro to SPFx
Session 2
Building You First Web Part
Scaffolding
Building
Deployment
Pulling Data from SharePoint
Intro to PnP-JS
Intro to PnP-JS
Part 3
Intro to React
Rebuild Part 2 using React
Intro to Office UI Fabric
Text Box
Button
Creating New Items via PnP
Part 4
SPFx in Teams
Building a Package for Teams
Creating Teams Tab
20. Create Web Part Project
Create a new project directory in your favorite location.
md helloworld-webpart
Go to the project directory.
cd helloworld-webpart
Create a new HelloWorld web part by running the Yeoman SharePoint Generator.
yo @microsoft/sharepoint
21. Create Web Part Project (cont)
When prompted:
Accept the default helloworld-webpart as your solution name, and then select Enter.
Select SharePoint Online only (latest), and select Enter.
Select Use the current folder for where to place the files.
Select N to allow the solution to be deployed to all sites immediately.
Select N on the question if solution contains unique permissions.
Select WebPart as the client-side component type to be created.
22. Create Web Part Project (cont)
The next set of prompts ask for
specific information about your web
part:
Accept the default HelloWorld as
your web part name, and then
select Enter.
Accept the default HelloWorld
description as your web part
description, and then select Enter.
Accept the default No JavaScript
web framework as the framework
you would like to use, and then
select Enter.1
23. Create Web Part Project (cont)
At this point, Yeoman installs the
required dependencies and
scaffolds the solution files along
with the HelloWorld web part. This
might take a few minutes.
When the scaffold is complete, you
should see the following message
indicating a successful scaffold.
24. Preview the web part
Enter the following command in the
console to open VS Code:
code .
Enter the following to open the
Terminal in VS Code
CTRL + `
Enter the following command in the
terminal to build and preview your
web part:
gulp serve
25. What is Happening?
SharePoint client-side development tools use gulp as the task runner to handle build process
tasks such as:
Bundling and minifying JavaScript and CSS files.
Running tools to call the bundling and minification tasks before each build.
Compiling SASS files to CSS.
Compiling TypeScript files to JavaScript.
26. SharePoint Workbench
Developer design
surface that enables
you to quickly preview
and test web parts
without deploying them
in SharePoint.
27. Add Your Web Part
To add the HelloWorld web part, select the add icon (this icon
appears when you mouse hovers over a section as shown in the
previous image).
This opens the toolbox where you can see a list of web parts
available for you to add. The list includes the HelloWorld web
part as well other web parts available locally in your
development environment.
28. Add Your Web Part (cont)
Select HelloWorld to add the web
part to the page.
31. Packaging the Web Part
If gulp serve is still running, stop it from running by hitting, ctrl + C
In the console window, enter the following command to package your client-side solution that
contains the web part:
gulp clean
gulp build --ship
gulp bundle --ship
gulp package-solution –-ship
For dev builds you don’t need the –ship but then you must be running gulp serve
Simple Build Script for the SharePoint Framework
32. Deploy to App Catalog
Go to your site's app catalog.
Upload or drag and drop
the helloworld-webpart.sppkg to
the app catalog.
33. Deploy to App Catalog (cont)
This deploys the client-side
solution package. Because this is
a full trust client-side solution,
SharePoint displays a dialog and
asks you to trust the client-side
solution to deploy.
Select Deploy.
Notice that you can see if there's
any exceptions or issues in the
package by looking the App
Package Error Message column in
the app catalog.
35. Install App in Site
Go to your developer site
collection or site collection
which you want to use for
testing
Select the gears icon on the
top nav bar on the right, and
then select Add an app to go
to your Apps page.
In the Search box,
enter helloworld, and select
Enter to filter your apps.
36. Install App in Site (cont)
Select the helloworld-
webpart-client-side-
solution app to install the
app on the site.
The client-side solution
and the web part are
installed on your
developer site.
37. Add Web Part to Modern Page
In your browser, go to your site
where the solution was just
installed.
Select the gears icon in the top
nav bar on the right, and then
select Add a page.
Edit the page.
Open the web part picker and
select your HelloWorld web
part.
40. Create a Custom List
Navigate to your site
Gear > Add an app > Custom List
Name: Test
Make at least 2 items
41. Live Development
Enter the following command in the console to build and
preview your web part:
gulp serve
On the Page with the webpart add the following to the end of
the url
?loadSPFX=true&debugManifestsFile=https://localhost
:4321/temp/manifests.js
BONUS: use SP-Editor [Chrome Extension] to load debug url
52. What is PnP-JS?
PnP-JS is a collection of fluent
libraries for consuming SharePoint,
Graph, and Office 365 REST APIs in
a type-safe way.
Benefits:
Intellisense
Typing
Asynchronous
Caching
Clear Code Intent
Abstraction
Open Source
53. Getting Started
Install
npm install
@pnp/logging
@pnp/common
@pnp/odata @pnp/sp
@pnp/graph --save
Establish Context
See Right Image
Stop any running gulp serve before installing
60. Bootcamp Outline
Session 1
Getting Started
O365 Developer Program
Tenant Setup
Client Setup
Intro to SPFx
Session 2
Building You First Web Part
Scaffolding
Building
Deployment
Pulling Data from SharePoint
Intro to PnP-JS
Intro to PnP-JS
Part 3
Intro to React
Rebuild Part 2 using React
Intro to Office UI Fabric
Text Box
Button
Creating New Items via PnP
Part 4
SPFx in Teams
Building a Package for Teams
Creating Teams Tab
62. What is React?
JavaScript library for building user interfaces
At a minimum, know this:
Components: These are the building blocks of your app. You want to make them as modular as possible.
State: internal data, that when changed caused the UI to re-render. You own this data.
Props: data / functions, passed to a component. You don’t own this data.
Life Cycle Methods: functions that do things at certain points
64. Create React Web Part Project
Create a new project directory in your favorite location.
md helloworld-webpart-2
Go to the project directory.
cd helloworld-webpart-2
Create a new HelloWorld web part by running the Yeoman SharePoint Generator.
yo @microsoft/sharepoint
65. Create Web Part Project (cont)
When prompted:
Accept the default helloworld-webpart-2 as your solution name, and then select Enter.
Select SharePoint Online only (latest), and select Enter.
Select Use the current folder for where to place the files.
Select N to allow the solution to be deployed to all sites immediately.
Select N on the question if solution contains unique permissions.
Select WebPart as the client-side component type to be created.
66. Create Web Part Project (cont)
The next set of prompts ask for
specific information about your web
part:
Accept the default HelloWorld as
your web part name, and then
select Enter.
Accept the default HelloWorld
description as your web part
description, and then select Enter.
Select React as the framework
you would like to use, and then
select Enter.1
67. Open with Visual Studio Code
Type the following command:
code .
Use the VS Code console to run
gulp commands
68. Create Web Part Project (cont)
At this point, Yeoman installs the
required dependencies and
scaffolds the solution files along
with the HelloWorld web part. This
might take a few minutes.
When the scaffold is complete, you
should see the following message
indicating a successful scaffold.
69. Next Steps
Open VS Code
Build / Bundle / Package
Deploy to SharePoint App Catalog
Add App to SharePoint Site
Add to Page
70. Add PnP-JS to Project
Install
npm install
@pnp/logging
@pnp/common
@pnp/odata @pnp/sp
@pnp/graph --save
Establish Context in
HelloWorldWebPart.ts
See Right Image
79. Intro to Office UI Fabric
The Design Language of Microsoft Products
80. What is the Office UI Fabric?
Microsoft’s UX Framework to create seamless experiences in Microsoft
products
Two Flavors Available
Fabric React – open-source React front-end framework designed to build
experiences that fit seamlessly into a broad range of Microsoft products.
Fabric Core – open-source collection of CSS classes and Sass mixins that give you
access to Fabric's colors, animations, fonts, icons and grid.
Think of it as a bunch of styles and a bunch of controls… similar to bootstrap
108. Bootcamp Outline
Session 1
Getting Started
O365 Developer Program
Tenant Setup
Client Setup
Intro to SPFx
Session 2
Building You First Web Part
Scaffolding
Building
Deployment
Pulling Data from SharePoint
Intro to PnP-JS
Intro to PnP-JS
Part 3
Intro to React
Rebuild Part 2 using React
Intro to Office UI Fabric
Text Box
Button
Creating New Items via PnP
Part 4
SPFx in Teams
Building a Package for Teams
Creating Teams Tab
110. Teams Folder
Starting with the SharePoint Framework v1.8, scaffolding
will also include additional ./teams folder
Teams folder contains the following two files:
[componentId]_color.png - Default small picture for a
tab
[componentId]_outline.png - Default large picture for
a tab
These images will be used as icons in Microsoft Teams.
Teams Manifest – Defines the app, by default not there
SharePoint will create it for you!@
https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/web-parts/get-started/using-
web-part-as-ms-teams-tab
118. Rebuild
If gulp serve is still running, stop it from running by hitting, ctrl + C
In the console window, enter the following command to package your client-side solution that
contains the web part:
gulp clean
gulp build --ship
gulp bundle --ship
gulp package-solution –-ship
Simple Build Script for the SharePoint Framework
127. Reach Out
Thomas Daly
Office Servers & Services MVP
O365 UG + SPSNYC
SoHo Dragon
Team Lead
thomasd@sohodragon.com
@_tomdaly_
Manpreet Singh
Office Servers & Services MVP
C# Corner MVP
SPSPhilly
SharePoint Consultant
manpreetletterbox@hotmail.com
Jason Rivera
Tri-State Office 365 UG + SPSPhilly
Solution Architect
Anexinet
jrivera@anexinet.com
@SharePointJR
128. Need Assistance?
Microsoft Partner
Inc 5000 [3 years]
What We Do
Digital Workspace
Cloud Services [Azure]
Managed Services
Data & Analytics
Quality Assurance
Development
Staffing / Recruitment
https://sohodragon.nyc/
129. Resources
All Content comes from the
Official Microsoft Documentation
Code / Cheat Sheets - Part 2, 3
& 4 – all on github
https://github.com/tom-
daly/demos/tree/master/m365-
bootcamp
Slides
https://www.slideshare.net/tomm
daly/m365-global-developer-
bootcamp-2019
130. Voitanos On-Demand Training
The best SPFx training resource – hands down,
always updated, on demand.
~$750 for the Ultimate Package. Worth It!
Taught by Andrew Connell, 15+ year MVP in
SharePoint / Office 365
“Understanding the SPFx Dev Toolchain”
email course [FREE]
Mastering the SharePoint Framework On
Demand