►
From YouTube: PnP Shorts - Using serve.json to make SharePoint Framework Extension development easier
Description
PnP Short video on how to use serve.json file for automatically creating needed debugging query parameters when you are building SharePoint Framework Extensions. This capability was added to SharePoint Framework in v1.3 release based on the feedback from developer preview.
A
So
let's
have
a
look
on
how
things
first
work
before
the
modifications,
and
then
we
can
have
a
look
on
how
you
can
use
the
default
configurations
available
in
the
serve
to
chasten,
to
make
the
debugging
easier
for
you
when
you're
writing
SharePoint
framework
extensions.
So
we
kind
of
use
first
on
sample
or
list
you
common
set,
and
this
is
just
the
default
list.
We
common
said
getting
out
of
and
getting
a
scaffolding
from
the
default
iam
and
templates,
and
in
here
you
can
say
that
this
is
a
no
changes
within
the
template.
A
So
let's
do
that
and
let's
actually
talk
about
the
challenges
of
making
that
happen.
So
there
we
go.
A
local
host
is
now
up
and
running
and
we
can
actually
jump
on
our
endeavour,
talent
and
our
type
environment.
So
this
is
just
a
list
in
a
dev
site,
collection
or
dev,
tenants
where
we
have
some
data
and
we
want
to
have
those
buttons
available
it
in
here.
A
We
have
obviously
all
of
this
document
that
the
challenge
of
this
one
is
that
this
is
actually
getting
quite
and
difficult.
So,
for
example,
Felicity
a
common
set
you
needed
to
use
the
load
SP
effects
a
debug,
manifest
file.
Then
you
need
to
have
the
custom
action
and
that
your
grid
has
to
match
your
extension
over
the
location.
Definition
where
the
the
list
extension
ListView
comments.
Ëthis
is
visible
and
also
how
to
set
up
the
properties.
If
you
have
property
configurations
within
your
extension,
well,
it
worked,
but
it
wasn't
really
that
optimal.
A
So
now,
if
I
paste
in
that
query
parameter
in
my
browser
window,
we're
telling
SharePoint
now
to
load
and
request
the
the
files
from
a
local
host
and
we
can
actually
say
the
comment
to
getting
visible
in
there
and
the
common
one
getting
visible
whenever
we
select
multiple
items.
So
there's
the
common
and
there's
the
common
one
and
visible
when
there
is
one
item
being
selected.
Excuse
me
now
so
as
part
of
the
debugging
or
sorry
as
positive
preview,
and
we
were
getting
a
lot
of
feedback
around
well.
A
We
need
to
make
this
easier,
so
the
people
can
more
easily
do
debugging
and
testing
of
their
customization,
and
this
was
then
included
as
part
of
the
cheaper
version
of
the
extensions.
So
let's
have
a
look
on
what
exactly
is
available
for
you
to
make
the
debugging
easier.
So,
whenever
B
and
due
to
default
scuffling
of
our
solution,
depending
on
your
selection,
we
always
create
you
at
the
default
server
configurations,
and
these
aren't
there
to
help
you
to
make
that
debugging
experience
as
easy
as
possible.
A
But
you
need
to
do
certain
modifications,
so
the
or
let's
say
one
at
least
modification,
which
is
the
page
URL
within
the
server
configuration.
So
you
need
to
debug
or
configure
that
based
on
your
environment.
In
our
case,
we
wanted
to
actually
use
that
custom
list
within
my
tenant
as
the
Loews
hosting
location,
so
I'm
going
to
copy
that
and
then
I'm
going
to
paste
in
that
to
the
base
URL
and
let's
actually
update
that
one.
A
So
that's
for
the
default
entry
and
then
we
have
this
common
text,
which
is
a
secondary
entry
for
that
one
as
well,
and
you
might
be
wondering
why
do
I
actually
have
multiple
entries
here.
Well,
the
key
point
of
this
one
is
that
you
can
actually
easily
test
the
properties
by
using
multiple
entries
and
within
your
served
adjacent.
So
let's
actually
do
here,
alternative
configuration
and.
A
Alternative
our
alternative
sample
to
config
and
the
whole
point
of
this
one
is
that
now
you
can
easily
do
different,
adaptions
or
configurations
for
your
properties,
which
might
then
change
the
behavior
of
the
extension
within
the
context
of
sharepoint.
Let's
first
time
ever
run
the
default
configuration
HUD.
So
how
do
we
actually
make
this
happen?
A
Well,
it's
as
easy,
as
writing
help
here,
help
serve
and
when
we
do
that,
and
what's
gonna
happen,
is
that
sharepoint
well,
the
the
nodejs
and
the
human
templates
and
everything
else
is
going
to
start
up
a
process
in
the
context
of
that
given
URL.
So
in
at
least
in
windows
scenario,
it's
gonna,
be
it
the
latest
browser
which
was
actually
opened.
So
in
my
case,
I
caught
often
use
Google
Chrome.
A
So
in
my
case,
I
have
multiple
profiles
or
always
go
and
activate
or
request
a
one
time
eight
in
this
session,
and
that
will
then
make
that,
as
that,
that's
the
last
procession
getting
open.
So
when
I
do
call
serve,
that's
where
I'm
actually
getting
the
additional
tab,
if
you're
using
an
alternate
some
other
operating
system
than
Windows,
there's
no
small
differences.
How
this
behavior
actually
works,
but
in
this
case
like
you,
could
see
I'm
actually
now
running
directly
in
the
context
of
the
of
the
list.
A
My
debugging
URL
is
automatically
given
to
me,
so
I
don't
need
to
do
any
manual
updates
and
manual
configurations
for
that,
and
we
can
actually
say
that
my
command
patterns
are
there
and,
if
I
activate
a
one,
we
can
say
the
common
one
and
two.
So
now:
okay,
let's
move
back
on
the
solution
and
let
me
write
them
to
get
that
bigger.
So,
let's
stop
the
currently
running
setup
and
how
do
we
then,
if
that's
the
default,
so
I
did
a
cop
serve
and
the
default
actually
get
started.
A
So
how
do
I
know
execute
this
alternative
or
a
third
or
fourth
configuration?
Well,
it
is
as
easy
as
writing,
help
serve
as
config'
egos
comment
text
and
that's
gonna
then
actually
tell
for
the
gallop
that
we
actually
want
to
use
the
alternative
comment
and
now,
in
this
case,
when
you
click
to
load
in
debugging
scripts,
we
will
actually
load
two
alternative
configuration.
So,
let's
go
see,
and
now
the
text
of
that
one
has
been
updated.
A
As
alternative
sample
to
the
config,
so
we're
running
in
the
configuration
or
in
the
alternative
configuration
within
that
based
on
the
served
Chasen
good
now
we
use
the
cola
street
common
set
in
this
demo.
So
let's
actually
move
in
here
and
let's
actually
double
check
that
how
the
setup
is
working
with
other
extensions
as
well.
So
this
is
the
configuration
Felicity
common
sets.
You
can
configure,
for
example,
at
the
location
entry
where
the
location
is
also
in
this
case
as
an
example.
A
If
we
find
getting
rid
of
the
the
common
or
it
will
mean
that
this
particular
configuration
will
make
those
buttons
available
in
a
both
common
bar
and
also
in
the
context
menu.
So
we
can
easily
say
that
one
happening
here.
Let's
do
a
cop
serve
convict
common
text.
That's
going
to
again
start
the
process
in
my
session
and
we
can
say
that
the
buttons
are
getting
loaded
and
if
I
come
in
here,
we
can
actually
say
that
my
context
menu
has
those
buttons
as
well
and
based
on
that
configuration
which
I
just
applied.
A
Now
what
about
application
customizer
and
field
customizer?
And
let's
have
a
look
on
them
as
well,
so
I
have
here
default
configuration
for
field
customizer
and
there's
few
things
in
the
field
customized
a
case
which
are
slightly
different.
If
we'll
have
a
look
on
the
old
debugging
URL
model,
we
can
actually
see
that
in
the
field
customize
a
case.
We
actually
need
to
tell
that
that
we
are
it's
a
field
customizer
and
then
we
are
loading
that
specifying
the
field
in
the
wit,
sister
context
or
the
field
where
the
field
customize
is
getting
loaded.
A
So
in
this
case
we're
essentially
saying
field
enter
with
an
internal
name
of
a
percent.
Please
load
this
field,
customizer
with
that
ID
and
with
those
properties
and
that's
something
which
we
need
to
properly
configure
in
the
field.
Customize
serve
JSON
instance
here,
and
this
isn't
necessarily
super
suburbia.
So
let's
actually
have
a
look
on
that
one.
A
So,
first
of
all,
I'm
gonna
get
in
here
and
let's
close
view
of
the
Edition
or
browsers,
because
we
don't
actually
need
to
get
them
open
and
I'm
gonna
get
the
URL
as
my
hosting
URL
we're
gonna
use
this
list
for
this
particular
example
as
well.
So
we're
gonna
come
back
here
and
I'm
gonna
update
the
page
URL
properly
for
both
of
the
configurations
just
to
avoid
any
any
surprises
there
now
Danny
is
again
the
ID
of
the
field
customizer.
A
So
if
I
quickly
have
a
look
on
the
manifest,
we
can
say
that
it
starts
with
a
9c,
not
for
nine,
which
is
essentially
automatically
configured
as
the
identifier.
But
how
do
we
then
identify
the
field?
And
this
is
where
woods
might
not
be
super
obvious.
So
we
need
to
actually
update
here
the
internal
name
of
that
field
and,
in
my
case,
I
created
that
field
using
the
UI
and
I,
give
it
a
name
called
percent
and
that's
going
to
be
automatically
created.
A
That's
the
internal
name
for
the
field
as
well,
so
and
then
now,
when
I'm
actually
doing
the
field
customizers
and
I'm
updating
that
as
the
field
name,
we
will
automatically
associate
the
field
customizer
to
the
percent
field
and,
let's
make
sure
that
that's
working
properly.
So,
let's
open
up
again
our
console.
Let's
come
in
here.
Let's
first
request
the
page:
without
any
customizers,
we
can
say
that
we
have
the
percentage
value
in
photon
field
and
we're
gonna
use
the
default
custom
field
customizer.
A
So
this
won't
be
super
super,
let's
say
mind,
blow
up
bubbling
what
we're
doing
here,
but
you
can
see
that
the
change
within
the
UI
again
and
again,
let's
allow
the
loading,
the
debugging
scripts
and
we
can
say
that
we're
adding
that
value
prefix
before
rendering
out
the
actual
value
after
off
the
field,
and
obviously
this
could
be
much
more
complex
in
area.
But
in
this
is
the
default
scaffold
solution
to
make
that
happen.
And
again
we
don't
need
to
worry
about
what
is
the
query
parameter?
A
All
of
that
is
taken
care
of
automatically
based
on
that
that
JSON
configuration
just
in
case
just
to
demonstrate
that
one
as
well,
so
we
can
absolutely
do
the
same
same
for
the
application
customizers.
So
in
the
application
customizer
case,
the
serf
that
jason
has
exactly
the
same.
Configuration
will
probably
well.
We
don't
need
to
know
demonstrate
this,
but
you
will
see
that
will
update.
A
Now,
if
you're
wondering
what
does
it
actually
mean,
if
I
have
then
multiple
multiple
of
these
content
types
and
and
ception
extensions
in
the
single
solution,
and-
and
we
can
quickly
have
a
look
on
that
one
as
well-
let's
not
actually
demonstrate
this
in
active,
but
I
can
actually
quickly
explain.
What's
gonna
happen
here.
So
this
is
a
slightly
more
complex
solution
and
we
have
a
one
web
part
which
is
hello.
A
There
report,
and
we
also
have
multiple
extensions
and
what's
going
to
happen
here,
is
that
you'll
have
default
configuration
for
the
one
which
was
created
first.
So
in
this
case,
the
default
configuration
its
application
customize
that,
because
that
was
the
first
component
time
for
that
particular
solution,
and
that's
fine
and
doesn't
really
matter
that
much
and
but
then,
when
we
are
adding
additional
application,
customizers
or
a
secondary
application
customizer,
which
is
called
another
app.
We
actually
add
those
as
additional
configurations
in
the
servitor
JSON,
and
the
way
this
is
then
can
be
used.
A
Is
that
you
simply
again
use
the
garb
serve,
serve,
serve
serve
and
that's
as
config
Eagles,
the
field
xed
and
you
will
be
running
then
in
that
particular
extension
context,
and
this
is
mainly
because
you
cannot
actually
debug
multiple
extensions
at
the
same
time.
So
if
you
need
to
do
that-
and
let's
say
the
integration
testing,
you
need
to
get
some
of
the
extensions
already
up
and
running
on
the
site
using
in
quotes
that
the
live
production
way
of
deployment.
So
the
live,
debugging
and
running
running
the
query.
Parameters
are
running
automatically.
A
The
query
parameters
using
that
serve
jason
is
only
supported,
one
extension
at
a
time
cool,
but
that's
it
for
this
particular
video.
So
what
I
wanted
to
quickly
go
through
is
how
you
can
use
the
serve
Chasen
to
simplify
the
the
debugging
of
your
shipment
Trevor
key
extensions,
and
this
was
part
of
1.3
release
and
it's
all
and
in
this
video
I
was
using
the
1.3
point
for
version
of
SharePoint
framework
and
obviously
the
future
versions
will
support
this
one
as
well,
thanks
for
watching
and
keep
the
feedback
coming.
Thank
you.