►
Description
This tutorial will guide you on how to deploy your application customizer to SharePoint site using the SharePoint Framework version 1.10 from February 2020.
You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/serving-your-extension-from-sharepoint.
January 2020 version using SharePoint Framework 1.10.
More details around SharePoint Framework from http://aka.ms/spfx
Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp
Sharing is caring!
A
Welcome
to
this
getting
started,
SharePoint
framework
extensions
tutorial
series-
and
this
is
tutorial-
3-
deploy
your
extensions
to
SharePoint
and
also
known
as
hello
world
part
3.
So
we
continue
with
hello
world
parts,
1
&
2
in
a
1
part
1.
We
created
the
solution
in
part
2.
We
modify
the
application
customize.
It
actually
be
aware
of
Bates
placeholders
and
modifying
or
adding
information
to
those
placeholders
and
in
part
3.
A
We're
actually
gonna,
then
deploy
the
solution
or
SharePoint
and
making
sure
that
it's
running
nicely
in
in
the
context
of
a
site
as
well,
not
just
in
a
debugging
mode,
even
though
we
kind
of
serve
still
for
ask.
Let's
drill
the
content
from
a
localhost,
but
also
deploying
off
the
file
that
I've
gotta
work
on
making
sure
that
the
default
settings
and
configurations
in
as
part
of
the
installation
of
the
extension
to
the
sign
are
properly
done.
This
video
has
been
recorded
in
January
2020
and
it
is
using
shipment
for
equation.
1
point
10.
A
So
if
you're
using
an
aberrational
shipment
framework,
the
miner
PM
small
change
this
on
the
on
the
documentation
or
or
settings.
So
please
have
a
look
on
the
written
format
of
the
tutorial,
which
is
always
kept
the
most
up-to-date
based
on
any
changes
which
might
happen
after
the
video
has
been
created.
A
Now,
let's
actually
move
back
on
our
solution
structure.
So,
let's
jump
to
our
Windows
10
machine
where
we
are
in
the
middle
of
testing
the
extensions
where
we
tested
the
extension
as
part
of
the
part
two
and
now
we
start
actually
packaging
the
extensions
and
there
are
a
few
different
options
which
we
can
use
for
the
packaging
of
the
extensions
and
making
sure
that
everything
is
working
properly.
So
I'm
going
to
close
up
some
of
the
files
and
clean
up
the
process
slightly.
A
Let's
go
to
the
console,
I'm
gonna
clean
up
this
one
as
well,
and
let's
go
to
our
actual
solution
code.
So
in
part
two
we
modified
the
code.
We
are
now
taking
advantage
of
placeholders.
We
test
it
out
using
the
sheriff
Jason,
but
let's
actually
modify
this
in
a
way
that
we
set
the
settings
properly
whenever
the
solution
is
going
to
be
installed
on
the
site.
So
if
we
go
on
the
SharePoint
folder,
we
can
actually
find
two
different
XML
files
hairs
and
both
of
these
XML
files
have
a
quite
specific
meaning.
A
So,
first
of
all
the
elements
XML
file
is
used
by
default
and
based
on
the
default
settings
of
the
solution
when
it
will
be
explicitly
install
and
this
solution
to
an
existing
site.
So
we're
not
going
to
use
any
tenant
deployment
option
we're
not
going
to
use
then
on
deployment.
A
tenant,
wide
deployment
of
extensions,
we're
gonna,
explicitly
install
the
solution
to
a
site,
and
that's
one
of
that
installation
process
to
the
site
level.
We
actually
apply
the
custom
action
element.
A
So,
what's
going
to
happen
behind
the
scenes
is
that
in
the
web
object,
which
is
the
site
in
SharePoint
which
slightly
confusing,
but
that
needs
to
have
terminology-
and
you
said,
use
a
custom
action
collection
and
in
the
user,
custom
reaction
collection,
we're
going
to
add
a
new
entry
with
the
title
location,
with
a
specific
location,
entry
with
a
client-side
component,
ID
and
client-side
properties,
information
and
obviously
the
client-side
component
ID,
is
pointing
to
the
client-side
at
the
unique
manifest
ID
of
our
extension.
So
let's
actually
double
check
that
one
out.
A
So
if
we
go
back
on
the
source
file
and
we
go
back
on
the
manifest
file,
we
can
say
that
this
ID
is
seven,
eight,
eight
and
then
so
on
EE.
And
if
we
go
back
on
the
elements
XML
file,
we
can
actually
see
that
it's
a
seven
eight.
It
stops
in
AE.
So
we
know
that
it's
the
same
ID,
the
second
entry.
There
is
a
client-side
component
property,
a
century
which
can
be
used
and
to
configure
the
instance,
the
properties
for
the
particular
instance
where
it's
being
employers
being
executed.
A
So,
in
this
case,
it's
still
using
the
default
property
value,
not
the
updated
property
value
which
we
used
our
change
within
our
code,
because
then
the
code,
we
actually
change
the
properties
to
be
called
top
and
bottom
and
we
haven't
updated
this
properly.
So
let's
actually
do
that.
Let
me
get
the
updated
configuration
for
this
one
which
says
ten
matching
our
properties
and
kind
of
paste
in
this
one
directly
from
the
documentation.
A
So
we
can
actually
say
that
the
top
equals
top
equals
top
area
of
the
page
and
bottom
equals
any
quotes
bottom
area
of
debate
and
there
have
to
be
encoded,
the
most
prettiest
thing
necessarily
to
to
configure,
but
that's
a
developer
at
time.
Time
thing,
so
none
of
the
end
users
have
to
understand
anything
out.
It's
not
now.
The
second
thing
actually
wants.
What's
in
the
folder,
it's
a
client-side
installs
XML.
A
So
this
is
actually
quite
interesting
scenario
as
well,
and
this
client
side
side
components
instant,
would
give
us
the
option
of
deploying
this
extension
cross
the
tenant
potentially
automatically.
So
this
one
basically
gives
you
the
option
of
saying
that
hey
I'm,
going
to
make
sure
that
this
extension
whenever
is
going
to
be
added
on
an
app
catalog.
It's
going
to
be
activated
across
all
of
the
sites
in
a
tenant.
A
Well,
technically
again,
you
can
actually
filter
that
on
a
template,
type
or
a
few
other
other
settings
as
well,
but
in
the
case
of
our
tutorial,
we're
not
going
to
actually
spend
time
on
actually
using
the
client
side
component
instance,
so
we're
gonna
deploy
the
extension
explicitly
on
a
site
level.
So
that's
why
let's
actually
modifies
like
in
settings.
So
let
me
go
back
on
the
configuration
file
where
we
have
the
package
solution
which
defines
the
structure
and,
let's
get
rid
of
the
client
side.
A
Instance
XML,
because
we
don't
actually
want
to
use
this,
and
that
means
that
we're
not
named
packaging
that
as
part
of
the
SP
pkg
file,
which
is
going
to
be
generated
as
app
extension,
SP
pkg.
So
quite
simple
from
that
perspective,
so
let's
actually
test
out
things.
So
let
me
actually
go
back
on
the
command
line.
Let's
run
a
couple
under
so
we're
gonna
mount
technically
bundle.
The
extension
we
didn't
do
any
actual
changes
on
the
extension,
but
it's
good
to
have
bundle
executed
there
always
and
then
do
I
call
up
package
solution.
A
Whenever
the
bundling
is
fully
completed,
then
we
go
back
it's
solution,
so
we
can
actually
create.
Then
the
SP
pkg
file
and
we
can
again
see
the
SharePoint
solution
folder
getting
generated
there
in
in
a
second
there
we
go
and
there's
the
the
solution
folder
and
there's
our
app
extension
that
SP
pkg
file
has
defined
in
the
package
solution
JSON
file
and
that's
the
one
which
we
actually
going
to
then
go
and
install
to
our
tenant.
So
let's
do
that.
A
So
let
me
actually,
first
of
all
I
want
to
reveal
that
in
Explorer
there
we
go,
and
let
me
go
to
my
Tennant
and
let's
jump
to
a
amp
catalog
AB
catalog
site
collection
and
the
apps
for
SharePoint
and
I
have
some
of
the
existing
solutions.
Here
then,
let's
not
worry
about
those.
Those
are
from
the
other
tutorials
and
let's
actually
track
and
drop.
This
amp
extension
is
replicated
well
to
the
app
catalog
and
obvious
we're
going
to
again
typical
process.
Do
you
trust
app
extensions
by
the
way?
A
You
definitely
should
trust
and
validate
the
solutions
which
are
adding
to
your
production,
but
that's
separate
discussion
as
well,
so
let's
actually
deploy
stuff.
It
is
pointing
still
to
the
localhost,
and
that
is
by
design,
because
we
want
to
make
sure
well.
We
first
want
to
test
the
basic
process
of
the
installation
and
configuration
and
then
the
final
step
is
actually
dutiful
deployment,
but
you
know
we
can
say
that
that
best
engine
client
solution
is
installed
on
a
tenant,
so
it's
actually
available
to
be
installed
on
a
site
level.
A
So,
let's
get
back
on
our
croup
site
you're,
going
to
use
the
croup
side.
That's
the
example:
there's
no
application,
placeholders,
there's
nothing
actually
running
in
here
before
I,
actually
install
the
application
placeholder.
Let
me
go
to
the
console
and
let
me
run
a
call,
serve
no
process,
so
that
will
make
sure
that
my
local
host
is
now
serving
the
files
which
will
be
soon
requested
by
the
process.
So
there
we
go
so
now
we're
ready
to
go
and
we're
serving
the
files
from
the
localhost.
A
So
now
we're
able
to
then
go
to
the
site
content
and
we
want
to
install
and
explicitly
the
application
or
solution
to
the
site
and
we
can
find
the
app
extension
client
side
solution
available
from
the
App
Catalog.
So
let's
install
that
and
it's
going
to
take
again
a
while,
but
it
doesn't
take
too
long
and
we
can
actually
refresh
the
page-
and
we
already
did
was
already
a
small
flash
on
things.
No,
actually
that's
just
a
loading
thing,
refreshing,
refreshing
installation
still
ongoing.
This
actually
is
a
one-time
scheduled
operation
behind
us,
the
same
site.
A
Still,
oh
now
we
can
actually
say
something
already
happening.
We
can
still
say
that
the
solution
is
still
in
approaches
if
the
final
step
getting
instant
to
the
sign,
but
we
can
already
see
the
top
placeholder
being
rendered
and
the
bottom
placeholder
being
rendered
properly
and
if
I
go
to
the
home
page,
it
doesn't
really
matter
where
I'm
actually
in
the
site.
We
can
see
the
placeholders
getting
rendered
in
the
list
or
in
the
libraries
or
in
a
modern
pages.
So
all
of
that
is
happening
as
design.
So
there
is
there.
A
It
is
our
application
placeholder
with
a
custom
properties
which
we
configured
as
part
of
the
install
the
installation
instructions
in
the
element
XML
file.
These
in
here
is
now
getting
served
automatically
in
the
site
level,
and
but
we
are
still
using
the
localhost
so
for
time
being
we're
actually
still
serving
the
stuff
from
a
local
host.
So
let's
actually
do
the
final
step
and
do
the
full
set
of
configurations
in
a
tenon
so
making
sure
that
our
office
register
a
CDN,
is
running
and
making
sure
that
everything
is
up
and
running.