►
From YouTube: PnP Shorts - Developing SharePoint Framework client-side web part for SharePoint 2016 Feature Pack 2
Description
Developing client-side web part for SharePoint 2016 Feature Pack 2 using SharePoint Framework v1.0.2. More details on the supported scenarios and capabilities from http://dev.office.com/sharepoint
A
A
So,
let's
start
by
actually
having
a
look
on
our
situation
where
we
are
with
it
within
this
machine.
So
this
machine
I've
been
using
this
for
my
personal
development
as
a
personal
development
machine.
So
we've
been
done
doing
some
development
already
in
here
against
the
SharePoint
Online.
So
if
I
do
NPM
list,
NPM
list
lists
and
G
so
I'm
listening
my
installed
packages
and
the
first
level
of
the
install
package
is
an
NPM.
A
We
can
see
that
I'm
actually
hosting
SharePoint
framework
of
1.2
version
within
this
machine,
and
the
one
thing
should
be
aware
of
the
of
the
support
SharePoint
framework
support
in
SharePoint
116.
A
feature
back
is
that
we
support
version
1.0
to
be
used
in
the
SharePoint
framework.
So
what
it
means
since
then,
you
need
to
use
the
SharePoint
framework
1.0
or
to
be
precise.
1.0
is
an
option,
as
well
as
the
SharePoint
framework
platform,
when
you're
developing
clients
or
bit
parts
on
top
of
the
chef
116
feet
apart.
A
You
might
be
thinking
that
way,
wait
a
minute.
So
how?
What
is
this?
Why
do
I?
Why
do
I
need
to
go
back
slightly
under
versions?
And
the
answer
is
well.
The
on
premises,
platform
is
versioned
in
a
different
way,
so
the
version
1.2
of
the
SharePoint
framework
is
released
for
the
SharePoint
Online
in
early
August
or
in
mid-august,
and
the
feature
back
to
416
was
actually
already
locked
back
in
may
May,
June
July
timeframe,
and
then
it's
actually
falling
dead
on
premises
and
so
the
basic
challenge.
A
What
we
have
here
is
that
the
on
premises,
environment
and
the
versioning
of
the
own
premises
environment
is
different.
We
cannot
push
server-side
environments
and
server-side
updates.
Do
the
the
server
side
of
on-premises,
because
obviously
the
persons
and
the
companies
on
those
servers
not
Microsoft
does
own
them,
so
the
baseline
right
now
for
the
feedback
to
for
SharePoint
2016
is
the
SharePoint
framework
1.0
and
in
this
machine-like
you
can
see
now.
I
were
already
installed
to
1.2
in
machine
1.2
version
of
SharePoint
framework.
A
So
how
do
I
now
go
back
in
time
to
the
right
version
and
how
would
I
actually
then
use
that
to
implement
my
client
side
web
part
and
host
it
in
shape?
160
now,
there's
multiple
ways.
Obviously,
I'm
doing
this
multi
version
multi
versioning
of
SharePoint
framework.
So
you
could
use
docker,
you
can
do
use
multiple
machines
in
this
particular
case,
I'm,
going
to
just
simply
do
an
installation,
so
I'm
Canadian
p.m.
on
uninstall,
and
we
can
uninstall
that
Microsoft
generator
sharepoint
from
the
from
the
machine.
A
So
this
one
will
make
sure
that
my
existing
version
of
the
sharepoint
generator
is
getting
away
from
this
computer,
and
this
is
going
to
take
a
while,
maybe
a
minute,
so
we're
going
to
speed
up
the
video
until
this
has
been
completed
and
they
began
our
package
that
has
been
uninstalled
or
from
this
computer
unlock
nation.
If
you're
using
docker
hunter,
say
I
think
the
doctor
would
be
the
right
solution
for
this,
but
in
this
particular
video
we're
going
to
use
an
installation
and
fall
back
on
time
to
the
right
version.
A
So
now
I'm
actually
going
to
execute
NPM
view
and
then
Microsoft
generator
sharepoint.
So
we
can
actually
see
all
of
the
NPM
packages
or
the
version
of
the
microf
narrator's
which
are
available
in
NPM.
So
if
I
scroll
down
slightly
on
the
results,
we're
able
to
say
that
there's
quite
a
few
versions
of
the
of
the
SharePoint
generators
available
from
really
old
timeframes
and
then
there's
the
1.00
just
one
point:
zero
one
one
point:
zero
two:
it
would
be
the
one
what
we're
looking
at
right
now
to
actually
use
together
with
feedback.
A
So
how
do
I
get
that
one
installed?
Well,
that's
pretty
simple!
So
I'm
going
to
do
NPM,
install
install,
let's
actually
get
that
one
and
install
globally
and
then
we're
going
to
do
Microsoft,
Microsoft,
generator
sharepoint,
and
then
we
can
actually
specify
that
version
which
we're
going
to
install
into
this
machine.
So
this
is
going
to
now
install
the
specific
version
1.02
to
this
particular
machine,
so
I'm
ready
to
do
some
development
against
or
together
with
SharePoint
sharepoint
2016
feedback,
and
this
again
takes
some
time.
A
We
considered
we're
going
to
speed
up
the
video
until
the
installation
is
completed
and
there
we
go
now.
The
updated
order
will
update
packets
order.
The
previous
version
of
the
brackets
has
been
installed,
so
let's
actually
create
an
a
folder
for
us.
So
let
me
actually
clean
up
that
one
something
slightly.
So,
let's
create
us
a
folder.
Let's
call
this
test,
FB
testing
feature
pack
tubes
and
let's
actually
go
there
test
FB
and
in
here
I'm
gonna,
just
simply
execute
yo
Microsoft
SharePoint.
A
So
we
can
actually
do
the
scaffolding
of
our
solution
so
just
a
typical
flow
and
now
we're
using
the
version
1.02
of
the
after
templates.
So
let's
call
this
hello
there
as
the
solution
we
kind
of
use
the
current
solution.
Current
folder
we're
gonna
use
no
JavaScript
web
framework.
For
this
time.
We're
gonna
use
hello.
There
ask
the
web
part
name,
so
we
can
find
it
easily
hello.
A
There
description
is
absolutely
fine,
and
now
the
scaffolding
actually
starts
so
and
now
we're
scaffolding,
a
version
which
is
created
using
the
1.0
version
of
that
of
the
packages
so
and
this
will
again
take
a
while.
So
we
can
speed
up
the
video
and
continue
after
we
have
completed
that
and
they
began
a
disco
ball
thing
has
been
completed,
so
we're
able
to
have
a
look
on
our
codes.
A
Obviously
the
go
structure
looks
exactly
the
same
because
it
is
just
a
SharePoint
framework,
SharePoint
framework
1.0,
a
version
which
we've
been
using
in
SharePoint
Online
as
well
in
the
past.
Now
we're
not
gonna
actually
do
any
actual
development
in
here.
I'm
just
gonna
show
how
to
get
this
one
and
deployed
as
well,
and
just
to
prove
that
everything
works
in
the
feedback.
So
we
can
obviously
do
a
coop
serve,
and
this
is
going
to
start
in
the
browser
or
start
in
the
global,
sorry,
local
workbench.
A
So
we're
able
to
do
proper
testing
on
the
cup
serve
on
the
on
the
local,
workbench
and
I'm
doing
my
typical
type
of
there
for
some
reason,
always
writing
server
when
I'm
trying
to
do
a
call
to
serve
so
that's
gonna
bundle
the
the
solution
and
that's
gonna
host
the
local
approach.
Japan
workbench.
We
were
able
to
see
that
hello
there
web
part
in
practice
good.
So
how
do
we
actually
then
get
this
one
and
deployed
the
SharePoint
2016
feature
back
to
so?
First
of
all,
let's
do
some
modification.
A
So
what
I'm
done
here
is
that
I've
actually
already
created
a
hosting
location
for
my
components,
I'm
going
to
jump
and
are
rectly
to
my
sure
story,
it's
Explorer
and
which
has
been
already
connected
to
my
sure
so
ddn.
So
in
my
case,
right
now,
in
the
demo
we
can
I
use
sure
CDN
as
the
host
name
location.
Technically,
you
can
absolutely
host
your
JavaScript
files
and
JSON
files
in
the
your
SharePoint
2016
environment
as
well.
A
So,
if
you're
looking
into
using
that
and
hosting
everything
in
your
SharePoint
2016,
you
can
absolutely
do
that.
There's
a
one
thing
to
be
aware
on
there
so
and
as
part
of
the
files
which
we
will
have
to
host
somewhere.
There
is
a
two
Welters
javascript
files
and
then
there's
a
JSON
file
and
by
default
in
SharePoint
2016
of
2010
2013
2016.
The
chase
on
the
file
format
is
actually
blocked
to
be
uploaded
to
a
document.
Library.
There's
no
risks
for
changing
that,
really
because
it's
a
JSON
object,
changement
file
and
but
by
default.
A
Unless
you
do
any
modifications
on
the
server,
you
can't
upload
all
of
the
needed
files
to
the
SharePoint
2016
and
one
so
you
would
have
to
slightly
adjust
the
server
settings
or
the
farm
settings
allow
the
chase
and
file
to
be
uploaded.
But
in
our
case
we're
going
to
use
CDN,
so
I've
already
created
to
a
show
CDN
in
my
environments
in
my
share
subscription,
and
we
can
actually
Punto
all
of
this
together.
A
So
let
me
actually
flip
in
the
visual
studio
and
I'm
going
to
update
slightly
my
configuration,
because
I
want
to
update
my
CD
and
path
to
be
correctly.
So
if
you
would
be
hosting
the
JavaScript
files
and
JSON
files
in
the
SharePoint
2016,
you
would
just
pinpoint
at
that
location
the
folder
in
your
short
sharepoint,
on
a
16
where
those
files
will
be
hosted
in
here.
A
In
my
case,
where
it
kind
of
used
as
a
CDN
and
like
mentioned,
some
can
actually
take
that
path
and
copy
that
in
here,
I'm
gonna
use
the
hello
world
container
in
my
CD
and
that's
the
location,
oh
good,
then
I'm
gonna
actually
flip
back
on
my
command
line.
Then
I'm
gonna
do
a
call
bundle,
that's
that
ship.
A
So
that's
going
to
prep
us
for
deployment
and
then
we
need
to
have
the
SP
pkg
file
generated
as
well.
So
we're
going
to
do
a
call
up
package
solution.
That's
actually,
let's
do
this,
let's
actually
clear
this
and
do
call
packets
solution
the
star
shape,
so
that's
kind
of
them
package,
my
my
bundle
and
everything
else
or
the
associations
properly
to
the
SP
pkg
file,
and
we
can
double
check
again.
A
If
I
go
to
the
shipment
folder
and
the
debug
folder
and
open
up
the
manifest
of
my
web
part,
we
can
actually
double
check
easily
yeah.
Let's
actually
do
that
one
more
time
we
can
double
check
that
the
CDN
has
been
properly
configured
so
sporting.
It
in
my
case,
it's
pointing
to
my
CDN
location.
In
your
case
it
might
be
pointing
to
a
local
CD,
and
you
know
local
box.
It's
slightly
depends
again
how
do
dudas
so
now
that
we
have
the
solution.
Everything
has
been
properly
configured.
A
We
can
start
the
file
explorer
here,
so
we
can
actually
upload
the
solution,
the
app
catalog.
So,
let's
actually
open
up
our
SharePoint
2016,
our
app
catalog
interesting
here
in
our
apps
for
SharePoint.
We
have
few
apps
already
available,
so
in
this
case
I'm
going
to
go
to
SharePoint
solution.
That's
my
hello!
There
SP
pkg
file,
that's
at
that
one
available
in
my
SharePoint
Hoonah
16
feedback
to
the
environment.
A
A
If
you
want
to
host
your
stuff
in
a
ship
116
or
the
JavaScript
files
there
as
well
in
my
case
like
mention,
we
can
actually
upload
all
of
those
stuff
upload
files
and,
let's
actually
upload
those
files
from
the
BMP
full-form,
are
to
do
the
test
FB
to
folder
I
think
it
was
has
been
SP.
Do
let's
actually
double
check
that?
A
Yes,
it
was
deploy
and
that's
our
three
different
files,
which
we
actually
want
to
get
in
to
our
CDN,
so
I'm
going
to
use
them
much
softer
story
to
explore
it,
because
this
is
super
super
convenient
tool
for
accessing
your
blobs
and
everything
else
before
uploading
all
of
the
stuff.
Technically,
we
do
have
a
call
up
task
to
automate
this
upload
as
well,
but
just
as
well,
you
can
do
that
manually
as
well.
So
now
my
files
are
located
in
here
and
solution
bucket
has
been
installed.
A
A
So
right
now
the
solution
and
the
web
part
isn't
available
in
here,
because
we
have
only
installed
the
solution
in
the
app
catalog
and
the
shipment
2016
feature
back
to
does
not
support,
at
least
for
now
or
the
future
battery
doesn't
support
the
tenon
scope
deployment
option.
So
what
we
need
to
do
is
to
make
sure
that
that
package
is
being
installed
on
the
site
so
that
the
web
part
is
available
for
us
to
use
within
the
site.
A
So
you
can
see
that
there's
a
different
solution
already
available
on
here,
but
we,
our
solution
name,
was
there.
Let's
actually
double
check
the
name.
It
was
hello
there,
client-side
solution.
So
let's
add
that
one
in
as
well.
So
adding
that
to
the
solution,
adding
that
to
the
site
and
that's
getting
added
on
the
side,
so
I
think
the
solution
to
the
site
might
take
a
few
seconds.
It
might
take
30
seconds.
It's
really
slightly
depends
on
the
under
timing.
A
A
So
clicking
the
web
part
link
here
we
can
now
say
that
we
have
the
under
development
category
available
in
the
under
development.
We
can
say
the
hell
out
there.
If
I
click
ant,
we
can
actually
see
our
web
part
getting
added
on
the
page.
If
our
reference
is
in
the
city
and
the
URLs,
everything
else
is
correctly
done.
We
can
actually
say
the
web
part
being
rendered
here.
A
What's
as
well
as
you
can
see
from
here,
and
then,
if
we
do
modifications
on
the
web
part
edit
web
part,
we
can
see
that
we
have
the
classic
configure
option
for
edit
web
part
clicking
that
one.
We
can
say
that
we
have
the
modern
web
part,
editor,
pane
or
the
property
being
here,
hello
there
for
hello
there
for
the
audience.
Looking
the
demo
call
and
it's
all
there,
we
can
actually
close
that
one
and
click
OK
and
the
web
part
configuration
is
completed.
A
So,
as
we
can
see,
we
have
here
in
shape
1
2016
v2
back
to
we
created
a
client-side
web
parts
using
SharePoint
framework,
the
version
1.02,
which
we
moved
back
in
time
and
installed
that
to
my
machine
in
real
world,
you
would
probably
use
docker
to
defriend
the
8
or
to
support
running
multiple
different
versions
of
the
SharePoint
framework
in
your
own
machine.
But
I
wanted
to
go
step
by
step
and
show
how
to
make
that
happen
within
a
one
machine.
If
that's
needed
for
you,
you
can
differentiate
the
machines.
A
If
you
have
multiple
VMs,
there's
multiple
options:
how
to
make
this
happen.
Maybe
one
thing
to
notice
on
the
on
the
solution.
You
probably
want
to
also
do
the
NPM
shrink,
wrap
or
make
sure
that
you're
using
the
right
versions
or
lock
down
two
versions
within
your
SharePoint
framework
solution,
so
that
will
then
make
sure-
and
if
you
go
back
on
the
solution
and
if
we
open
up
the
package
JSON
file,
you
can
see
that
right
now
we're
using
the
1.00
versions.
A
You
probably
want
to
make
sure
that
you
will
always
use
these
versions
in
the
future
as
well.
For
this
solution,
if
it's
targeted
for
the
feature
back
to
and
that's
where
the
NPM
shrink
wrap,
would
absolutely
help,
there's
alternative
options
as
well.
It
really
depends
again
on
what
packaging
system
you're
using
so
there's
just
quite
a
few
options
here
and
there,
but
probably
the
indium
shrink-wrap
is
the
easiest
thing
to
do,
and
there's
a
lot
of
guidance
and
documentation
available
on
that
one
as
well.
A
A
The
behavior
is
the
same,
but
there
are
differences
due
to
the
fact
that
you
haven't
done
one
actually
moves
faster,
comparing
to
the
SharePoint
on-premises,
because
we
can't
push
versions
and
updates
to
the
on-premises,
because
companies
like
that,
the
customers
actually
on
those
environments
in
SharePoint
Online
things
are
moving
slightly
faster
and
that's
the
reason
why
there
might
be
small
differences
within
the
styling
side
in
future.
The
the
selection
of
the
web
part
selection
of
the
environment
will
get
easier
when
we
get
updated
versions
of
the
SharePoint
framework
packages
out.