►
From YouTube: PnP Virtual Conference - 09/2020 - Upgrade your SPFx projects using CLI for Microsoft 365
Description
Since the first developer preview in 2016, the SharePoint Framework has released over 10 major releases and many minor releases, adding new functionality and improvements along the way.
But how do you keep your SPFx solutions up-to-date with the latest version of SPFx?
Luckily, Office 365 CLI makes it easy to upgrade your SPFx projects with minimum efforts!
In this session, we'll show you how to use the Office 365 CLI SPFx project upgrade command, some of the configuration options, and how to solve issues you may encounter along the way.
Speaker: Hugo Bernier (Tahoe Ninjas) | @bernierh & David Warner (Catapult Systems) | @DavidWarnerII
Supporting materials:
• CLI for Microsoft 365 - https://pnp.github.io/cli-microsoft365/
• SharePoint Framework samples - https://aka.ms/spfx-webparts | https://aka.ms/spfx-extensions
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
My
name
is
david
warner,
I'm
a
principal
consultant
with
catapult
systems
and
a
microsoft,
365
office
development
mvp
a
little
bit
about
myself,
I'm
a
big
sports
fan,
I
love
hockey
and
football,
but
an
even
bigger
fan
of
the
community.
I
love
collaborating
with
the
community.
I
love
working
with
the
community,
so
if
you
ever
have
any
questions
or
would
like
to
collaborate
together
on
a
sample
or
a
presentation
just
feel
free
to
reach
out.
A
B
And
my
name
is
hugo
bernier,
I'm
an
enterprise
architect,
I'm
an
independent
consultant
from
canada
and
I'm
a
microsoft
office,
365
development,
mvp
and
a
proud
pmp
team
member,
I'm
the
opposite
of
david
when
it
comes
to
hockey
and
football.
I
really
don't
like
it,
but
I
am
passionate
about
cooking
and
food.
I
also
call
myself
the
world's
biggest
developer,
but
I've
never
really
bothered
to
check
whether
it's
true
or
not.
You
can
reach
me
at
my
blog
ninjas.blog
or
on
twitter
at
bernie.
A
H
before
we
get
started
today,
we
wanted
to
mention
that
at
this
time,
the
office
365
cli
is
currently
in
the
process
of
being
renamed
to
cli
from
microsoft
365.,
while
this
does
not
affect
any
of
the
functionality
in
this
session.
We
wanted
to
make
you
aware
of
this
change
to
avoid
any
confusion.
When
you
see
the
use
of
the
new
name
inside
the
official
documentation,
our
agenda.
B
For
today
is
we'll
talk
about
some
common
scenarios
for
spfx
solution
upgrades
and
then
we'll
show
you
how
to
find
an
sdfx
webpart
sample
and
we'll
discuss
the
office
365
cli.
So
we'll
do
an
overview,
we'll
show
you
how
to
install
the
office
365
cli
and
then
we'll
show
you
the
spfx
doctor
as
well
as
how
to
do
project
upgrade.
B
B
First
of
all,
let's
point
out
that
if
you
have
a
web
part
that
works-
and
you
don't
need
to
do
anything
to
it,
you
don't
need
to
fix
bugs
or
anything
like
that.
You
really
don't
need
to
upgrade.
It
it'll
continue
working
in
the
version
of
sharepoint
that
you
have
running.
However,
if
you
need
to
fix
some
bugs
in
a
web
part
or
you
need
to
add
new
functionality
to
an
existing
web
part
or
if
you
want
to
take
advantage
of
some
of
the
new
features
that
are
supported
by
newer
versions
of
sharepoint
framework.
A
So
now,
let's
discuss
what
our
session
story
is.
For
the
day,
perhaps
we've
found
an
spfx
webpart
sample.
That's
been
built
with
an
older
version
of
spfx,
we'll
use
one
today
that
was
built
on
1.7.0,
but
my
current
development
environment
is
using
1.11.0
when
we
try
to
build
this
web
part,
we'll
likely
encounter
errors.
So
what
options
do
we
have?
A
Well,
let's
take
a
look
at
finding
that
webpart
sample
first
and
then
we'll
use
two
features
of
the
office:
365
cli,
the
first
being
spfx
doctor
to
determine
what
might
be
the
problem
with
using
that
older
web
part
in
our
current
development
environment
and
then
we'll
use
the
project
upgrade
feature
to
actually
perform
an
upgrade
on
this
web
part.
So
it's
now
compatible
with
my
environment,
which
is
running
spfx
1.11.
B
You
can
absolutely
use
the
tools
that
we'll
be
showing
you
today
to
upgrade
your
own
solutions,
but
for
the
purpose
of
this
demo,
what
we'll
do
is
we'll
actually
use
a
sample,
that's
available
in
the
spf
x,
webpart
samples.
So
to
find
some
samples,
you
just
need
to
go
to
aka
dot.
Ms
slash
spfx
dash
webparts,
the
spfx
webparts
sample
browser
is
a
great
place
for
you
to
find
samples
of
web
parts
that
you
can
use
in
your
own
solutions.
A
B
And
david,
some
of
these
web
parts
are
very
simple.
Some
other
web
parts
are
actually
quite
complicated
and
very
exciting
when
you
look
at
the
code
and
what
it'll
do
is
it'll
give
you
this
sample
browser
that
allows
you
to
find
things
by
version
of
the
framework.
If
you
want
to
deal
with
something
like
react
or
handlebars
by
the
sharepoint
framework
version
by
the
compatibility.
So
if
you're
looking
for
a
sample
that
is
specific
for
sharepoint
2019
versus
sharepoint
online
or
sharepoint
2016,
you
can
do
that
as
well.
B
B
B
So
if
I
click
on
the
sample
in
the
sample
browser
it'll
take
me
to
the
source
code
associated
to
this
sample.
You
can
actually
drill
through
the
source
code
and
take
a
look
at
the
code,
but
the
other
thing
you
can
do
is
look
at
the
readme
file.
Every
sample
has
an
associated
readme,
which
tells
you
what
the
web
part
does.
B
It
always
shows
you
a
preview,
and
it
always
shows
you
the
version
of
sdfx
framework
that
was
used
as
well
as
other
things
like
who
created
the
sample
when
it
was
updated
and
how
to
install
it
now.
I
know
this
is
the
sample
that
I
want
so
I'll
actually
go
and
download
it
now.
Unfortunately,
it's
there's
no
easy
way
to
download
the
sample
directly
from
here.
B
You
go
to
the
root
of
the
repository
and
from
there
you
can
just
click
on
the
code
button
and
you
can
you
click
on
download,
zip
now,
if
you're
already
familiar
with
github,
you
can
also
open
it
in
github
or
you
can
clone
the
repository,
but
we're
trying
to
keep
this
as
simple
as
possible.
So
we'll
just
click
on
download
the
zip
and.
A
B
Now
this
repository
is
quite
large
because
it
contains
a
lot
of
samples
and
that
download
will
actually
be
a
little
big
it'll
take
a
while,
but
once
it's
downloaded
we'll
actually
expand
the
zip
file
and
we'll
find
the
sample
from
the
from
the
folder
all
right.
So
once
the
zip
file
has
been
downloaded,
we
extract
it.
That's
what
I
did
here.
B
I
didn't
want
you
to
have
to
watch
me
extracting
a
huge,
zip
file,
so
I
expected
it
in
advance
for
you,
you
can
click
on
it.
You
can
go
to
the
master
folder
in
the
sample
folder,
and
then
you
just
need
to
look
for
the
sample
that
we
used.
The
sample
name
was
js.bundling
libraries,
so
we
can
actually
open
that
okay.
So
once
in
the
folder,
I
can
just
right
click
on
the
folder
and
say
open
with
code
it'll
open
it
in
visual
studio
code.
You
can
use
your
own
favorite
code
editor.
B
A
Thanks
hugo
now
that
we've
decided,
which
web
part
to
use
and
downloaded
it,
I've
gone
ahead
and
opened
it
here
in
visual
studio
code.
So
the
first
thing
we'd
like
to
do
is
install
all
the
npm
node
modules
required
to
run
this
solution.
We
can
use
the
built-in
terminal
within
visual
studio
code
by
selecting
control
tilde.
Now
this
is
the
key.
That's
right!
Next
to
the
one
character
on
your
keyboard,
using
the
terminal,
that's
been
launched,
we'll
go
ahead
and
perform
our
npm.
A
Install
with
the
npm
install
having
been
completed,
we'll
go
ahead
and
clear
the
screen
and
we'll
perform
a
gulp
bundle
to
see.
If
our
solution
will
build
now
immediately
we're
running
into
an
error,
we
can
see
that
it's
telling
us
that
we're
currently
using
node
10.22,
which
is
what's
required
for
the
newest
version
of
the
sharepoint
framework
1.11,
but
this
particular
example
is
looking
for
something
greater
than
8.9.4
but
less
than
version
9
of
node.
And
if
we
take
a
peek
into
the
package.json
file
we
can
see.
A
The
reason
is
because
this
particular
sample
was
built
using
spfx
version
1.7.0,
while
we
have
installed
1.11.0,
so
we're
left
with
the
decision
to
make.
Do
we
downgrade
our
sharepoint
development
components
installed
on
our
machine
to
be
compatible
with
this
solution,
or
do
we
upgrade
this
solution
to
be
compatible
with
our
1.11
components
installed,
as
mentioned
earlier,
our
plan
is
to
use
this
web
part
as
the
basis
for
a
production-worthy
solution
in
our
sharepoint
environment.
A
We
certainly
don't
want
to
use
older
technology,
so
ideally
we'd
like
to
upgrade
this
to
1.11,
but
the
steps
required
to
do
that
manually
might
be
quite
cumbersome.
This
is
a
perfect
example
of
where
the
office
365
project
upgrade
functionality
provides
an
accelerated
path
to
upgrading
this
particular
sharepoint
web
part.
B
A
A
So
depth
equals
zero
dash
g
for
global
and
we'll
see
the
results
of
what's
installed.
For
us.
At
the
global
level
we
can
see,
we've
got
our
sharepoint
generator.
We've
got
the
office
365
most
recent
version,
2.13.0
gulp,
npm
and
yeoman.
Now,
in
this
session,
we're
primarily
going
to
focus
on
the
project
upgrade
functionality
of
the
office
365
cli,
but
I
did
want
to
pause
and
take
a
moment
to
mention
another
feature
that
is
available
within
the
cli
called
spfx.
B
B
A
B
We
can
just
type
sdfx.
spfx
doctor
will
use
the
context
from
where
you
ran
the
tool.
So
if
you
run
spfx
doctor
inside
of
a
sharepoint
framework
solution,
it
will
analyze
the
current
solution
and
analyze
your
environment
if
you
run
it
outside
of
a
sharepoint
framework
solution,
just
in
your
root
folder,
for
example,
it'll
look
at
your
entire
environment
and
will
make
recommendations
about
your
environment.
B
A
We
can
see
it
could
have
told
us
from
the
beginning
that
we
had
an
incompatible
version
of
node
installed
for
this
particular
solution,
which
is
no
doubt
a
handy
tool
and
could
have
saved
us
from
experiencing
the
errors
we
encountered
when
we
originally
tried
to
bundle
this
solution.
So
now
that
we
know
we
need
to
upgrade
the
solution
to
be
compatible
with
the
sharepoint
framework,
1.11
components
installed
on
our
machine.
Let's
begin
by
reviewing
the
documentation
for
the
office
365
cli
project
upgrade
command
and
to
cover
that
documentation.
B
Thank
you
all
right
so
to
run
the
spfx
project
upgrade
the
options
are
very
simple,
so
one
of
the
things
that
you
can
do
is
you
can
specify
which
version
you
want
to
run
the
upgrade
for
by
default.
It'll
automatically
assume
that
you're
trying
to
run
to
the
latest
version
of
the
sharepoint
framework.
B
B
A
Thanks
hugo,
let's
jump
back
to
the
demo
now
that
we're
back
in
visual
studio
code,
we're
going
to
demonstrate
how
to
use
the
project
upgrade
command
using
two
of
the
output
methods
we
highlighted
in
the
documentation.
The
first
output
method
will
be
to
generate
the
upgrade
report
in
markdown
format.
A
The
second
method
will
be
using
a
visual
studio
code
extension
named
codetour,
which
will
walk
us
through
each
of
the
steps
required
to
upgrade
one
by
one.
Let's
begin
with
the
first
method
of
generating
the
upgrade
report
in
markdown
format,
the
project
upgrade
command
is
very
similar
to
how
we
instantiated
the
spfx
doctor
command.
I'm
going
to
go
ahead
and
paste
in
the
command
that
we'll
need
to
identify
not
only
the
format
of
our
report,
but
also
the
report
name
we'd
like
it
to
be
called.
A
Let's
take
a
quick
moment
and
look
at
exactly
what
we're
requesting
we
instantiate
the
cli
by
saying
office
365,
and
then
we
use
the
project
upgrade
command
by
saying
spfx
project
upgrade.
We
then
provide
the
parameter
arguments
we
would
like
to
use.
In
this
case,
we're
saying
the
output
format
will
be
marked
down
now.
A
This
could
be
json
text
or
tour
and
we'd
like
our
file
name
to
be
called
spfx
upgrade
report.md
now
before
I
hit
enter
to
execute
this
command,
keep
an
eye
over
here
on
the
explorer
window,
we're
going
to
see
that
our
markdown
file
is
generated
when
I
select
enter
now.
We
see
that
immediately.
Our
spfx
upgrade
report
has
been
generated
and
available
for
us
to
take
a
look
at
now.
At
this
point,
it's
important
to
note
that
the
report
has
not
actually
made
any
changes.
A
Now
what
we
find
in
this
report
is
all
the
steps
necessary
for
us
to
ensure
that
not
only
our
files
within
the
solution
have
been
upgraded,
but
the
npm
packages
themselves
have
been
upgraded
and
installed
as
well,
but
it's
quite
long
it
might
actually
be
a
little
hard
to
keep
track
of
where
we
are
at
in
the
process
of
performing
these
upgrades.
Well,
that's
where
our
second
method
of
utilizing
the
project
upgrade
command
comes
in
using
the
code
tour
extension
to
begin
the
demo
of
the
project
upgrade
command
using
the
code
tour.
A
Let's
go
ahead
and
start
by
closing
our
reports
and
click
on
the
extensions
button
within
visual
studio
code.
Now
you
can
see
that
I
already
have
code
tour
installed,
you
may
or
may
not.
If
you
don't
we'll,
go
ahead
and
want
to
install
it,
so
you
can
just
do
a
search
on
code
tour.
All
one
word
and
we'll
find
the
code
tour
extension
available
right
here.
As
a
short
summary,
the
code
tour
extension
provides
a
guided
walkthrough
of
the
upgrade
commands
that
we
had
already
found
in
our
report.
A
As
you'll
see,
it
makes
it
easier
to
go
step
by
step
through
each
of
those
commands,
ensuring
that
you
don't
lose
your
place
once
you've
installed
the
code,
tour
extension
and
you
go
back
to
your
solution.
You'll
find
a
section
at
the
bottom
of
the
explorer
called
code
tour,
and
this
allows
you
to
record
a
walkthrough
if
you
wanted
to
create
one
from
scratch.
But
this
is
the
functionality
that
we'll
take
advantage
of
within
the
cli,
using
the
project
upgrade
command
to
utilize.
The
codetor
method
of
the
project
upgrade
command.
A
It's
not
much
different
than
how
we
did
when
requesting
to
use
the
markdown
report
to
do
that.
We'll
begin
by
closing
the
extension
description,
page
and
I'll
go
ahead
and
leave
the
code
tour
section
here
open
on
our
explorer,
because
once
we
do
generate
the
output
files
for
our
code
tour
using
the
project
upgrade
command,
we'll
see.
All
of
those
walk-through
steps
are
automatically
added
there
for
us
in
that
section.
So
let's
open
the
terminal
window
and
I'll
paste
in
the
command
to
generate
the
project
upgrade
report
using
the
code
tour
extension.
A
As
you
can
see,
it's
not
really
any
different,
with
the
exception
of
calling
out
a
different
output
method,
whereas
originally
we
said
we
wanted
to
be
a
markdown
file.
We're
now
saying
we
want
it
to
be
a
tour
file.
Now,
just
like
we
did
when
we
output,
the
markdown
upgrade
report,
keep
an
eye
on
the
explorer
window
over
here.
A
When
I
select
the
enter
button,
we'll
notice
that
a
tours
folder
has
been
generated
and
an
upgrade.tour
file
has
been
created
and
we
can
also
see
down
in
the
code
tour
section
of
our
explorer
window,
the
project
upgrade
code.
Tour
has
been
generated,
ready
for
us
to
start
the
tour.
So
now
we
can
go
ahead
and
kick
off
that
tour
by
selecting
that
start
tour
button
and
we'll
see
what
happens.
A
Now,
what
is
also
available
to
us
are
each
of
the
steps
required
to
be
taken
down
here
in
the
code
tour
section
we
can
actually
scroll
through
and
see
what
each
step
is
for
us
to
accomplish.
Additionally,
what's
cool
is
the
code?
Tour
extension
opens
up
the
file
for
where
it's
requesting.
We
make
the
change
in
the
particular
step
that
we're
at
so
for
step.
One.
It's
telling
us
that
we
need
to
upgrade
the
sp
core
library
from
version
1.7.0
to
1.11.0
plus.
A
What's
even
better
is
the
command
is
clickable,
so
I
can
actually
click
on
this
command
and
we'll
see
that
the
terminal
is
executing
that
command
and
installing
version
1.11
of
that
sp
core
library.
For
us
now
that
we've
completed
step
one
of
our
code
tour
it's
time
to
move
to
the
second
step,
to
do
that,
we
simply
click
on
the
little
arrow
button
which
represents
next
or
we
could
use
control
right
arrow
when
we
click
on
that
it
takes
us
to
the
next
item
at,
for
example,
sb
lowdash
subset.
A
That
needs
to
be
upgraded
and
again
gives
us
the
command
that
we
can
click
on
to
accomplish
that
now.
This
is
a
super
cool
and
useful
feature
available
to
us
as
part
of
the
code
tour
experience.
It
is
important
to
note,
though,
that
not
every
step
will
have
a
clickable
execution
path
for
us
to
make
the
changes.
A
Some
steps
may
require
us
to
make
manual
changes
to
the
files.
For
example,
let
me
go
ahead
and
expand
the
window
here.
If
we
go
down
to
required
step
number
18,
we
can
see
that
we
need
to
make
a
change
to
our
tsconfig.json
file,
extends
property
by
adding
this
value.
This
is
not
something
that
codetor
will
do
for
us
by
clicking
on
some
string
or
link.
This
will
actually
have
to
be
done
for
us
manually,
we'll
want
to
copy
this
value
and
paste
it
into
our
file.
A
Now
we
can
collapse
this
code
toward
flyout
at
any
time
by
just
clicking
on
the
little
diamond
button
right
here.
Next
to
the
code
tour
icon,
we
can
bring
it
back
by
clicking
on
it
again
now,
since
there
are
28
total
steps
to
upgrading
this
project
to
version
1.11
of
spfx,
we
don't
want
to
make
you
sit
and
watch
us
execute
every
single
step.
A
A
That's
when
we
received
our
error,
let's
try
the
exact
same
thing
again
and
see
our
experience
and
yay.
This
time
we've
got
success
plus
we've
been
able
to
upgrade
our
solution
to
the
newest
version
of
the
sharepoint
framework
version
1.11,
and
we
are
now
ready
to
utilize
this
web
part
as
a
basis
for
our
next
level
of
development.
B
A
And
what
we've
got
available
for
you
next
is
useful
links,
so
we
covered
a
whole
host
of
information
a
lot
to
consume.
We
hope
you
enjoyed
it,
but
really
it
bubbles
down
to
taking
advantage
of
these
three
links.
The
first
is
the
aka.ms
shortcut
to
finding
some
web
part
samples
that
you
may
want
to
learn
more
about
and
utilize
all
brought
to
you
by
pnp
all
completely
free
of
charge.
A
A
We
hope
you
enjoyed
this
session
today
and
we
look
forward
to
getting
your
feedback.
So
please
use
the
aka.mspnpvc
feedback
short
url
or
you
could
take
a
picture
of
the
qr
code
here,
but
we
would
love
to
hear
your
feedback
on
what
you
thought
of
today's
session
and
in
the
end.
Thank
you.
We
both
appreciate
your
time,
hugo
any
amazing
words
to
to
end
it
with.