►
Description
In this 21-minute developer focused demo, John Miller reviews Teams apps, manifests, hosting and cross platform visibility. New v5 automation features for composable automation, templates, CLI/IDE extensions. Install the teamsfx CLI tool from npm, create a project (notification bot), walk through default project structure in scaffold, app package, environment variables, hosting files, teams app update, F5 debug, instructions in yml files, new tunneling task, automated creation of needed platform resources.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on April 18, 2023.
Demo Presenter
• John Miller (Microsoft) | @jmillerdev
Supporting materials
• Toolkit - Microsoft Teams Toolkit | https://github.com/officedev/teamsfx
• Feedback – mail to: ttkfeedback@microsoft.com
• Schedule a chat - https://aka.ms/ttk-chat
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
About
developing
apps
for
teams
using
the
team's
toolkit,
so
we
had
a
little
bit
from
Gary
on
what
the
latest
kind
of
event
we've
been
running
with
that.
So
that's
really
cool
feedback
to
see
and
just
want
to
give
a
little
bit
of
an
introduction
to
creating
apps
in
case
you're
new
or
you
haven't
really
looked
at
what
it
means
to
build
apps
for
teams.
Yet
let
me
just
go
over
that
real
fast.
B
So
first
thing
I
think
is
important.
Is
an
app
on
teams
is
really
just
a
Json
file
and
we
refer
to
that
as
the
app
manifest.
So
you
know
this
confused
me
a
little
bit
when
I
first
got
started
and
I
came
from
a
mobile
development
background
and
I
thought
of
app
meant
a
very
specific
thing,
with
IPA
files
and
apks
Etc,
but
and
teams
and
Microsoft
365
app,
isn't
really
that
it's
really
this
Json
file
that
kind
of
defines
on
how
you
want
to
extend.
B
So
that's
the
first
thing
and
an
app
is
how
you
customize
or
extend
functionality
in
teams.
So
if
you
want
to
do
something
unique
or
custom
in
there,
then
an
app
is
what
you'll
need
to
create
and
the
Manifest
is
how
you
define
exactly
where
and
what
you're
customizing
you
host
a
web
content.
So
all
of
these
things
are
hosted
experiences
and
it's
up
to
you
on
where
you
want
to
do
that,
and
some
of
the
extensibility
points
work
across
Outlook
and
the
Microsoft
365
app
too.
B
So
you
can
build
with
the
teams
app
with
the
teams
manifest,
but
you
can
also
run
some
of
these
things
across
multiple
hubs.
So
what
I'm
going
to
talk
about?
Is
teams
toolkit?
This
is
really
our
Dev
tools
for
how
you
can
get
started
and
how
you
can
build
out
these
apps
and
there's
a
couple
things
that
that
includes.
B
It
includes
project
templates,
hosting
templates
for
Azure
and
CI
CD
templates
and
a
bunch
of
templates
to
help
you
get
started
and
make
kind
of
these
decisions
on
getting
things
set
up
a
little
simpler
and
it
also
includes
some
new
features
in
version
5,
which
I'll
show
you
which
are
kind
of
a
way
to
compose
the
automation,
that's
needed,
and
we
give
it
this
to
you
as
a
CLI
tool
and
also
as
ID
extensions,
so
vs
code
extension
and
visual
studio,
2022
extension.
All
right.
B
Let
me
let
me
just
go
right
into
show
you
how
to
do
this
I'm
going
to
bring
up
the
chat
on
the
other
side
of
my
screen
too.
If
you
have
a
question
or
something
or
something's
confusing,
feel
free
to
drop
in
the
chat
and
I'll
try
to
check
it
as
progress
bars
are
spinning
Etc,
so
I'm
gonna
try
to
go
through
it
live
with
you,
so
you'll
have
to
bear
with
me,
as
we
have
to
watch
some
things
spin,
so
I'm
going
to
use
the
CLI
the
team's
effects
CLI
to
get
started.
B
You
can
also
use
the
vs
code.
Extension
I'll
jump
into
that
in
a
minute,
but
I
think
the
CLI
tool
is
pretty
easy
to
get
started
and
we
don't
show
that
as
often
yeah
thanks
walek
CD
continuous
deployment.
So
you
can
install
the
CLI
tool
from
npm
and
actually
did
have
that
up
here.
So
that's
on
here,
so
it's
at
Microsoft
teams,
FX
CLI
and
you
can
just
install
it
here.
I'm
using
I
think
the
Alpha
version
here,
because
that
is
the
latest
to
have
all
of
the
new
functionality
that
I'm
showing.
B
So
if
you
want
to
follow
along
you'll,
have
to
install
either
the
beta
or
the
alpha
I
think
I'm
using
the
latest
Alpha
to
get
started
with
a
new
project.
You
can
just
do
teams
FX
new
and
then
I'll
walk
you
through
a
couple
steps
on
choosing
an
app
type
for
teams,
so
I'm
going
to
create
a
new
app
and
I'm
just
going
to
choose
a
notification.
B
Bot
I
think
that's
the
simplest
to
demonstrate,
and
this
is
a
way
for
you
to
send
a
message
in
teams
based
on
a
couple
different
Triggers
on
how
you
want
to
trigger
that
message.
So
I'm
going
to
choose
that
and
I'll
just
choose
the
default
for
an
HTTP
trigger,
so
I
can
send
a
post
to
my
API
endpoint
and
then
that
will
post
a
chat
message
in
team.
B
So
if
I
want
to
take
some
data
or
let
some
users
know
that
something
has
happened,
maybe
in
my
business
system,
then
this
is
a
way
you
can
just
bring
that
into
teams.
As
a
simple
chat
message:
I'll
choose
that
defaults
are
fine
and
that's
my
just
give
my
app
a
name
here
all
right.
So
that's
that
and
let's
go
into
my
bot
app
and
let's
take
a
look
at
what
that
has
so
I'm
going
to
open
it
in
vs
code
and
just
show
you
the
the
scaffolding.
B
So
this
is
something
that
has
changed
is
a
reason
not
to
use
yeoman.
No,
there's
not
a
reason
not
to
use.
It.
I
think
some
of
the
reasons
that
you
might
choose
differently.
You
could
start
with
the
Yeoman
Genera.
If
you
want
and
then
you
could
also
use
these
tools
in
combination,
so
we're
trying
to
get
flexibility
for
developers
to
kind
of
use
whatever
tools
they
want.
So
if
you
have
a
preference
on
how
you
scaffold
projects,
that's
fine.
B
We
have
different
templates
in
our
tools
and
some
different
opinions
on
what
those
scaffoldings
look
like.
So
it's
up
to
you,
you
can
also
start
with
the
Yeoman
generator,
and
then
you
know
adopt
the
things
you
like
about
the
team's
toolkit.
If
you
want
to
be
able
to
F5
from
vs
code
and
run
them
across
hubs,
et
cetera,
so
I
can
I
can
show
you
some
of
that
in
a
minute.
B
So
this
is
the
kind
of
default
project
structure
that
we
give
across
all
of
our
scaffolds.
The
first
thing
you
have
is
an
app
package
folder.
This
is
where
the
Json
manifest
lives.
So
this
is
this.
Is
your
app
and
there's
a
couple
opinions
that
we
Express
on
here
by
default?
We
give
you
some
placeholder
values
in
here
that
can
be
replaced
by
the
tooling.
B
In
order
to
have
another
environment
like
a
staging
environment
or
production
environment
I
can
use
one
manifest
and
keep
that
in
my
source
control
and
then
the
way
you
can
control
that
is
through
environment
files.
So,
for
example,
this
team's
app
ID
Maps
over
to
this
environment
variable
inside
this
local
file
and
we
haven't
defined
it
yet
because
I
haven't
actually
run
the
tooling.
B
So
you
have
your
app
package,
that's
where
the
team's
kind
of
specific
stuff
is
that's
the
Manifest
file
and
the
two
icons
that
are
required.
So
that's
on
disk.
You
could
check
that
into
Source
control.
You
have
your
environment
files.
We
have
some
defaults
for
hosting
using
bicep
files
for
Azure.
That's
what
the
input
folder
is.
B
You
don't
have
to
use
that
if
you
want
to
host
a
different
way
or
host
a
different
place,
we
give
that
to
you
by
default
and
the
tooling
setup
to
be
able
to
do
that,
and
we
give
you
two
environments
by
default,
a
local,
so
you
can
run
with
the
tooling
and
host
things
locally
and
then
also
the
dev
environment
is
like
the
default
remote
environment.
So
you
could,
and
that
uses
the
Azure
templates
and
then
the
source
folder
is
where
the
actual
implementation
of
whatever
the
template
is.
B
You
chose,
for
example,
I
chose
the
notification
bot
so
in
here
is
an
implementation
of
a
restify
server
to
handle
my
API
and
points
and
post
something
in
chat.
So
here's
my
here's,
my
endpoint
API
notification
and
here's
what
it
does.
It
basically
builds
a
very
simple
adaptive
card
and
sends
it
to
teams
using
rsdk.
B
So
let
me
go
back
here
to
my
CLI.
The
first
thing,
oh,
you
know,
there's
one
thing
I
have
to
do
in
order
for
this
to
run,
we
take
a
look
inside
the
Manifest
file,
there's
these
IDs
and
stuff
that
need
to
be
handled,
but
in
order
for
our
bot
to
run
this
is
what
the
toolkit
does
so
in
new
in
version
5.
Is
these
yaml
files
take
a
look
at
what
these
do?
I'm
just
going
to
minimize
some
of
these,
because
I
think
it's
a
little
easier
to
demonstrate.
B
There's
a
lot
of
prerequisites
that
have
to
happen
on
the
platform
for
you
to
actually
run
a
bot.
So
you
have
to
create
your
teams
app,
so
you
have
to
normally
you
would
go
to
teams
developer
portal
and
create
a
registration
and
then
copy
the
ID
into
a
manifest
file,
or
something
like
that.
You
have
to
create
an
Azure
ID
app
for
the
bot.
B
You'd
have
to
create
something
and
Bot
framework
or
Azure
bot
service
and
then
link
all
those
things
up
and
paste
in
URLs
and
there's
a
lot
of
documentation
on
the
platform
to
do
all
that
manually.
The
toolkit
helps
you
automate
all
these
with.
Basically,
our
own
definition
of
a
task
Runner,
so
you
can
think
of
something
like
Gulp
or
grunt,
or
something
like
that.
B
But
it's
tuned
specifically
for
teams
apps,
and
so
that's
what
this
file
is,
and
it
should
look
a
little
familiar
if
you've
used
things
like
GitHub
actions
or
an
Azure
devops
pipeline
file.
It's
modeled
very
similar
to
that.
So
you
can
see
there's
a
couple
steps
here.
We
have
these
higher
level
instructions
which
are
the
steps
so
I
have
to
Define
provision
and
deploy
so
I've
broken
out
kind
of
the
automation
of
my
process
for
creating
this
app
into
two
different
steps.
B
Provision
and
deploy,
and
the
provision
step
will
create
a
teams
app
for
me
create
the
AED
app
for
my
bot
create
a
bot
framework
registration
and
then
it
will
do
some
stuff
for
the
Manifest
it
will
validate.
It
make
sure
that
the
scheme
is
right,
make
sure
there's
no
other
problems
with
it.
That
would
fail
like
publishing
to
my
tenant,
zip
it
up
and
upload
it
to
teams,
developer
portal
and
that's
with
Team
step
update.
B
Does
so
it
kind
of
automates
all
these
things,
and
then
each
of
these
steps
has
some
parameters
that
you
can
Define.
You
can
customize
if
you
want
to
so
for
creating
my
app
here's,
the
name
of
my
app
and
I've
added
the
suffix
for
the
environment,
so
I
can
easily
see
as
my
app's
running
in
teams,
if
it's
my
local
one
or
my
staging
one
or
my
qa1
or
whatever
I
can
tweak
the
name
of
that,
and
then
it
saves
the
ID
that
it
will
create
in
the
teams
app
ID
environment
variable.
B
B
B
As
you
can
see,
some
of
that
down
here,
as
a
toolkit,
does
some
prerequisite
checks
to
make
sure
your
development
environment
locally
has
like
node.js
installed
and
that
you
have
an
account
set
up.
I've
already
logged
into
the
tools
with
my
Microsoft
365
developer
program
account
so
I
already
have
an
environment
that
I
can
run
this
in.
That
has
the
permissions
and
everything
I
need,
and
it
will
go
through
these
different
steps.
B
So
once
that's
ready,
then
the
other
browser
will
launch
and
something
else
that's
new
in
the
toolkit.
If
you're
unfamiliar
is
we
have
a
new
task
for
handling
tunneling
for
you.
So
that's
defined
in
task.json,
which
is
you
know,
relies
on
vs
code,
and
you
can
see
here.
We
have
our
own
tasks
here.
To
start
a
tunnel
configure
the
ports,
and
you
can
you
could
tweak
this
if
you
wanted
to.
You
can
change
other
parameters
here
and
when
it
creates
that
tunnel,
it's
going
to
save
the
endpoint
to
these
environment
variables.
B
B
Any
preset
up
for
tunneling
via
engrock,
we
used
to
default
to
using
ngrok,
but
we
don't
default
to
that
now
and
now
we're
defaulting
to
like
the
built-in
vs
code.
Kind
of
devil,
Dev
tunnels
feature.
So
that's
what
we're
using
here.
You
could
swap
this
out.
If
you
want
I,
forget
the
exact
syntax,
but
there's
another
type
here.
It
might
just
be
ngrok
I
forget
exactly
what
it
is.
We
have
the
it's
in
the
documentation,
but
you
can
choose
whatever
you
want.
B
The
other
thing
you
could
do
is
you
could
just
run
ngrok
here
with
the
same
ports
and
then
get
the
URL
and
just
paste
it
in
to
those
environment
variables.
So
you
could
go
in
here
and
then
you
could
paste
it
in
your
your
ngrok
url.
Here
you
can
see
it's
the
tooling's
already
put
in
my
Dev
tunnels,
URL,
and
so
you
can
just
update
this
with
your
tunnel
URL.
B
If
you
have
some
other
tool
that
you
want
to
use
and
then,
if
this
is
already
filled
in
the
tooling,
won't
replace
it
it'll
just
use
it.
So
you
can
do
that
same
with
same
with
the
IDS.
If
you
already
have
a
Team,
Zap
ID,
you
just
paste
it
in
here
and
same
with
the
bot
ID.
You
could
just
paste
it
in
here.
You
don't
have
to
you.
Don't
have
to
use
all
these
steps
to
create
things
fresh.
B
If
you
don't
want
to
the
the
nice
thing
is,
if
you
check
these
things
in
and
then
another
developer
wants
to
collaborate
and
they
don't
have
those
environment
variables
filled
in
then
the
tooling
can
help
create
them,
with
the
account
that
they
have
signed
in
so
I
have
the
teams
toolkit
extension
installed
in
vs
code.
You
can
see.
I
already
have
my
identities
signed
in
here.
You
can
do
the
same
thing
with
the
CLI
as
well.
B
There's
a
themes
of
effects,
count
command
and
there's
a
way
for
you
to
sign
in
with
Azure
or
sign
in
with
n365,
and
then
that'll
be
the
identity
that
your
CLI
tool
uses.
So
that
extension
does
the
same
thing
you
can
see.
The
extension
does
a
couple
other
things
in
here.
It
shows
you
the
different
environments.
You
have
configured
so
these
map
to
the
the
names
of
the
files
that
I
have
so
I
have
a
local
and
a
Dev.
B
B
So
what
the
tooling
has
done
is
it
going
through
all
those
steps
created,
all
those
automated
all
the
creation
of
all
the
kind
of
platform
resources
I
needed,
so
the
teams
app
ID
the
bot
framework
registration,
the
the
AED
app
for
the
bot
configured,
all
those
things,
and
now
it's
side,
loading
on
teams
for
me,
so
I
can
just
run
the
app
here.
So
we'll
get
the
similar
experience.
If
you
were
to
just
take
the
zip
file
and
package
it
manually,
you
can
do
that
here
automatically
with
the
toolkit.
B
A
B
B
It
could
set
breakpoints
and
debug
if
we
want
to
if
we're
using
either
vs
or
vs
code.
So
that's
set
up
it's
very
simple.
If
you're
using
vs
code,
you
can
just
scaffold
a
new
project
and
press
F5
and
everything's
kind
of
automated
for
you,
but
what's
nice
in
the
new
version
is
now,
if
you
need
to
understand
exactly
what
all
of
that
is
doing,
you
can
just
look
through
the
instructions
of
these
yaml
files.
So
there's
two
by
default.
B
One
is
for
the
local
environment
there's
some
things
that
we
don't
do
in
this
file
by
default
like
host
everything
in
azure,
whereas
teamzap.yaml
is
where
you
would
kind
of
Define
your
production
environments.
What
that
looks
like
so
provision
looks
a
little
different
there
by
default.
So
what
we
give
you
can
see.
B
There's
a
step
here
to
deploy
with
arm
it's
going
to
use
it
in
the
Azure
subscription,
whatever
that
is
defined
as
whatever
the
whatever
Resource
Group
name
you
want,
and
then
it's
going
to
use
these
templates,
which
are
included
by
default
in
here
and
then
some
of
the
other
stuff
is
the
same.
So
I
might
want
to
do
validate
the
Manifest
Etc
I
can
make
this
simpler
if
I
want,
for
example,
if
I
want
to
speed
things
up,
I
don't
have
to
validate
the
Manifest.
B
If
I
don't
want
to
maybe
I
don't
care
in
my
local
environment.
So
I
can
just
delete
that,
and
now
the
toolkit
won't
validate
the
Manifest.
So
just
skip
that
step.
Maybe
I
don't
need
to
run
npm
commands
or
maybe
I
want
to
run
an
additional
one
for
my
project.
If
I
have
some
different
setup
over
here
or
there's
even
I,
think
there's
even
autocomplete
in
these
things
too.
B
So
you
can
do
you
can
choose
what
step
you
want
to
do
and
I
think
there's
even
one
if
you
just
want
to
run
a
generic
script,
so
you
can
you
know
whatever
you
want
to
run.
You
know
yo
something
or
npm,
something
or
whatever
or
even.net.
Something
I
think
I've
used
that
before
to
take
older
samples
and
convert
them
to
use
a
toolkit,
and
maybe
they
use
a
different
tool
chain.
Then
I
can
just
as
part
of
my
deploy
step.
B
I
can
run
some
generic
scripts
to
be
able
to
run
this
or
you
can
run
Powershell
scripts.
If
you
have
something
like
that,
maybe
your
deployment
process
doesn't
use
bicep
files
and
don't
use
Arm,
and
all
that.
Maybe
you
have
some
other
custom
things
so
then
your
provisioner
deploy.
You
might
need
control
over
that.
So
you
can.
You
can
kind
of
build
this
out
as
you
want
and
we
have
a
bunch
of
different
tasks
that
are
tuned
specifically
for
the
steps
that
we
have
seen
folks
do
when
they're
building
apps.
B
So
all
that's
documented
on
the
GitHub
repo,
but
then
there's
autocomplete
in
here
that
helps
you
kind
of
find
your
way.
But
if
you
are
completely
lost,
then
you
can
go
to
the
GitHub
repo
and
see
all
the
actions
defined
and
what
their
outputs
are.
Etc
cool,
I'm
just
going
to
check,
chat,
make
sure
there's
no
other
questions
yeah
any
way
to
permanently
dismiss
that
thing.
I,
don't
know.
I've
tried
many
times.
B
B
So
we
triage
that
and
discuss
it
internally
and
that's
a
great
way
to
to
talk
with
all
of
us
or
say:
hey
this
thing's,
not
working
or
hey,
I,
don't
understand
or
hey
our
company
needs
X,
and
this
isn't
working
it's
a
great
place
to
do
that.
If
you
want
to
chat
with
me
directly,
you
have
something
maybe
more
nuanced
or
you
want
to
share
feedback
one-on-one.
You
can
use
the
akms
link
here
at
ttk,
hyphen
chat,
and
that
will
help
you
schedule
a
meeting
directly
with
me
cool
all
right.