►
From YouTube: Introduction to Microsoft Teams Toolkit v2
Description
In this 15-minute developer-focused demo, Zhenya Savchenko helps developers create and deploy Microsoft Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365 with a “zero-configuration” approach (single-line statements and no side trips to Azure and ADD) to the developer experience. Efficiently configures front-end, back-end, bot at same time. Simplifies creation of proof-of-concepts! Get the toolkit through the Extensions Marketplace in VS Code. This PnP Community demo is taken from the Microsoft Teams community call – June 2021, recorded on June 15, 2021.
Demo Presenter - Zhenya Savchenko (Microsoft)
Supporting materials:
• Dev Tools - Microsoft Teams Toolkit for Visual Studio Code | http://aka.ms/teams-toolkit
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
Where,
hopefully,
it'll
be
clear
for
my
demo,
you
no
longer
have
to
do
some
of
the
same
steps
manually
now,
there's
lots
of
great
ways
to
create
a
teams
app,
of
course,
that
will
continue
to
be
true.
The
ui
teams,
generator
is
one
I'm
sure
there
are
tons
of
other
templates
and
samples
from
the
community
as
well
as
any
of
our
own
samples
and
templates.
A
But
here
focusing
on
teams
toolkit
some
of
the
things
we've
done.
Since
the
previous
version
we
released
last
year
is
we
have
added
essentially
a
big
simplification
to
your
authentication
setup.
We've
done
that
by
kind
of
collecting,
together
the
some
of
the
life
cycle,
stages
of
an
application
into
one
set
of
commands
in
the
tool
chain.
So
you
now
get
access
to
hosting
for
your
custom
tabs
your
bots
and
your
azure
functions.
We've
integrated
azure
functions
into
the
the
default
template.
A
We've
also
helped
with
the
microsoft
graph
integration,
as
well
as
data
sources
like
sql
we've.
We
also
make
it
easy
to
connect
all
of
the
above
with
sharepoint
framework.
If
that's
your
cup
of
tea
there,
there
is
a
set
of
commands
for
deploying
in
kind
of
a
single
single
step.
You
can
deploy
all
of
the
components
of
your
team's
application,
whether
it's
the
function,
the
front
end
or
or
the
bots
publishing,
is
the
same
as
before
you're
able
to
submit
to
the
teams
app
store
straight
from
the
tooling.
A
A
We
have
an
extension
that
you
can
install
into
visual
studio
using
this
extension
marketplace
and
it
supports
the
blazer,
a
blazer
app
template
that
you
can
use
to
build
a
custom
tab.
Lots
more
work
to
do,
and
we've
also
made
it
easier
for
you
to
to
work
with
our
some
of
the
tunneling
shenanigans.
You
have
to
do
when
you're
building
a
team
spot.
A
So
that's
a
quick
overview
I'll
show
you
some
of
these
in
detail
and
show
you
a
demo
at
the
end
of
this
as
well.
So
the
the
big,
hopefully
simplification
to
your
life
when
you're
creating
a
you,
know
a
proof
of
concept
or
you're,
trying
to
demonstrate
an
idea
with
a
teams.
App
is,
we
believe,
getting
the
user's
profile
information
and
the
current
sso
state
shouldn't
be
something
you
have
to
configure
shouldn't
be
something
you
have
to
worry
about.
It
should
just
be
a
single
line
of
code
and
so
you'll
bear
with
me.
A
We've
changed
some
of
the
signatures,
just
a
touch,
but
the
the
real
meat
of
this
functionality
is
exactly
the
same
where
you
yeah
once
creating
once
you've
created
an
app
with
our
template,
everything
is
set
up
for
you
to
receive
the
user
context
with
one
line.
This
works
both
on
the
client
and
the
server
and
I'll
show
you
in
the
demo.
Azure
functions
are
integrated
and
we
we
kind
of
give
it
to
you
as
a
monorepo
format.
Where
your
you
know,
your
tab
is
sitting
right
next
to
your
azure
function.
A
This
allows
you
to
kind
of
share
share
code
if
you
want
to
but
yeah
here's
an
example
of
what
it's
like
to
take
advantage
of
your
single
line:
graph
integration,
for
example,
directly
from
the
azure
function,
microsoft
graph
also
integrated
in
a
similar
fashion,
with
a
single
line
of
code,
you
can
generate
yourself
a
authenticated
graph,
client,
you'll
notice.
Here
we
don't
have
to
pass
in
any
client
ids
or
any
tokens
or
scopes
this
this
uses.
A
Of
course
you
can
modify
the
scopes
you
like,
if
you
you
can
override
those
arguments,
but
the
none
of
the
kind
of
standard
ways
of
configuring.
This
are
required
because
we've
handled
calling
aad
for
you,
we've
handled
the
deployment
after
this,
and
so
the
configuration
is
something
that's
already
built
into
the
template
in
terms
of
deployment.
There's
a
single
line
command
that
you
can
use,
like
I
mentioned
before,
all
the
components
you're
using
in
your
application,
including
potentially
your
sql
server.
A
If
that's
the
data
source,
you
chose
to
integrate
through
the
toolkit,
all
of
those
things
are
provisioned
and
deployed
in
your
azure
subscription.
For
you
automatically,
we
have
our
new
extensibility
model
behind
a
lot
of
these
behind
all
of
the
commands
in
the
toolkit
and
in
the
cli,
so
some
of
the
ones
that
you'll
you'll
notice
are
available.
You
know
you
can
scaffolding
the
application
or
building
the
application
running
it
or
deploying
it.
All
of
these
are
life
cycle
events
in
our
extensibility
system
and
you're
able
to
package.
A
In
fact,
this
is
how
a
lot
of
the
integrations
for
the
various
resources
we
support
have
been
built
now
so
you're
able
to
package
functionality.
That
knows
how
to
listen
to
these
lifecycle
events,
and
that
will
enable
folks
to
kind
of
integrate
the
rest
of
their
line
of
business
setup
that
you
know
if
they
have
an
enterprise
that
has
custom
ways
of
doing
things.
This
is
this
is
your
way
to
connect.
Now,
I
think,
fancy
animations.
A
We
have
this
new
blazer
template,
which
has
all
of
the
same
kind
of
authentication,
goodness
that
we
give
you
on
the
on
the
javascript
side.
It's
currently
a
little
bit
lighter
featured
than
the
the
web
stack,
but
we're
hoping
to
invest
in
this
and
bring
it
to
parity
as
well
lots
of
things
to
do,
but
yep
you're
able
to
to
get
your
user
context
and
access
to
microsoft
graph
in
one
line
of
code,
so
I'll
I'll
move
on
to
the
demo
now.
A
But
you
can
check
out
the
teams
toolkit
at
this
url.
Ms
teams
dash
toolkit,
and
that's
kind
of
this-
is
how
you
start
accessing
the
the
toolkit,
basically
as
you're,
used
to
through
the
extensions
marketplace
in
in
vs
code,
you'll
notice
in
preview,
but
once
you
get,
this
installed,
you'll
get
a
little
icon
in
the
activity
bar
here
under
teams
toolkit.
A
Here
you
have
access
to
a
whole
bunch
of
things
that
are
useful
for
teams
development,
including,
for
example,
a
link
to
your
team's
developer
portal,
where
you
can
manage
apps
that
you've
deployed,
of
course,
a
bunch
of
project
commands
for
creating
a
project.
You
know
adding
different
capabilities
and
resources.
A
Looking
at
your
manifest,
you
know
getting
your
app
built
and
published
to
to
do
to
do
the
f5.
Of
course,
the
big
the
big
features
here
are
also
that
you
can
instantly
f5
the
same
way
you're
used
to
any
application.
So
I'll
show
you
that
in
a
second
here
let
me
show
you
what
it's
like,
how
quick
it
is
to
create
a
project.
When
I
make
a
new
project,
I
basically
follow
a
few
prompts
just
like
you're
used
to
with
any
template
generator.
A
So
you
could.
You
could
start
with
one
of
our
new
samples,
I'll
just
start
a
blank
app
here
it.
You
know
we're
planning
to
add
more
of
the
teams
capabilities.
The
in
you
know
as
time
goes
on,
but
in
preview
we
have
our
core
tab.
Bot
messaging
extension
choices.
You
can.
You
can
pick
any
of
these
to
put
together
into
your
application.
A
So
just
for
simplicity,
I'll
I'll
show
you
this
first
one
for
now
you
can
choose
how
you
plan
to
host.
In
this
case,
we
have
options
we
can
host
with
azure
or
sharepoint
framework.
I'll
pick
azure,
you
can
throw
in
a
sql
database
will
help.
You
run
a
local
database
when
you
run
locally
in
f5
and
will
help
you
of
course,
provision
that
database
in
azure
for
now
I'll,
just
throw
in
an
azure
function
app
because
I
want
some
server-side
code
pick
my
programming
language
of
choice.
Of
course,
typescript
is
mine.
A
A
A
Now
I
won't
make
you
wait
through
the
initial
npm
install,
because
that
does
take
a
couple
minutes
and
we
do
a
whole
bunch
of
things
in
the
background
to
get
you
started,
including
calling
into
azure
ad
making
sure
you
have
a
app
id
registrations
with
the
appropriate
sso
setups,
so
lots
of
steps
to
do
I'll
just
skip
to
kind
of
an
application.
I've
already
got
running,
hopefully,
and
if
in
case
the
demo
gods
will
grace
me
today,
so
I've
created
this
app
just
this
morning.
A
We
started
up
your
backend
and
front-end
services
and
attached
to
a
number
of
them
for
debugging
and
I
believe
the
team's
client
disappeared
on
me
I'll,
try,
reloading
and
see
if
that
works,
but
the
idea
is
once
you've
started
your
app.
We
start
up
this
browser
and
once
you
log
in
you
are
able
to
see
your
see
your
app
and
debug
it,
I
might
just
give
it
another.
A
A
A
So
microsoft
teams
comes
up
with
my
prompt
to
install
this
application
since
to
to
the
to
the
tenant.
I'm
in
this
is
a
new
application,
I
would
say
add
to
get
it
installed.
You'll
see
here
that
it
knows
it's
going
to
give
me
a
tab,
a
bot
and
a
personal
app,
and
once
I
do
that
it
pops
me
into
the
app.
A
As
you
can
see.
I
have
those
features
available
here.
So
the
you
know,
looking
at
the
tab,
for
example,
this
sample
demonstrates
awareness
of
your
sso
token,
obviously,
as
well
as
microsoft
graph,
we
show
you,
you
know
the
single
line,
auth
flow.
Of
course.
This
is
all
you
know,
reloading
in
real
time.
So
if
I
want
to
go
in
here
and
and
make
some
changes.
A
You
know-
and
I
and
I
save
that-
and
I
go
back
to
this-
it's
pretty
quick
to
rebuild
we're
using
the
create
react,
app
template,
so
the
incremental
build
is
fairly
quick,
we've
also
attached.
So
if
you,
if
you,
if
you
are
interested,
you
can
debug
both
the
front
end
and
the
back
end
just
by
setting
a
breakpoint
here
in
vs
code,
I'll
reload,
this
page
inside
here
and
hopefully
hit
that
breakpoint,
and
here
it
is
same
same
debugger
as
you're
used
to
you,
have
all
your
locals
in
state
I'll.
A
A
I
believe
I
can
say
hello
or
info.
I
think
it
tells
me
yup.
This
is
this
is
just
a
very
basic
intro.
It
wants
me
to
say,
and
it
returns,
you
know
the
adaptive
card
and
it-
and
you
can,
you
can
say,
give
me
my
profile
and
we've
set
everything
up
for
the
notorious
bot
sso
flow
for
you.
So
you'll
hear
you'll
see
here
that
that
is
currently
happening.
A
A
So
we're
we're
getting
close
to
time
here.
So
I'll
leave
you
with
kind
of
a
call
to
go.
Try
the
toolkit.
Let
us
know
on
stack
overflow,
any
questions.
You
have
any
trouble.
You
have
running
file
issues
on
github
at
this
url
I've,
given
you
here,
aka.mslash
teams
toolkit
should
take
you
to
the
extension
marketplace
where
the
github
repo
should
be
easy
to
find
folks.
Thank
you.
So
much
and
I'll
turn
it
back
to
you.
Visa.