►
From YouTube: Building Microsoft Teams Apps with Blazor
Description
In this 17-minute Developer-focused demo, Mike Berglund opens with an overview of Blazor and some of the challenges of building Teams apps with Blazor. There is a fair amount of boilerplate code that needs to be written. So the presenter decided to write and share that boilerplate code found in the Blazorade Teams component library, in preview. Now writing apps with Blazor is greatly simplified! Step through the creation of a simple personal tab application created with Blazor. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on February 4, 2021.
Demo Presenter: Mika Berglund (Valtti) | @MikaBerglund
Supporting materials:
• Demo Script - Microsoft Teams with Blazor | https://mikaberglund.com/pnp-dev-general-community-call-demo-feb-4-2021/
• Documentation - Introduction to ASP.NET Core Blazor | https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0
• Repo - Blazorade Teams | https://github.com/Blazorade/Blazorade-Teams/wiki
• Website – Blazor University | https://blazor-university.com/
Learn more:
• Microsoft Teams platform documentation - https://docs.microsoft.com/en-us/microsoftteams/platform/?WT.mc_id=m365-15744-cxa
• 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
I'll
I'll
go
through
this
thing
with
a
couple
of
slides
first,
in
a
couple
just
a
couple
of
minutes,
and
then
I
I
go
to
the
demo:
building
microsoft
teams
apps
with
blazer,
first
a
few
things
about
what
is
blazer
well,
that
is
a
framework
for
single
page
applications,
and
it
is
these
days
it
is
a
part
of
asp.net
core,
so
it
is
kind
of
central
central
part
of
asp.net
core.
It
uses
razer,
syntax
and
and
razer
components
to
build
ui.
A
A
The
thing
with
blazer
is
that
you
write
your
ui
code
or
your
code.
You
write
in
c
sharp
instead
of
javascript
or
well,
you
could
probably
use
any
dot
net
language,
but
you
don't
write
it
in
javascript.
You
use
c-sharp,
and
what
that
brings
also-
which
is
quite
interesting,
is
that
you
can
actually
then
use
any
dot
or
more
or
less
any
net
standard
library
in
your
application,
so,
for
instance,
microsoft,
graph
and
azure
cosmos,
db,
sdk
and
stuff.
A
A
So
then
building
teams
apps
with
blazer.
There
are
a
few
challenges
or
one
major.
What
I
think
actually
is
that
since
you
the
your
blazer
application,
you
are
writing
it
in
in
csharp.net
language
and
teams,
sdks
well,
javascript
only
sdk,
so
you
have
to
do
some
interrupt
there
and
a
javascript
interrupt
in
blazer.
A
A
Another
thing
that
in
in
teams,
applications
which
applies
to
all
kinds
of
teams
applications
is
that
teams
does
not
actually
do
the
authentication
of
your
user.
It
provides
you
with
information
about
who
the
user
is.
It
is
not
authentication,
so
you
have
to
take
care
of
the
authentication
properly.
A
So
there's
a
lot
of
boilerplate
code
that
you
have
to
write
to
get
things
just
to
to
get
things
set
up
and-
and
that's
what
I
set
out
on
during
the
christmas
holidays,
to
to
do
something
about
that,
and
I
wrote
a
component
library
that
takes
care
of
most
of
this
spoiler
plate
code.
So
writing
teams
apps
with
blaze.
It
becomes
really
easy
and
I
have
a
demo
where
I'll
show
you
how
to
write
a
simple
personal
tab
application.
A
A
Then
there's
a
couple
of
links
here
on
the
last
slide.
I
already
sent
this
slide
deck
to
to
vesa,
so
you'll
be
be
getting
this.
These
links
as
well,
and
so
now
I
will
start
the
demo.
Actually,
I
have
created
a
blog
article
on
my
blog,
which
is
actually
the
the
script
for
this
demo.
So
and
this
link
to
or
the
link
to
this
article
is
in
the
in
the
slide
deck.
So
you
can
follow
this
script
as
well
and
do
the
same.
B
A
A
So
this
is
just
a
standard
azure
ad
application
registration,
where,
if
we
look
at
the
authentication,
I'm
using
the
single
page
application
platform
with
specifying
the
root
url
to
the
to
the
application
which
I'll
be
running
locally
in
in
in
visual
studio,
there's
nothing
special
to
this,
this
just
a
standard
single
tenant
application,
and
so
just
a
normal
application.
Registration.
A
A
A
A
This
is
just
as
you.
You
know,
this
is
just
standard
configuration
that
you
do
in
asp.net,
core
application,
so
I'll
copy
that
and
add
the
the
configuration
here.
So
now,
I'm
using
the
from
my
application
settings,
the
themes
app
section
and
the
client
id
and
tenant
id,
and
just
letting
the
laser
rate
teams
know
that
this
is
the
stuff
that
that
it
can
use
to
actually
do
the
authentication
of
the
user.
A
A
So
here
is
the
well
the
normal
routing
that
that
is
used
in
in
blazer
applications.
But
then
this
team's
application
component
is
is
part
of
blazeraid
teams.
That
actually
does
a
lot
of
stuff
for
you.
So
it
takes
care
of
all
of
the
communications
with
the
team's
sdk,
so
that
means
initializing
the
application
and
letting
teams.
A
What
it
will
be
then
doing
is
provide
me
with
the
access
token
that
I
can
then
use
for
the
permissions
that
that
I
I
granted
access
to
in
in
the
in
the
application
registration.
So
with
that
access
token,
I
could
then
read
the
profile
information
for
the
user
who
has
logged
in
and
when
all
of
that
stuff
has
been
done
by
the
teams
application,
it
will
render
this
application
template
and
provide
that
information
for
me
in
in
the
context.
A
So
we
have
the
context
from
teams
that
contains
information
about
in.
In
about
the
context
in
which
the
application
is
running,
so
if
it's
a
channel
application,
you
get
the
channel
id
that
the
group
id
and
stuff
like
that
and
and
a
lot
of
things
that
that
is
provided
you
by
teams
sdk
and
the
client,
and
that
is
javascript
but
natively.
But
but
with
teams,
blazer
or
blazery
teams.
It
is
translated
over
to
to.net.
A
A
That
is,
and
then
you
can
specify
icons
and
stuff
like
that.
But
this
is
what
is
required
to
have
in
the
application.
What
we'll
do
is
that
we
have
a
tab
that
we
want
to
have
in
this
application.
So
we
go
to
the
tab
section
and
in
a
team
tab.
Here's
where
you
would
add
tabs
that
you
install
in
into
channels
or
or
meetings
or
group
chats,
but
since
we're
doing
just
the
personal
tab,
we
use
this
personal
tab
section.
So
here
you
can
add
a
new
personal
tab.
I
already
created
one.
A
A
Here's
the
url,
that
of
the
page
that
we
just
created
in
visual
studio,
and
so
when,
when
you
launch
the
application,
it
will
load
that
url
and
that's
pretty
much
it
what
you
need
to
have
in
in
the
application.
You
can
have
a
look
at
the
app
manifest.
It
looks
like
this
and
then
on
the
last
page.
Here
you
can
either
download
it
or
or
install
it
directly
if
you
have
enabled
what
they
call
site
loading
of
of
teams
apps
in
in
your
tenant.
So
you
need
to
enable
custom
applications
in
in
your
tenant.
A
But
you
can
do
that
probably
in
a
development
tenant,
no
problem
with
that.
Otherwise
you
need
to
download
the
manifest
and
ask
an
admin
to
to
publish
it
for
you.
But
what
we'll
do
now
is
just
go
ahead
and
install
that
edit
and
it
will
come
here
as
an
icon
and
now,
when
it
runs,
it
will
not
run
because
I
haven't
started
the
application
in
visual
studio.
But
now
again
run
it.
A
And
when
it's
loaded,
we
can
go
back
to
the
teams,
client,
which
is
over
here.
I
guess
yes,
and
now,
when
I
refresh
that
it
will
load-
and
here
is
the
information
that
is
coming
from
teams
context
and
all
of
the
authentication
results
with
my
access
tokens
and
a
list
of
scopes
that
it's
included
and
so
on.
B
Great
great
yeah,
so
then
people
can
just
use
like
still
going
to
start
calling
other
apis
using
graph,
yeah,
calling
it
to
sharepoint
and
so
on.
Yeah
yeah
really
cool,
and
I
really
like
how
we
kind
of
made
it
easy
to
handle
the
team's
sdk
and
kind
of
do
all
the
the
the
plumbing
essentially
making
it
so
simple
for
folks
to
use
this.