►
From YouTube: SharePoint Framework Training - Deploying SharePoint Framework Components to Production
Description
This module will address the topic of deploying your SharePoint Framework customizations to production environments.
The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-deployment.
More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.
You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!
A
In
this
screencast
we're
going
to
look
at
deploying
SharePoint
framework
components
to
production,
this
section
is
going
to
cover
working
with
objects
and
files
involved
in
deployment,
the
build
bundle
and
chip
process
how
to
deploy
SharePoint
assets
and
the
deployment
steps.
Let's
first
look
at
the
SharePoint
framework
deployment
artifacts
and
understand
what
things
are
involved:
there's
two
different
kinds
of
files:
there's
the
installation
and
registration
files,
as
well
as
the
component
runtime
and
files
and
dependencies
so
for
the
installation
files.
These
are
included
in
SharePoint
packages
that
are
deployed
to
the
SharePoint
app
catalogs.
A
These
also
make
SharePoint
aware
of
these
new
components
that
are
going
to
be
included
inside
of
these
packages.
It's
going
to
include
things
like
an
application
manifest
or
an
app
manifest
file,
feature
framework
files
and
other
things
that
SharePoint
needs
to
know
about.
That's
not
the
actual
application,
though
that's
going
to
be
coming
in
the
component,
runtime
files
and
their
dependencies.
These
are
optionally
included
in
SharePoint
packages
or
deployed
to
another
remote
location,
such
as
a
CDN
or
content
delivery
network.
A
These
are
referenced
by
SharePoint
when
the
components
are
loaded
on
pages
and
they're,
going
to
include
things
like
JavaScript,
bundles
images,
style
sheets
and
other
assets
that
you
may
use
in
your
components.
Now
the
process
of
creating
your
project
is
called
Bill
bundle
and
packaging.
The
solution-
and
this
comes
in
three
different
phases.
The
build
process
is
going
to
transpile
all
of
your
type
scripts
down
to
JavaScript,
it's
going
to
generate
typescript
type
declaration
files.
A
It's
also
going
to
transpile
all
of
your
sass
files
down
to
CSS
in
all
of
these
files,
the
resulting
CSS
and
JavaScript
files
will
all
be
added
to
a
new
folder,
a
temp
folder
called
Lib
inside
your
project.
The
next
stage
is
the
bundling
stage.
This
stage
is
going
to
generate
a
JavaScript
bundle.
Now,
when
you
do
this,
it's
going
to
take
all
the
JavaScript
and
CSS
files
that
are
referenced
in
your
project
and
minify
them
down
or
crunch
them
down
into
a
single
JavaScript
bundle.
A
Depending
on
how
your
configuration
is
set
up,
you
can
actually
have
multiple
bundles
generated,
but
that
is
kind
of
beyond
the
scope
of
what
we're
working
with
here.
Just
for
the
most
part
think
that
the
bundling
processes
again
generate
one
bit:
bundle
file
that
you're
going
to
deploy.
You
have
an
optional
flag
of
ship
or
you
can
just
use
the
P
for
production,
and
what
this
is
gonna
do
is.
A
This
is
going
to
tell
the
bundling
process
to
go
ahead
and
minify
and
uglify
the
resulting
bundle,
and
what
that
means
is
that
it's
going
to
take
out
all
the
whitespace
strip
out
all
the
comments
and
do
everything
it
can
to
have
the
files
still
work.
The
exact
same
way
except
it's
gonna,
be
a
much
smaller
file,
removing
all
that
what
all
those
whitespace
characters.
A
The
last
phase
is
the
packaging
of
the
solution,
and
what
this
is
going
to
do
is
take
the
resulting
javascript
bundle
that
was
generated,
and
it's
also
going
to
generate
all
the
other
things
that
are
needed
to
do.
The
deployment.
For
example,
it's
gonna
join
all
the
files
need
for
the
deployment
it's
again
journey,
all
the
files
needed
to
run
the
components
that
may
be
localized
string
files
that
may
also
include
manifest
files.
The
manifest
files
of
that
for
each
component
are
gonna.
A
It's
gonna
take
all
these
files
that
it
generates,
including
all
the
ones
they're
gonna
have
to
go
to
SharePoint
like
an
app
manifest
file
and
feature
framework
files.
It's
gonna
generate
them
and
put
them
into
a
zip
file.
This
is
think
filing
along
with
the
open
packaging
convention,
the
OPC
Convention.
This
is
just
a
zip
file,
but
it's
been
renamed
to
a
dot
SP
pkg
for
a
sharepoint
package.
This
file,
all
the
loose
files,
will
all
be
added
to
the
temp
folder
and/or,
the
SharePoint
folder,
depending
on
the
use
of
where
they're
gonna
go.
A
It's
gonna
go
into
the
temp
folder.
If
you're
gonna
deploy
things
via
CDN,
it's
gonna
go
to
the
SharePoint
folder
for
the
files
that
are
gonna
be
deployed
to
SharePoint.
Now
I
talked
a
little
bit
about
the
different
packaging
modes
or
building
and
bundling
modes
of
debug
and
production.
Debug
mode
is
when
you
run
bundle
or
package
solution
without
a
ship
or
a
production
flag.
A
When
you
run
these
all
the
generated
files
are
left
unmanned,
cluded,
the
ship
or
P
attribute
on
the
bundle
or
the
package
solution,
step
ins
when
you're
running
the
gulp
tasks,
these
things
they
would
be
minified.
If
you
include
those
flags
in
the
debug
process,
the
JavaScript
source
map
files
are
included
in
the
transpiration
process
from
typescript
adopts
JavaScript,
making
your
debugging
process
a
little
bit
easier.
However,
that
is
not
the
case
when
you're
working,
when
you
add
the
production
flags,
the
the
source
maps
are
not
generated.
A
Now
how
we
deploy
these
different
SharePoint
assets?
Well,
there's
two
ways:
we
can
do
it
for
the
SharePoint
package.
This
is
always
going
to
be
deployed
to
a
SharePoint,
app
catalog
that
can
be
a
tenant,
scoped,
app
catalog
or
a
site
collection,
scoped,
app
catalog,
we'll
talk
more
about
these
in
a
little
bit.
The
other
piece
that
we
have
are
the
component
executable
files
that
are
going
to
be
deployed
to
a
hosting
location.
The
only
requirement
here
is:
they
must
be
accessible
to
all
the
users
on
a
site.
A
Now
you
can
have
a
bunch
of
different
manual
options.
We
can
have
it
go
to
the
north
is
365
CDN.
We
can
deploy
these
to
an
azure
CDN
or
a
public
or
an
internal
URL
that
everyone
has
access
to.
The
other
option
that
you
have
was
introduced
after
the
general
availability
milestone
for
the
SharePoint
framework
is
included
in
the
1.4
release.
Is
there's
a
flag
that
we
can
add
to
the
package
solution.
A
It
will
include
those
in
the
SharePoint
package
so
that
when
you
install
the
SharePoint
package,
it'll
automatically
put
those
files
into
the
Associated
office,
365
CD
and
for
the
current
site
collection,
where
you're
installing
the
app.
So
what
are
the
steps
for
going
through
and
building
and
installing
your
application?
It's
pretty
straightforward,
you're
gonna
go
start
your
application.
You're
then
going
to
build.
It
then
bundle
it
and
then
package
up
your
solution.
You're
then
going
to
take
your
SharePoint
package
and
upload
it
to
an
app
catalog.
A
Now,
there's
a
couple
little
caveats
here
to
where,
if
you
have
a
certain
thing
set
up
for
skip
feature
deployment
turned
on
or
turned
off,
you
may
get
a
different
experience,
but
for
the
most
part
after
you've
deployed
it
to
the
SharePoint
app
catalog.
You
then,
are
gonna,
go
to
a
site
collection
and
then
it
create
a
new
instance
of
the
application.
A
By
going
to
the
site
contents,
page
selecting
say
you
want
to
create
a
new
app
and
then
pointing
to
the
app
that's
now
available
and
showing
up,
because
you
deployed
it
to
the
app
catalog.
Let's
see
this
very
straightforward
process
for
creating
a
new
SharePoint
framework
web
part
and
then
building
it,
bundling
it
packaging
it
deploying
it
and
then
ultimately,
installing
it
into
a
site
collection.
Okay,
in
this
demo,
we're
going
to
create
a
simple
SharePoint
framework,
client-side
web
part
that
we're
gonna
use
this
for
trying
out
in
different
deployment
configurations.
A
This
is
intended
to
be
very
simple
and
very
straightforward
for
the
deployment
piece,
so
we're
not
gonna
spend
any
time
on
the
coding
aspect
we
just
want
to
do.
A
deployment
looks
like
so
I'm
going
to
start
out
by
creating
our
new
project
here
for
my
project,
so
I'm
gonna,
sarni
folder
for
my
project.
A
I'll
just
say
that
this
is
no
no
it's
a
web
part
and
then
we'll
call
this
our
deployment
demo
and
we're
just
going
to
use
the
note
JavaScript
framework,
so
I'm
gonna
go
ahead
and
let
NPM
scaffold
out
the
part
where
let
the
yeoman
generator
scalpel
the
project
up
and
then
let
NPM
download
all
the
dependencies
and
we're
gonna
skip
ahead
in
the
video.
So
you
have
to
wait
around
for
this
to
happen.
Now
that
everything
has
been
downloaded,
we
have
all
the
dependencies
installed.
A
Now,
let's
go
ahead
and
build
our
project,
so
I'm
going
to
say,
gulp
build
and
again
what
this
is
gonna
do
is.
This
is
going
to
create,
are
all
of
the
necessary
assets
for
our
project,
I
that
we're
in
need
for
the
bundling
process.
So,
if
I
take
in
a
list
of
all
the
files
here,
you'll
see
that
I
have
a
Lib
folder,
that's
been
generated.
It's
gonna
contain
all
the
contents
of
like
the
JavaScript
and
the
CSS
files
that
have
been
generated
from
tight
script
and
from
SAS
files.
A
Now
the
next
step
is
to
bundle
the
product
bundle,
everything
up
so
I'm
going
to
say,
gulp
bundle
ship
and
what
this
is
gonna
do
is
gonna,
take
all
the
files
from
the
lib
folder
and
generate
the
JavaScript
bundles
for
us.
Now
it's
doing
its
minifying,
these
files
for
us,
because
I
included
the
ship
flag,
and
the
last
step
here
is
to
run
the
package
solution.
So
I'll
say
gulp
package
solution.
A
A
A
A
For
me,
if
you
refer
to
the
SharePoint
documentation,
it
has
instructions
on
how
to
enable
the
office
365
CDN,
and
it
also
contains
details
if
you
want
to
deploy
your
files
to
a
third-party
CDN,
such
as
an
azure
CDN.
If
that
was
something
you
were
interested
in
doing
I'm
gonna.
Just
go
select
deploy.
What
this
is
gonna
do
is
effectively
say
that
we're
gonna
trust
this
for
use.
So
if
I
scroll
over
here,
you
can
see
that
everything
was
deployed
and
I
have
no
errors
in
my
deployment.
A
So
now,
let's
come
over
to
a
SharePoint
site.
So
let's
go
ahead
and
go
to
a
site,
will
go
to
demo
and
I'm
gonna
go
ahead
and
create
or
install
my
app
into
this
site
collection,
so
I'm
gonna
go
new
app
and
if
I
scroll
down
I
should
see
the
deployment
demo
that
we
just
created,
we
just
floated
a
second
ago,
so
I'll
go
ahead
and
select
this.
A
A
So
let's
create
a
new
page
I'll,
just
call
this
my
test,
our
test
bed
and
then
come
down
here
and
we
will
go
to
add
our
web
part
and
if
I
scroll
down
to
the
bottom
I
should
see
my
deployment
demo
web
part
that
we
see
is
listed
right
here.
So
it
looks
pretty
good,
so
go
ahead
and
publish
my
changes
and
here
what
you
get
that?
What
this
showed
then,
is
how
we
can
go
about
deploying
our
application.
A
Now,
let
me
show
you
one
other
thing
with
this:
it's
kind
of
interesting
but
go
ahead
and
open
up
the
developer
tools
and
they
go
to
sources
and,
let's
refresh
the
page
again
and
notice
here,
I'm
at
my
site
collection
if
I
go
to
sites,
slash
dev
Oh,
to
notice
here
in
my
app
catalog
I
have
the
client-side
assets.
So
here
I
have
two
different
client-side
assets
that
are
showing
up.
A
We
just
have
to
figure
out
which
one
is
the
one
that
we
just
deployed:
it's
not
that
one
here's
our
deployment
demo,
so
we
created
one
called
the
deployment
demo
web
part.
This
URL
that
you
can
see
it's
kind
of
hard
to
see
with
the
pop-up
showing
up,
but
where
you
see
it's
going
to
this
site
collection
sites,
slash
and
then
I.
A
Just
saying.
Come
back
over
here,
go
to
the
complete
opposite
process.
I'm
going
to
delete
the
web
part
from
the
page
I'll
come
over
here
to
the
site,
contents
and
I'm,
going
to
remove
the
application
which
we
need
to
do
that
for
now
inside
of
the
classic
experience,
so
I'll
come
over
here
and
say,
remove
and
once
it's
been
removed.
I
can
then
go
back
to
my
app
catalog
and
then
I
could
ultimately
remove
this
right
here.
I
can
remove
this
and
nobody
else
could
use
or
install
this
application
inside
their
SharePoint
online
site
collection.
A
In
this
section,
we're
going
to
look
at
site
collections
and
the
application
lifecycle,
management,
api's
and
specifically
we're
gonna
focus
on
a
tenant,
scoped,
app
catalog
and
a
site
collection,
scoped
out,
catalog
and
then
we'll
dive
into
the
ALM
ap
is
a
tenant.
Scoped
app
catalog
has
been
around
since
SharePoint
Server
2013,
all
subsequent
on-premises,
SharePoint,
Server
releases
and
SharePoint
Online
is
gonna.
Have
a
tenant
scope
out
catalog.
This
is
managed
by
the
SharePoint
tenant
administrators
in
every
asset.
A
That's
deployed
to
share
that
is
deployed
in
a
SharePoint
package
that
you
have
deployed
to
a
tent
scope.
App
catalog
is
going
to
be
available
to
all
the
site
collections
throughout
the
entire
tenant.
Now
you
can
then
install
these
customizations
to
all
the
site
collections
throughout
your
tenant.
Now
this
is
only
limited.
There's
another
option
here
that
we
can
actually
deploy
this
automatically
like
if
I
have
a
web
part
inside
of
a
SharePoint
framework
or
SharePoint
package.
A
If
I'm
working
on
SharePoint,
Server,
2019
or
I'm
working
in
SharePoint
Online,
there
is
an
option
that
I
could
say:
I
want
the
customization
to
be
automatically
installed
into
every
single
site
or
made
available
to
every
single
site,
and
what
that
would
do
is
that
would
remove
the
step
of
me
having
to
go
to
each
individual
site
collection
and
install
the
app
so
that
save
the
web
part
would
be
available
to
add
to
different
pages
throughout
my
site.
This
is
only
applicable
to
webparts
at
this
time.
A
A
Now
another
type
of
app
catalog
was
introduced
inside
of
SharePoint
Online,
and
that
is
a
SharePoint
site
collection
scoped
out
catalog.
These
are
only
available
in
SharePoint,
online
and
they're,
managed
by
the
site,
collection
administrators.
Now
the
way
that
these
work
is,
you
can
think
of
these
as
just
exactly
like
they
sound
a
site
collection,
scoped,
app
catalog.
The
way
it
works
is
that
once
I
upload
a
package,
a
SharePoint
package
to
a
site,
collection,
scope,
app
catalog.
The
contents
of
that
package
are
only
available
to
that
site
collection.
A
They
are
not
available
to
any
other
site
collection,
so
this
is
a
good
way
to
where,
if
I
want
to
have
a
web
part,
that
is
only
available
to
one
site
collection
or
a
subset
of
site
collections.
Instead
of
trying
to
hide
it,
I
can
just
say,
install
this
SharePoint
package
just
to
these
specific
catalogs.
Now
these
are
not
automatically
created
by
default.
You're
gonna
have
to
create
these
manually
as
a
tenant
administrator.
A
A
So,
for
example,
if
I
upload
a
SharePoint
package,
I'm
gonna
be
prompted,
as
you
saw
in
the
demo
previously
I'm
gonna,
be
prompted
to
make
sure
that
the
application
or
I
see
the
list
of
all
the
different
URLs
of
where
script
files
are
going
to
be
loaded
from,
and
that's
only
listed
how
their
files
are
listed
externally,
if
I'm
anywhere
else
throughout
my
project,
where
I'm
dynamically
loading
a
file,
it
could
still
be
pulled
in
from
some
remote
location.
Now,
why
is
that
a
big
deal?
A
Well,
because,
once
those
script
files
are
running
on
your
page,
they
they're
gonna
be
running
under
the
context
of
the
current
user.
That's
logged
in
and
those
could.
You
could
be
having
a
user
that
has
a
much
high
privilege
access
permissions
to
where
they
could
then
access
things
like
say
a
mergers
and
acquisitions
document
library
that
not
everybody
should
be
able
to
see
well,
if
they're
on
the
site-
and
there
is
a
emerges
and
acquisitions
document
library,
with
some
confidential
documents
in
there
and
the
webparts
been
added
to
the
page.
A
A
But
essentially
what
you
do
is
you
first
go
log
in
to
SharePoint,
Online
and
log
in
to
the
admin
Center,
the
admin
site,
the
SharePoint
admin
site
and
then
you're
gonna
tell
SharePoint
that
I
want
to
create
a
site
collection,
scope,
app,
catalog
and
pass
it
the
URL
of
the
site
collection.
Where
you
want
this
to
happen,
you
can
also
do
the
inverse.
A
You
can
remove
the
site
collection,
app
catalog,
but
just
keep
in
mind
that
they're
not
really
removed,
they're,
really
just
disabled
under
the
covers,
and
what
is
going
on
is
that
when
we
added
these,
what
happened
was
it
was
a
special
document
library
that
was
added
to
SharePoint
to
the
SharePoint
site
collection
in
SharePoint
Online,
and
there
were
some
server-side
event
receivers
that
were
hooked
on
to
that
document.
Library.
A
That
said
that,
when
packages
were
added
to
the
library,
then
it
went
ahead
in
it
automatically
installed
those
installed
those
forests
in
that
current
site
collection,
when
you
remove
a
site
collection,
app
catalog,
it's
just
removing
the
event
receivers.
True
to
share
points
nature,
it
doesn't
by
default,
delete
data
or
delete
content,
and
so
the
document
library
is
left,
as
are
all
of
the
SharePoint
app
SharePoint
packages.
So
it
may
look
like
when
you
remove
it
that
nothing
happens.
A
But
if
you
tried
to
deploy
a
new
SharePoint
package,
you
would
see
that
the
it
would
not
get
installed.
It
would
just
sit
there
like
and,
like
you
are
uploading
it
to
a
normal
document
library.
If
you
really
wanted
to
remove
it,
then
you
would
first
remove
the
site
collection,
app
catalog
by
running
one
of
these
commands
using
SharePoint,
Online
PowerShell
or
the
office
365
CLI,
and
then
you
can
go
in
and
delete
the
document
library
now.
The
one
other
thing
I
want
to
talk
about
in
this
section
is
application
lifecycle
management.
A
So
what
Microsoft
did
is
they
introduced
a
new
set
of
api's
that
enables
programmatic
control
over
the
entire
SharePoint
package
lifecycle?
Previously
you
couldn't
do
this
programmatically
there
had
to
be
a
user
involved
or
someone
involved
to
click
a
deploy
button
to
make
sure
that
apps
were
deployed.
You
could
programmatically
upload
something
to
the
site
collection,
but
everything
else
was
still
was
not
programmatically
controllable.
A
So
what
this
is
going
to
allow
us
to
do
is
it's
gonna,
allow
for
complex
automation
in
continuous
integration
or
continuous
deployment
scenarios,
as
well
as
controlling,
very
large
numbers
of
deployments,
so
it
enables
like
I,
said
the
entire
lifecycle
of
a
package
you
can
add
and
remove
solutions
and
packages.
To
add
catalogs
you
can
then
enable
or
disable
which
is
equivalent
in
the
UI.
It's
just
called
deploy,
so
you
could
deploy
solutions
and
add-ins.
You
can
then
install
or
uninstall
solutions
and
add-ins
in
a
SharePoint
site
collection.
A
You
can
then
also
upgrade
SharePoint
solutions
and
add-ins,
and
then
you
can
also
list
or
just
get
a
single
sharepoint
framework
solution,
an
add-in
within
an
app
catalog.
These
are
all
published
as
rest
endpoints,
as
HTTP
endpoints,
using
a
REST
based
protocol,
but
there
are
PowerShell
options
and
the
command-line
interface
options
and
see
some
options
that
have
all
been
provided
by
the
patterns
and
practices
group
at
Microsoft
or
the
SharePoint
patterns
and
practices
group,
which
is
both
part
of
Microsoft
and
part
of
the
community
that
you
can
use
in
your
solutions.
A
Alright,
in
this
demo,
let's
take
a
look
at
working
with
the
tenant
and
the
site
collection
scope,
app
catalogs.
Now,
in
the
last
demo,
we
saw
how
to
create
a
new
project
and
deploy
it
to
the
tenant
scope.
App
catalog
and
I
just
want
to
show
you
that
I've
gone
ahead
and
removed
it
for
my
tenant
scope,
def
catalog
and
if
I
go
back
to
my
SharePoint
site.
A
So
I
don't
have
access
to
the
SharePoint
Online
PowerShell
because
it
is
not
using
the
cross-platform
PowerShell.
So
instead
I
need
to
use
the
office
365
CLI
the
slides,
provided
a
link
to
where
you
can
how
you
can
go,
find
more
information
about
this
and
install
it
so
I'm
going
to
show
you
how
we
can
use
it
so
I'm
going
to
jump
back
over
to
my
command
prompt.
A
So
let's
first
go
ahead
and
start
the
office
365
CLI-
and
this
has
already
been
installed
on
my
machine
so
again
refer
to
the
documentation
on
how
to
install
this
and
then
I'm
going
to
say
SPO
login
to
HTTPS
and
then
let's
go
grab
our
grab
the
site
that
we
want
to
put
that.
We
want
to
use
this
on.
So
our
admin
site.
A
A
Now
that
it
shows
I've
logged
in
I'm,
gonna
come
back
over
here
to
my
command,
prompt
and
eventually
it's
gonna,
give
me
this
little
status
where
it
just
shows
me
I'm
ready
for
the
next
command,
so
I
could
always
say
SPO
status,
and
it
shows
that
I'm
logged
into
the
admin
site
now
to
create
the
app
catalog,
I'm,
gonna,
say
SPO,
site
catalog
ad
and
then
specify
the
URL
the
site.
Where
I
want
to
do
this.
A
A
If
I
come
back
over
here
to
my
site
collection
and
go
back
to
the
site
contents
page
again,
you'll
now
see
a
new
library
called
Apps
for
SharePoint.
Now
from
here
we
can
go
ahead
and
add
in
an
app
catalog
or
add
a
SharePoint
package.
So
let's
go
back
and
add
that
package
that
we
created
in
the
last
demo.
A
A
A
What
we're
gonna
see
is
that
app
is
not
going
to
be
available
to
us
to
install
inside
of
this
new
site
and
the
reason
is
because
the
app
was
deployed
or
the
package
deployed
to
the
dev
Oh
to
site
collection.
That
means
it's
only
available
inside
of
that
site
collection
so
see
here,
there's
nothing
that
I
can
install
so
much
more
limited
list,
it's
pretty
cool.
A
So
in
this
demo
you
saw
how
you
could
leverage
a
site
collection,
app
catalog,
whereas
in
the
previous
demo
you
saw
how
to
do
it
with
and
at
a
tenant
scope.
F
catalog
in
this
last
section.
Let's
talk
about
updating,
SharePoint
framework
solutions,
we're
going
to
look
at
updating
the
component
versions
and
then
also
updating,
SharePoint
package
versions
and
see
what
the
implications
are
of
each
one
of
these
now,
let's
first
understand
version
numbers
in
SharePoint
framework
projects.
There
are
two
different
things
that
we
conversion
in
a
SharePoint
framework
project.
A
We
conversion
the
component
itself,
such
as
a
web
part
or
an
extension,
and
we
can
version
the
package
itself
as
well
now
what's
interesting
about
this,
is
that
these
are
not.
It
is
not
required
to
increment
the
version
numbers
of
either
one
of
these
when
you
change
code
like
when
you
make
a
code
change,
deploying
updated
SharePoint
packages
without
changing
the
version,
numbers
will
still
update
the
existing
code,
no
matter
what
the
component
version
is
used
just
for
documentation,
the
package
version
is
used
for
documentation
and
to
trigger
the
SharePoint
app
upgrade
process.
A
So
why
would
I
do
that?
Well,
that's
only
gonna
be
important
when
you
do
things
like
adding
a
new
feature
or
adding
a
new
component
to
your
project.
So
when
you
want
to
update
the
SharePoint
framework
component
and
an
increment,
the
version
number
you're
going
to
do
this.
You
can
do
this
through
to
update
the
code
or
the
configuration
just
for
the
actual
web
part
and
the
way
you're
going
to
do.
It
is
you're
going
to
look
for
the
manifest.json
file
for
your
component.
This
is
going
to
set
the
version
for
the
web
part.
A
So
here
you
can
see.
I
have
a
version
number
of
0.01
now.
The
other
option
here
is
to
put
a
star
instead
of
the
version
number
right
here.
If
you
put
a
star
in
this
instance
here,
where
I
you
see,
it's
highlighted
on
the
slide,
where
it
shows
version,
0,
dot,
0,
dot,
1,
then
the
version
number
that
is
defined
in
the
project's
package
JSON
file
is
the
version
number
that
this
component
is
going
to
receive.
A
And
this
way
you
can
have
all
the
components
within
a
solution
all
have
the
same
version,
which
is
packaged
a
JSON
version
or
you
could
have
them
have
individual
versions.
That's
totally
up
to
you.
By
default,
we
use
a
star
and
everything
in
the
project
is
going
to
be
version.
The
same
using
package
that
JSON
now
what
about
upgrading
the
version
inside
the
package
itself?
So
what
this
is
going
to
do
is
this
is
going
to
set
the
version
of
the
SP
pkg
file.
A
This
is
all
gonna
be
done
inside
the
package
solution,
dot,
JSON
file
and
then
here
you'll
find
a
version
attribute
as
well.
This
is
where
you
can
specify
the
version
number
of
the
package.
Now
when
you
deploy
the
package
or
the
SharePoint
package
to
an
app
catalog,
you
will
see
the
app
version
is
listed.
If
this
version
number
changes,
this
is
going
to
trigger
the
app
upgrade
process.
So
this
is
if
I
change
it
from
version
one
to
version
1.0
to
version
1.1,
the
any
anything
new.
A
That's
in
the
package
like
a
new
web
part
or
new
extension
or
a
new
feature.
None
of
those
things
are
going
to
show
up
in
the
your
SharePoint
environment
until
the
package
has
been
deployed
or
has
been
upgraded,
and
the
reason
for
that
is
because
the
features
are
still
used
to
provision
all
these
different
assets
inside
of
SharePoint.
So
if
I
don't
go
through
the
feature,
upgrade
process
or
have
a
feature,
activation
process
happen
again,
which
would
happen
on
activate
or
on
an
upgrade
of
the
app
the
we
wouldn't
see,
changes
happen
now.
A
Last
but
not
least,
I
can
also
update
the
package.json
file,
and
this
is
what's
gonna
change
for
every
component.
If
there
is
a
star
used
inside
the
components
manifest
for
his
version,
let's
take
a
look
at
a
demo
at
upgrading
and
updating
the
component
versions
and
the
package
versions
in
this
demo.
We're
gonna
see
how
to
change
the
various
version,
numbers
and
SharePoint
framework
components
and
packages,
and
as
well
as
it's
gonna
impact
your
deployment.
A
Now
I'm
gonna
use
the
project
that
I
created
the
beginning
of
this
screencast
that
didn't
really
have
anything
special
inside
of
it
and
we're
also
going
to
use
the
site
collection,
scoped,
app
catalog
that
we
deployed
the
application
to
in
the
previous
demo.
If
you
need
the
code
for
this,
you
can
go.
Take
a
look
at
it.
It's
there
with
remember,
there's
nothing
special
with
this
code.
I
haven't
done
anything
special
to
it.
A
So
keep
in
mind
that
in
the
previous
demo,
when
I
deployed
the
SharePoint
framework
package,
it
contained
a
single
web
part
and
the
version
that
web
part
was
unchanged
from
the
default
version
that
was
included.
So
if
I
go
over
here
and
I,
look
at
the
actual
web
part
that
was
created,
you
can
see
it
set.
His
version
is
set
to
a
star,
and
what
that
means
is
that
we're
going
to
use
the
version
from
package.json,
which
is
0.1.
A
A
A
And
now,
let's
do
a
gulp
bundle
pee,
that's
the
same
as
doing
a
ship.
Now
what
I'm
doing
what
the
reason
I'm
doing
this
is
I.
Want
you
to
see
how
the
version
number
is
going
to
change
so
I'm
gonna
come
over
here
to
my
project,
I'm
gonna,
look
at
the
dist
folder,
where
the
manifest
was
created
for
this
project
and
notice
here
that
the
manifest
for
this
component
that
was
generated
is
now
0
0,
so
it's
being
driven
by
what's
inside
of
package.json.
A
Now,
let's
go
and
add
a
second
component
to
this
project,
so
I'm
gonna
come
over
here
to
my
command
prompt
again
and
I'm
gonna
run
the
yeoman
generator
for
SharePoint
and
because
it
knows
that
I'm
already
inside
of
a
SharePoint
framework
project,
it's
just
gonna
skip
to
the
part
that
says
what
do
you
want
to
create
so
I'm
gonna
say:
let's
create
a
web
part.
This
will
be
our
second
deployment
demo
and
it'll
also
be
no
JavaScript
framework.
A
A
Now
it's
running
the
bundled
command
that
you
can
see
here
and
when
bundling
is
finished,
we
will
now
see
the
package
solution,
commands
gonna
start
and
this
one
goes
pretty
quick,
alright,
so
there
we
go
we're
all
good.
Now,
let's
go
back
to
our
site
collection
week
that
we
have
let's
go
to
the
site
contents
and
let's
go
to
our
apps
for
SharePoint,
now
I'm
going
to
upload
a
new
version
of
this
package.
Now.
A
So
I'm
gonna
grab
this
package
and
drop
it
in
it's
gonna
say:
do
you
want
to
replace
it?
I'll
say
yes
notice
that
the
version
number
is
still
1.0.0,
because
that's
the
package
version,
not
the
component
I'll
go
ahead
and
deploy
my
changes
and
then
once
that's
done
so
now,
if
I
try
to
go,
add
a
new
web
part
to
the
page
and
if
I
scroll
to
the
bottom,
you
still
only
see
my
deployment
demo.
A
When
the
package
was
deployed
within
it,
any
features
were
activated
have
to
be
activated
for
the
feature
to
do
its
work,
in
other
words,
to
go
register
the
web
part
with
the
site,
but
without
versioning
the
packaged
SharePoint
didn't
see
any
changes
to
the
package
itself,
and
thus
it
did
not
reactivate
any
existing
features
or
activate
any
new
features
or
give
me
any
kind
of
an
upgrade
process.
So
what
I
need
to
do,
then,
is
I
need
to
go
back
to
the
drawing
board
and
we
need
to
go
version
our
component.
A
So
let's
come
back
over
to
our
visual
studio
code
project
and
let's
go
into
the
config
folder
and
look
at
packaged
solution
and
notice.
Here
it's
100.0,
so
I'm
going
to
switch
this
over
to
1.0.1
and
save
our
changes.
So
now,
let's
go!
Do
the
exact
same
rebuilding
process
there.
We
go
rebuilding
process
done
now.
A
If
I
come
back
over
here
to
my
app
catalog
and
let's
upload
this
solution
again
now,
I
want
you
to
take
notice
that
we're
still
versions
1.0
inside
of
the
app
catalog
when
I
drop
this
in
and
say
replace
it
watch
what
happens
to
our
version
number.
It
just
got
incremented
to
1.1.1
okay.
So
what
does
that
mean?
Well,
let's
come
back
over
here
to
our
site
to
our
site
contents
and
go
into
the
apps
for
SharePoint
or
actually
we
can
look
at
it
from
right
here.
A
So
here's
the
app
that
we've
installed
so
right
now
if
I
went
to
the
page
to
go
added
the
the
web
part
to
the
page.
So
if
I
came
over
here
to
my
testbed
and
I
tried
to
add
the
web,
it's
still
gonna
not
show
me
my
new
web
part
and
the
reason
for
that
is
because
I'm
still
running
the
old
version
of
the
app.
So
here
I
can't
see
it
in
this
experience.
A
Give
us
access
to
the
new
web
part
so
that
now
we
can
see
that
we're
now
running
1.1
and
if
I
go
back
to
my
testbed
page
and
refresh
the
page
and
now,
if
I
go
into
go,
add
a
new
web
part
to
the
page.
Now
I
should
see
my
second
deployment
demo.
Now
it's
gonna
show
up
for
me
and
again.
The
reason
for
that
is
because
we
upgraded
the
actual
app.
So
if
I
modified
any
of
the
code,
all
the
code
would
still
deploy
without
having
to
worry
about
version
numbers.