►
Description
In this 17-minute developer focused demo, we may appreciate the increased number of SPFx integrations in Teams Toolkit on Visual Studio Code. Vesa Juvonen focuses here on the ease of building a tab project and then adding an additional tab to the project. See how Teams Toolkit encapsulates the SPFx solution to its own sub-folder. All development, testing and debugging is done live in TypeScript and use F5 for hot reloads. Azure integrations, code samples, etc. are just around the corner. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 22, 2022.
Demo Presenter
• Vesa Juvonen (Microsoft) | @vesajuvonen
Supporting materials
• Documentation - Teams Toolkit Overview | https://learn.microsoft.com/microsoftteams/platform/toolkit/teams-toolkit-fundamentals?pivots=visual-studio-code
• Documentation - Install Teams Toolkit | https://learn.microsoft.com/microsoftteams/platform/toolkit/install-teams-toolkit?tabs=vscode&pivots=visual-studio-code
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
A
Framework
which
is
now
you
can
actually
build
multi-tab
Solutions
using
the
Microsoft
teams
toolkit
so
I'm
going
to
do
a
live
demo
on
that
as
well.
A
bit
of
an
update
on
the
SharePoint
framework
as
well,
which,
by
the
way,
we
kind
of
an
intentionally
started
using
more
and
more
spfx,
because
it's
not
just
about
sharepoints
and
we're
going
to
touch
that
again
today
as
well.
But
SharePoint
framework
is
the
tooling
and
it's
DSS
tooling,
to
build
your
Enterprise
solutions
for
Microsoft
365.
It
has
the
automatic
single
sign-on.
A
You
don't
need
to
worry
about
anything
you're
just
magically
authenticated.
It
has
the
automatic
hosting
super
super
important
thing,
and
the
reason
why
automatic
hosting
is
super
valuable
is
that
the
code
which
is
running
as
a
SharePoint
framework
solution
is
running
at
the
customer
tenant.
So
there
will
not
be
any
compliance.
A
policy
security
concerns
from
a
customer
side
because
everything
is
automatically
hosted
inside
of
the
customer
antenna,
so
they
don't
need
to
Grant
any
applications
externally
getting
access
to
their
application.
A
The
code
itself,
the
typescript
JavaScript,
which
is
running
and
accessing
customer
information
running
inside
of
the
land
as
well.
So
really
good
security
boundary
as
well,
consistent,
Dev
experience
and,
of
course,
using
industry
standard
tooling.
So
no
proprietary,
apis
or
proprietary
programming
languages,
which
you
are
using
now
as
part
of
the
the
SharePoint
framework
1.16
release,
which
went
GA
last
week,
we
mentioned
that
on
the
latest
newsline
we
actually
extended
the
scope
of
SharePoint
framework
even
more
so
it
is
really
flexible
model
and
the
naming
is
highly
confusing
and
you
are
using
typescript.
A
You
can
choose
to
use
react,
angular
view,
whatever
clients
are
developing
tooling
and
then
typically
use
the
Microsoft
craft
to
get
access
on
the
apis
and
the
information
and
your
application
can
be
running
in
SharePoint
in
Microsoft,
Viva,
Microsoft
teams,
or
now
also
in
Outlook
or
in
the
Microsoft
365
app,
which
is
basically
the
office.com.
But
that's
the
naming
renaming
happening
within
the
applications
which
is
a
bit
of
a
confusing.
But
it's
it's
outlook
on
office.
A
For
those
who
are
familiar
with
those
terms
and
again,
there
is
for
all
of
these
things,
these
applications
and
all
of
the
different
shapes.
There's
the
other
automatic
single
sign-on,
there's
automatic
code
hosting
available
and
you
are
building
with
three
react
or
with
typescript.
More
importantly,
not
with
react,
you
can
use
react,
you
can
use
angular,
you
can
use
other
things
as
well.
We
we
in
Microsoft
we
use
SharePoint
framework
to
build
a
lot
of
the
experiences
as
well
for
Microsoft
Viva
for
SharePoint
and
so
on.
A
So
you
are
using
exactly
the
same
tool
stack.
What
the
engineering
is
using
as
well,
so
we're
not
just
building
giving
you
an
alternative
ways
of
doing
extensibility
Microsoft
phrases
to
five
Nano.
You
are
using
exactly
the
same
tool
stack
as
our
engineering
is
using
as
well.
So
it's
a
future
proven
model.
From
that
perspective,
now
I
will
jump
on
Eduardo's
question:
you
can
use
wheelchairs.
You
can
do
your
angular,
you
don't
need
to
use
any
any
framework.
You
can
use
react.
A
We
do
provide
by
default
as
scaffolding
or
a
starting
project
in
react.
We
do
not
provide
that
for
view
or
angular,
but
you
can
absolutely
associate
angular
on
view
or
whatever
is
your
chosen
JavaScript
framework
for
SharePoint
framework
to
be
used?
It's
really
up
to
you
and
we
have
even
tooling
and
tutorials
in
place
how
to
get
started
with
that
now.
The
team's
toolkit
is
one
of
the
tooling
to
be
available
to
build
experiences
with
SharePoint
framework
and,
of
course,
as
we're
using
teams
toolkit,
as
the
name
implies.
A
You
are
then
targeting
Microsoft
teams.
Now,
of
course,
we're
looking
into
doing
more
alignments
in
here
in
the
future,
so
making
sure
that
it's
it's
not
only
for
Microsoft
teams.
The
teams
toolkit
will
be
probably
Extended
to
be
more
for
other
applications
as
well,
because
in
Microsoft
365,
it's
not
just
about
teams.
It's
all.
It's
about
the
other
applications
as
well.
Themes
is,
of
course,
super
important,
but
we
have
other
shapes
and
other
other
extensibility
options
as
well.
A
Now
the
teams
toolkit
itself
simplifies
the
Microsoft
teams,
developing
the
spfx,
we're
going
to
do
a
live
demo
on
that
one
in
a
second
spfx
enables
the
automatic
hosting
again
but
fifth
time,
eventually
that
inside
of
the
customer
tenant,
which
is
the
cool
thing
here
behind
the
scenes,
the
Microsoft
teams
toolkit
is
using
the
SharePoint
framework
German
generator.
So,
basically,
as
we
are
shipping
a
new
version
of
SharePoint
framework,
it
is
actually
using
the
command
line.
Integrations
and
automation,
with
SharePoint
framework
engineering
theme,
to
make
sure
that
everything
is
line.
A
There's
a
really
easy,
F5
debugging
experience
and
directly
in
the
themes
toolkit,
which
makes
it
super
easy
to
do
this
implementations
and
starting
with
teams
toolkit
version
for
1.4.
You
can
actually
build
multiple
tabs
with
spfx
Team
Solutions
really
really
easily,
and
we're
going
to
see
that
one
in
practice
as
well
now
we're
doing
a
further
alignment
and
features
and
capability
alignment
with
across
the
team.
A
So
Microsoft
teams
toolkit
vs
code
team
and
the
IDE
team,
and
then
the
SharePoint
framework
team
is
doing
more
and
more
integration
and
discussions
around
planning
together
and
to
make
this
even
better
in
the
future.
Now,
let's,
let's
have
a
look
on
how
that
looks
in
practice.
So
let's
go
to
the
demo
section
of
things
and
let
me
start
by
having
a
clean
solution
and
so
what
I'm
done
here
in
my
visual
studio
code,
I
included
quite
a
few
extensions.
A
But
if
you
look
for
teams
toolkit
or
search
for
themes,
hello,
devika,
we
can
find
the
teams
toolkit
in
here
and,
in
my
case
it's
already
being
installed.
That's
the
easiest
way
to
really,
of
course,
install
that
in
the
vs
code.
Well,
that's
the
only
way
to
install
that
in
a
vs
code
and
to
get
started,
and
we
can
see
that
the
latest
version
is
1.4.21
wherever
I
actually
saw
that
in
the
second
typical
and
in
4.1
we
included
this
capability.
A
What
we're
going
to
show
today
now,
when
I
start
using
the
teams
toolkit
I'm
going
to
choose
a
create
a
new
teams.
Application
I
can
also
start
from
samples
which
is
really
cool.
I
can
go
to
documentation
on
how
the
guides
as
well.
Let
me
start
by
teams
toolkit
I'm,
going
to
create
a
new
teams
application,
and
this
is
a
bit
of
a
confusing
thing
from
a
terminology
perspective
which
we're
looking
into
getting
adjusted.
A
We
as
we
start
building
teams
tabs
using
themes
toolkit
with
spfx
you're,
going
to
choose
the
spfx
tab
option
in
here
now
it
says
teams
aware
web
pages,
but
they're
not
actually
web
pages.
They
are
typescript
components
and
so
we're
looking
into
adjusting
that
terminology
with
the
team
quite
soon
and
because
that's
quite
misleading,
it's
not
a
web
page,
and
even
though,
if
if
it
would
be
a
web
page,
there
should
be
a
space
between
that
one,
because
web
page
together
is
not
English,
it
might
be
English,
but
it's
not
English
anyway.
A
So
let
me
choose
that
option
and
then
it's
going
to
ask
me
the
what
is
going
to
be
the
name
and
and
what
is
the
the
Baseline
structure,
what
we're
going
to
use
as
a
starting
point
of
my
Solutions
and
we
do
provide
three
of
them,
which
is
react,
minimal
and
Nano.
Now
this
comes
back
on
the
questions.
What
Eduardo
had
can
we
use
angular?
Can
we
use
some
other
stooling
and
answer
is
yes?
A
What
we
would
be
doing
is
that
you
choose
none,
and
then
you
associate
your
one
that
JavaScript
client
framework
to
be
included
in
that
project.
So
the
react
here
is
just
us,
giving
you
Opa
that
structure.
Where
we
give
you
a
starting
point
of
react,
you
could
just
as
well
actually
do
none
and
then
associate
react
to
be
used
there
with
with
the
different
options.
So
there
are
multiple
options.
We
do
not
restrict
what
what
is
your
chosen
JavaScript
client-side
framework
now
the
react
itself
is
here
an
option
because
we
use
react
internally.
A
So
most
of
the
implementations
of
SharePoint
framework
which
engineering
is
doing
are
built
using
react.
So
that's
why
the
react
is
in
here
and
we
provide
react-based
controls
and
all
of
that
stuff.
Now
let
me
choose
react.
Let's
call
this
react
hello,
world
and
it's
going
to
then
ask
me
where
I'm
going
to
save
the
the
solution.
It
doesn't
really
matter.
I'm
going
to
just
say,
react
hello,
world
now
of
22,
and
it's
going
to
create
me.
A
The
structure
in
the
teams
toolkit
now,
in
my
case
I've
actually
done
this
in
a
separate
project,
because
when
we
start
debugging
and
when
it
starts
creating
the
solutions,
it
actually
runs
the
install
command
afterwards.
So
I'm
gonna
save
some
time
because
to
install
npm
install,
will
take
a
while
I'm
gonna
close
that
one
and
I'm
going
to
close
that
one
and
then
I'm
gonna
jump
to
an
existing
solution
where
the
npm
install
has
been
already
executed
and-
and
basically
this
is
the
outcome.
What
you're
getting
so.
A
Let's
have
a
quick
look
on
in
here
and
then
add
the
additional
tab
in
place.
So
what
we
have
here
is
a
teams
toolkit
in
place
and,
as
we
are
using
the
themes
toolkit,
we
get
a
lot
of
lot
of
additional
capabilities
like,
for
example,
we
can
associate
that
directly
to
a
tenant
for
a
really
easy
F5.
Debugging
I'll
show
that
one
in
practice
we
get
also
references
to
start
a
new
application
view
samples
and
do
an
F5
provision
to
the
cloud.
A
So
in
the
solution
structure,
side,
if
you
are
familiar
with
SharePoint
framework,
this
team's
toolkit
Works
in
a
way
that
it
actually
encapsulates
the
SharePoint
framework
solution
to
its
own
sub
folder.
So
it
has
its
own
structures
and
instructions
and
configurations
on
how
to
do
debugging.
Everything
else
outside
of
the
SharePoint
framework
solution
behind
of
the
scenes
is
still
using
human
generator
to
automate
creation
of
these
assets
so
like
in
this
case.
A
A
One
of
the
really
cool
things
here
is
that
we're
supporting
the
teams
toolkit
is
supporting
two
different
options,
so
it's
actually
boarding
and
Dev
and
local
options
in
here,
so
you
can
actually
differentiate
or
you're,
deploying
a
developer
site
or
a
local
option
or
other
options,
so
you
can
differentiate
in
the
settings
of
the
Manifest
already
the
text,
so
you
clearly
know
that.
Okay,
this
is
the
debugging
version.
This
is
the
developer
version,
this
production
version,
which
is
really
record
now,
in
my
case,
a
simple
scenario.
We
kind
of
go
to.
A
Let's
go
actually
in
here,
I'm,
going
to
do
an
F5
I
already
signed
in
to
my
developer
tenant
and
which
is
really
really
cool.
I
can
click
an
F5
here.
I,
don't
have
to
do
anything
else
than
that
and
it
actually
Arts
deployment
and
packaging,
and
then
it
fires
the
browser
in
the
right
status
and
underwrite
options
so
that
I
can
sign
in
to
my
developer
tenant
so
making
it
super
super
easy
again
to
start
implementing
these
Solutions.
A
Well,
it's
going
to
compile
it's
going
to
run
the
web
web
stack
all
of
that
stuff.
So
that's
going
to
take
a
while-
and
here
we
go
now-
the
logo
host
is
running
and
then
we're
firing
still
settings
and
commands,
and
configuring
webpack
technically.
The
webpack
has
already
been
executed
within
the
solution,
so
we
could
have
skip
done,
but
it's
okay
in
this
case,
we're
then
signing
in
to
the
tenant.
We
can
see
that
I'm
in
my
developer,
tenant
we're
already
signed
in
and
in
here
it's
going
to
identifier.
A
My
installation
of
my
solution
to
the
developer
tunnel
and
I
can
add
that
solution
to
be
as
available
in
the
developer
development
and
now
I'm
running
the
solution,
as
a
teams
toolkit
November
22
demo,
with
the
one
tab
in
the
page
and,
of
course
the
SPF
ex
solution
behind
the
scenes
is
showing
the
basic
functionality.
So
it's
basically
pointing
out
that
you
are
debugging
scripts.
A
We
can
now
see
behind
the
scenes
that
we
are
in
the
context
of
the
visual
studio
code,
so
we
can
actually
do
debugging
directly
in
Visual
Studio
code
and
spfx
solution
is
detecting
that
we're
in
the
team's
app.
So
it
shows
that
we're
running
in
teams,
the
web
part
properties,
business,
details
and
all
of
that-
and
we
have
a
one
tab
available.
The
about
this,
always
the
one
which
has
the
solution
details
now.
The
new
thing
in
4.1
is
the
fact
that
if
I
close
this
one,
let's
shut
down
the
debugging
I
can
do
here.
A
I
can
click
add
features
and,
as
we
are
in
a
SharePoint
framework
solution,
I
can
see
the
options
for
SharePoint
framework,
which
is
basically
adding
a
new
spfx
tab
or
then
options
related
on
cicd
workflows.
We
need
to
do
some
documentation
improvements
in
here,
but
in
my
case,
we're
going
to
choose
spfx
tab.
A
Let's
give
it
a
name
like
additional
tabs
just
to
make
sure
that
we
can
easily
find
that
it's
available
and
that
then
scaffolds
that
additional
tab
to
be
available
within
the
project
so
making
sure
that
it's
it's
available
there
we
go
tab
is
available.
We
have
a
message
in
here
and
if
we
go
to
the
solution
structure
extend
the
spfx.
We
can
actually
say
that
we
have
two
Vector
parts
available
which
are
just
these
tabs.
Well,
they
could
be
exposed
as
personal
applications,
even
in
Outlook,
but
that's
a
separate
discussion.
A
That's
not
a
demo
of
today!
So
now.
The
cool
thing
here
is
that
it's
fully
automatic.
So
now,
if
I
do
F5
again,
we
can
do
debugging
in
either
one
of
the
tabs.
So
now,
as
I
do
F5,
everything
is
automatic.
I,
don't
need
to
do
anything
and
it
fires
again.
My
browser
making
it
super
super
easy
in
typescript
to
do
my
development
debugging
testing,
all
of
that
stuff,
and
it
has
the
hot
reload
as
well
in
place.
A
So
of
course
you
don't
need
to
wait
for
the
execution
all
of
this
stuff,
so
we
can
do
modifications
directly
in
the
code
and
it
has
the
hot
reload
in
place
within
things.
The
reason
why
it
now
takes
a
while
is
that
we
did
pause
the
debugging
added
a
whiteboard
and
then
again,
then
we
we
started
to
debugging
again
here
we
go
we're
firing
in
teams
we're
adding
the
solution
and
loading
the
solution,
as
the
solution
has
significant
modifications.
A
A
Let's
load
to
debug
script,
we
can
say
the
first
tab
available
there
and
as
I
clicked
at
the
second
tab.
It
is
available
and
getting
loaded
to
other
components,
and
this
is
the
additional
tab
which
we
just
added
on
the
code
so
making
it
super
super
easy
to
do,
modifications
and
again
the
hot
reload
works
really
really
well
so
I
can
actually
go.
Let's
see
if
we
can
quickly
do
this,
I
can
go
in
here,
not
in
there.
Let
me
go
to
components
additional
tab.
A
Oh
there
we
go.
We
added
that
text
in
place.
So
now
we
can
do
live.
Debugging
live
testing
of
the
code,
the
typescript
code.
We
can
do
modifications,
we
can
adjust
things
in
a
matter
of
seconds.
We
can
see
this
live
on
the
on
the
Microsoft
teams,
making
it
super
super
easy
to
do:
Microsoft
teams,
development
with
teams,
toolkit
and
spfx
cool.