►
From YouTube: Getting started on using SharePoint Framework samples
Description
PnP Samples are a means to kick start your development efforts. In this 11-minute Developer-focused demo, David Warner and Hugo Bernier show the PnP Samples inventory that includes nearly 450 validated samples contributed by 250 community members. Tour the PnP Samples browser and learn about sort classifications including sort by compatibility. See how the presenters find 2 web parts, evaluate compatibility for the target dev environment and learn tricks to avoid compatibility issues. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on January 14, 2021.
Demo Presenters:
• David Warner (Catapult Systems) | @DavidWarnerII
• Hugo Bernier (Tahoe Ninjas) | @bernierh
Supporting materials:
• SPFx web parts samples repository - Samples by JavaScript Framework | https://aka.ms/spfx-webparts
• SPFx extensions samples repository - Samples by JavaScript Framework | https://aka.ms/spfx-extensions
• Website - PnP Sharing is Caring | https://aka.ms/sharing-is-caring
• Repo - Content Query web part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-online
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
We're
going
to
talk
a
little
bit
today
about
getting
started
using
sharepoint
framework
samples.
We
know
that
there
are
many
new
ones
into
the
community.
That
may
not
be
aware
of
these
samples
and,
as
some
of
the
long-term
veterans
of
the
community
may
know,
there
could
be
some
challenges
in
using
some
of
these
samples
as
well.
So
we
wanted
to
show
you
some
of
the
new
features
that
have
been
added
and
also
show
everyone
how
they
can
take
advantage
of
the
features
to
better
their
use
cases.
A
When
wanting
to
use
these
samples,
the
makeup
of
the
samples
is
significant
they're
by
the
community
for
the
community,
as
you
can
see
over
250
contributors,
we're
all
really
working
on
this
together
and
that's
what
makes
it
so
amazing
and
powerful.
So
we
encourage
you
to
go
visit
some
of
these
urls,
the
aka.ms,
to
see
what
you
can
use,
either
starting
out
to
learn
or
to
use
within
your
environment.
A
B
Also,
if
you're
looking
for
samples
by
specific
technology
and
microsoft,
technology,
like
microsoft,
graph
or
the
graph
toolkit
for
example
or
github,
you
can
see
there's
quite
a
few
samples
there.
If
you
have
a
favorite
author,
you
can
also
find
your
authors
right
here.
So,
for
example,
here
joao
mendes
who's,
a
frequent
contributor
has
a
lot
of
great
samples.
B
So
that's
one
way
to
do
that.
Finally,
you
can
find
samples
by
keywords
or,
if
you're,
looking
for
a
specific
keyword
like
content,
query
web
part,
one
of
my
favorite
web
parts,
you
can
find
it
there
and
you'd
be
surprised
the
keywords
that
return
some
results
like
yesterday
when
david
and
I
were
practicing
this
we're
searching
for
soccer
and
we
found
a
web
part
that
actually
shows
you
how
to
get
started
with
soccer
now,
when
you
click
on
a
sample.
B
So,
for
example,
if
we
go
into
the
content,
query
webpart
you'll
see
that
the
first
thing
you'll
see
is
that
it
takes
you
to
the
repository
with
the
source
code
for
that
webpart
sample.
Again,
let's
keep
in
mind
that
these
samples
are
intended
to
be
used
as
a
starting
point.
You
you
can,
if
you
want
use
them
in
production,
but
they
are
absolutely
intended
to
be
a
sample
for
you.
So
there's
always
a
description.
There's
there's
always
a
screenshot.
B
Often
it's
an
animated
screenshot
that
shows
you
how
the
web
part
works
and
below
there's
a
new
feature.
We
we
are
starting
to
update
every
sample
to
add
compatibility,
and
the
reason
for
that
is
because,
if
you've
tried
to
use
the
samples
in
the
past-
and
maybe
you
tried
to
use
an
older
sample-
and
you
had
a
newer
version
of
the
sharepoint
framework,
you
may
have
received
issues
or
noticed
issues
with
compatibility.
B
That's
all
included
in
here,
and
then
we
always
have
a
solution.
History
with
the
authors
that
author
section
by
the
way
is
what
you
should
refer
to
if
you're
planning
on
opening
an
issue
regarding
a
web
part
and
the
version
history
which
shows
you,
you
know
all
the
updates
that
have
been
done
so
you
can
see.
B
B
This
is
absolutely
intended
to
be
sample
code.
However,
we
do.
The
community
does
try
to
provide
support.
If
you
go
to
the
issues
list
in
the
repository,
you
can
create
issues
and
we'll
try
to
help
you.
The
next
part
here
in
every
sample
is
how
to
get
started.
It's
all
usually
called
minimal
path
to
awesome.
So
these
are
the
minimal
steps
that
you
should
do
to
get
started,
and
with
that,
why
don't
we
get
david
to
show
you
how
to
get
started
with
using
a
web
part.
A
David
absolutely
thank
you,
hugo.
So,
let's
set
up
the
context
for
finding
some
samples
we
would
like
to
use.
Let's
begin
with
the
content,
query
web
part,
and
I'm
going
to
open
this
in
a
new
tab
and
then
we're
going
to
search
by
author
and
we're
going
to
look
up
hugo
and
we're
also
going
to
see
that
he's
got
a
sample
called
upgrade
me.
So
if
we
also
search
by
keyword,
we
could
do
that
and
upgrade.
We
use
this
for
our
sharing
as
caring
sessions.
A
So
as
we
go
and
look
at
each
of
these,
we
want
to
now
start
utilizing
that
compatibility
section.
We
see
that
the
content
query
webpart
was
built
on
spfx1.11
and
node10.x,
now
contrasting
that
with
the
upgrade
me,
which
is
a
little
older,
we're
using
spfx141,
and
it
of
course
uses
an
older
version
of
node
lts,
six
or
eight.
A
So
this
is
important
information,
because,
historically,
without
this,
it
may
have
been
confusing
on
how
to
utilize
these
samples,
and
you
may
have
been
using
an
incompatible
version
of
node
when
you
downloaded
the
sample
and
when
you
tried
to
gulp,
serve
or
gulp
build.
It
may
have
spectacularly
exploded
on
your
screen,
which
we'll
see
shortly.
So
how
do
you
take
advantage
of
this
new
found
information
as
well
as
getting
access
to
these
samples?
A
Well,
let's
briefly
go
and
look
at
the
github
repo,
and
this
is
going
to
take
us
to
the
root
of
the
repo
and
we
covered
this
more
in
our
sharing
as
caring
session.
So
we
invite
you
to
join
those,
but
this
is
your
primary
location.
You
don't
have
to
have
git
installed.
You
can
just
download
the
zip.
It
is
available
to
you.
It
has
large
downloads,
so
we're
not
going
to
do
that
now,
but
if
you
have
git
installed
or
github
desktop,
you
can
use
either
of
these
options
as
well.
A
Now
I've
already
pre-downloaded
this
entire
repo
here
available
for
us.
I've
also
already
installed
all
of
the
node
modules
to
save
us
time,
so
we're
going
to
quickly
go
into
our
sample
here
and
we're
going
to
find
our
react.
Content,
query
web
part
and
we're
going
to
try
to
gulp
serve
it
or
go
build
it
see
right
there.
We
see
it's
there
and
we'll
take
a
look
just
to
confirm.
We
have
node
and
the
version
is
10.23
and
that's
what
we
know
we
needed.
A
The
10.x
is
the
necessary
version,
we're
using
the
most
recent,
and
so
we
can
go
ahead
and
typically,
at
this
point
once
we've
downloaded,
we
would
do
an
npm
install
now.
I've
already
done
that
to
save
us
time.
We
see
those
node
modules
already
loaded
here,
so
I
can
just
do
a
gulp
build
and
see
if
this
works
now
again
having
this
compatibility
has
helped
us,
because
otherwise
we
may
have
had
to
try
to
determine
what
was
used
to
build
this
solution
and
we
may
not
have
been
able
to
find
it.
A
So
we
might
have
had
to
do
some
trial
and
error.
We
see
this
is
succeeded
for
us
great,
that's
fantastic.
So
now,
let's
jump
over
to
our
other
demo.
The
react
upgrade
me
and
if
we
scroll
down-
and
we
find
that
right
down
here,
upgrade
me
I'm
going
to
grab
that
url
and
we're
going
to
change
the
directory
here,
clear
the
screen
and
we're
going
to
try
to
do
a
gulp
build.
A
If
we
go
back
over
to
the
compatibility
for
this,
we
see
it's
using
node,
six
or
eight.
So
as
this
tries
to
to
execute
at
some
point
here,
we're
going
to
see
that
it
has
failed
on
us
and
it's
going
to
spectacularly
explode
and
we're
going
to
think
something
is
wrong
with
this
particular
sample.
The
truth
is,
though,
that
when
hugo
is
importing
these
or
publishing
them
they're
all
tested.
So
if
something
is
in
the
sample
browser
repository,
it
has
been
tested
and
is
successfully
running
at
some
point.
A
But
now
we
have
a
better
understanding
of
why
this
might
be
failing
we're
using
a
newer
version
of
node
that
was
not
necessarily
compatible
or
even
around
when
this
particular
sample
was
built.
Well,
there's
a
way
that
you
can
take
advantage
of
technology
and
tools
to
ensure
you
can
still
use
this
sample.
You
don't
have
to
uninstall
node.
You
certainly
could
and
reinstall
an
older
version.
If
you'd
like
you
could
use
docker,
we
really
recommend
using
nvm
node
version
manager.
A
It
allows
you
to
quickly
switch
between
versions
of
node,
so
in
this
case
I've
pre-installed
node
version
8.
So
I
will
use
nvm
use
88.0.0
and
I
will
just
approve
that,
and
we
see
it's
now
using
node
8.
now,
if
you're
not
familiar
with
nvm
guess
what
we've
got
a
sharing
is
sharing
his
carrying
session
that'll,
show
you
how
to
utilize
it
and
go
into
much
more
depth.
So
now,
if
we
check
our
version,
we
see
we're
using
node
version,
8.,
absolutely
fantastic.
A
So
now
I
can
do
a
gulp
build
build
on
this
and
at
this
point,
we've
already
preloaded
the
npm
modules.
Again,
if
I
go
back,
we
can
see
they're
loaded
here.
I
did
that
in
the
interest
of
time,
and
we
see
that
it's
successfully
built
awesome.
That
is
fantastic
success,
and
so
now
we
know
that
we
are
able
to
utilize
all
this
newfound
information.
That's
available
to
us
to
take
advantage
of
using
all
these
samples
they
all
work.
A
We
don't
want
you
to
feel
like
things
are
broken
in
the
repository
and
they're
all
available
there
for
you
to
be
able
to
use.
Now.
You
may
say
why
don't
I
just
upgrade
this
well
we're
going
to
talk
more
about
that
in
our
other.
Sharing
is
caring
sessions
and
we're
running
a
little
short
on
time.
So
we're
going
to
run
back
to
our
slides
here
and
provide
you
with
some
links.
Please
don't
hesitate
to
join
one
of
those
sharing.