Show Menu
Cheatography
  1. Home >
  2. Programming >

SPFX Cheat Sheet (DRAFT) by

A quick guide to learn how to work with SharePoint framework asap.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Download & Install Requir­ements

Visual Studio Code
NodeJs
Gulp, Yeoman & Yeoman SharePoint Generator
execute 
npm install gulp-cli yo @micro­sof­t/g­ene­rat­or-­sha­repoint --global
in command prompt`

Creating a Solution

Create project
 
yo @micro­sof­t/s­har­epoint
inside desired folder

Deploying a Solution

Bundle solution. This will generate the scripts required to run the webpart on the site.
 
Gulp bundle -–ship
Package solution. This will create a .sppkg file in your sharepoint folder that can be added to the appcat­alog.
 
Gulp packag­e-s­olution --ship

Updating a Solution

View outdated packages
 
npm outdated
Install specific package versions
 
npm install [packa­ge-­nam­e]@­[ve­rsi­on-­number]
e.g. 
npm install expres­s@4.16.1
 
npm install -g @pnp/c­li-­mic­ros­oft365
then 
m365 spfx project upgrade --toVe­rsion [version]
 

Working with the solution

Trust the develo­pment SSL certif­icate included in the toolchain
 
gulp trust-­dev­-cert
(only once inside root folder of project)
Start the local web server & launch the hosted workbench
 
gulp serve
Open solution in specific tenant (site)
Browse to 
https:­//<­you­r-S­har­ePo­int­-si­te>­/_l­ayo­uts­/wo­rkb­enc­h.aspx
and add webparts
Install packages
 
npm install @<p­ack­age>
e.g. 
npm install @pnp/sp @pnp/graph --save
Import packages into solution
 
import { SPFI, SPFx } from "­@pn­p/s­p";
(inside file)
Clean solution (clear the temporary folders and files created in the solution. Some of the folders cleaned up during the process are temp, dist)
 
gulp clean
Build solution (compiles the code and creates the necessary temporary files and folders)
 
gulp build
 

Handy Packages

npm install -g @pnp/c­li-­mic­ros­oft365
Helps with problems and updates
 
npm i @micro­sof­t/a­ppl­ica­tio­nin­sig­hts­-re­act-js @micro­sof­t/a­ppl­ica­tio­nin­sig­hts-web
Find out about the perfor­mance and usage of your web page or app
 
npm install react-­loc­ali­zation
Gives you full control over which language is being selected
 
npm i tinymce
Rich text editing
 
npm install @pnp/sp @pnp/graph --save
Easy and intuitive consuming of ShareP­oint, Graph, and Office 365 REST APIs
 
npm install @pnp/s­pfx­-co­ntr­ols­-react --save --save­-exact
Easy access to handy react controls
 
npm i bootstrap
Responsive layout
 
npm install -g npx
Start spfx solution with older version, e.g. 
npx -p yo -p @micro­sof­t/g­ene­rat­or-­sha­rep­oin­t@1.12.1 yo @micro­sof­t/s­har­epoint