Show Menu

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
Gulp, Yeoman & Yeoman SharePoint Generator
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]
npm install expres­s@4.16.1
npm install -g @pnp/c­li-­mic­ros­oft365
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
and add webparts
Install packages
npm install @<p­ack­age>
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