►
From YouTube: Debug Microsoft Teams apps without ngrok | Tips & Tricks
Description
If you're building a Teams tab, task module, or configuration page, you don't really need a tunneling tool. This video explains how to set yourself up for local debugging of a Teams app without any Internet tunnels. Learn more: https://aka.ms/tabs-without-ngrok-article
A
Hi,
I'm
bob
german
cloud
advocate
at
microsoft
and
I'm
here
to
share
tips
and
tricks
on
developing
applications
for
microsoft
teams.
Today,
I'm
going
to
show
you
how
to
set
up
for
local
debugging
without
the
use
of
an
internet
tunnel
of
your
team's
tabs
task
modules
or
configuration
pages.
This
video
is
a
companion
to
another
one.
What
is
ngrok
and
do
I
need
it
to
build
teams,
applications
and
I'll
have
a
link
to
that
at
the
end
of
this
video.
A
If
you're
watching
this
one
will
assume
that
you're
building
a
tab,
a
task
module
or
a
configuration
page
for
microsoft
teams
and
that
you've
chosen
to
work
locally
without
the
use
of
ngrok.
Now
you
may
have
noticed
that
ngrok
is
listed
as
a
prerequisite
in
a
lot
of
teams,
development,
documentation
and
tutorials.
A
A
Well,
the
connections
to
your
local
web
server
come
from
the
local
teams,
client
or
browser.
So
even
if
you
use
ngrok
you're,
actually
just
looping
back
outside
to
the
internet
and
right
back
into
your
local
computer,
so
the
tunnel
isn't
really
necessary.
Now,
adding
azure,
active
directory
single
sign-on
doesn't
really
change
that.
It
means
that
your
local
web
server
needs
to
also
host
a
web
service,
but
it's
called
from
the
local
teams
client.
So
you
really
don't
need
any
incoming
connection
for
tabs
task
modules
or
configuration
pages.
A
What
you
need
is
the
https
support
and
a
dns
like
name
because
azure
ad
single
sign-on
won't
work
with
just
plain
localhost.
It
also
won't
work
with
azurewebsites.net.
You
need
some
other
dns
name
that
you
can
register
into
azure
ad
and
those
are
the
things
that
you
really
need.
So
let
me
show
you
how
to
set
up
azure
ads
single
sign-on
locally
with
no
internet
tunnel.
A
A
Since
this
uses,
azure
active
directory
single
sign-on
azure
won't
allow
you
to
use
localhost
for
that
particular
case,
and
also
you
can't
use
azurewebsites.net.
Incidentally,
so
you
need
some
kind
of
a
custom
name,
so
I'm
just
going
into
my
etc
hosts
file
and
adding
this
entry
to
127.0.0.1,
which
is
the
loopback
network
address.
So
it's
just
going
to
loop
back,
it's
not
going
to
go
out
over
the
internet.
A
So
now
I
have
two
web
servers
running
and
that's
because
I'm
using
the
teams
toolkit
generator,
which
actually
generates
two
applications
in
the
case
of
sso,
it
generates
one
web
server
on
port
3000
for
the
tab
web
page
and
another
one
on
port
5000
for
the
token
exchange
web
service.
So
this
makes
life
a
little
bit
more
complicated
because
we
actually
have
to
terminate
both
of
these
ssl
connections
and
we're
going
to
have
to
have
a
cross-origin
call.
A
With
a
trusted
certificate
see.
It
says
it's
valid
issued
by
a
trusted
authority.
Now
there's
an
accompanying
article
that
will
lead
you
through
this
set
up
step
by
step,
it's
different
for
each
operating
system,
but
you
can
generate
your
own
certificate
and
then
tell
your
system
to
trust
it.
And
that's
the
approach
here
and
you
can
see
that
that
is
set
up
and
working
here.
Okay,
so
that's
step
two!
Let's
just
take
a
look
at
how
that
gets
used
by
our
web
server,
our
local
web
server,
the
react
one!
A
That's
the
main
web
page,
it's
pretty
simple!
I've
taken
the
certificate
and
the
key
that
were
generated
again.
The
article
has
the
step
by
step
and
I've
added
them
to
my
project,
along
with
some
environment
variables,
to
tell
create
react
app
where
the
files
are,
and
it
takes
care
of
all
the
details
as
it
turns
out
the
other
server.
A
It's
not
a
huge
deal.
You
can
steal
my
code
right
off
the
screen,
but
those
are
the
setup
steps
to
get
that
trusted
https
connection,
so
the
remaining
steps
are
the
same
as
they
would
be
for
any
azure
ad
sso
project.
So
you
can
follow
whatever
tutorial.
You
want
you're
just
going
to
use
the
local
address
instead
of
the
ngrok
address.
So
this
is
the
next
step,
then,
is
to
use
the
local
hostname
and
port
in
your
app
registration.
A
A
A
The
url
of
our
personal
tab
you'll
see
that
it's
also
using
dev
apps
for
teams,
colon
dot,
local
column,
3000
and
then
in
the
domains
and
permissions
section.
If
we
go
over
there,
you'll
see
that
yep,
it's
actually
those
same
local
host
names
that
are
that
are
set
up
there.
So,
let's
test
it
out
I'll,
go
ahead
and
install
this
for
myself
and
if
you
see
the
picture,
that
means
that
it's
authenticated
with
azure
id
sso
and
pulled
my
picture
from
the
microsoft
graph
and
it
worked
ta-da
for
more
on
this
topic.
A
Please
check
out
the
video.
What
is
ngrok
and
do
I
really
need
it
for
teams
development,
that's
at
aka
dot.
Ms
slash
ngrok
dash
video,
and
there
are
also
a
couple
of
articles
aka
dot.
Ms
slash
ngrok
article
has
the
general
ngrok
article
that
matches
the
other
video
and
then
for
the
step
by
step.
That
shows
how
to
set
up
this
article,
including
generating
those
trusted
https
certificates.