►
Description
This event is hosted by BLbit UG: https://www.meetup.com/blbitug/
Meetup event: https://www.meetup.com/blbitug/events/278900523/
It's time for a new meetup! This time the topic is static web apps. The meetup will be in English. Our friend Andreas Wänqvist, Aurelia core team member, talks about Azure Static Web Apps. During the event, we will be giving away 2 JetBrains yearly subscriptions that can be used for JetBrains tools of your choice.
Serverless Web - Azure Static Web Apps
Description:
Web site as a service, is more or less what Azure Static Web Apps is offering. With great developer ergonomics, speedy deploys and a stunning price point - it's a great offering for smaller projects.
Azure Static Web Apps is a service where you can host your static web sites, supporting sites produced in everything from plain HTML to Blazor to full-fledged JavaScript frameworks such as Vue, React or Aurelia.
Join me as we dive into the features of the service, such as the CI/CD deployment with GitHub actions, creating an Azure Functions based API, securing routes with the built-in Auth handling and setting up a custom domain.
Andreas Wänqvist
Andreas has been working in different positions within enterprise during the last two decades. A few years ago his focus was on all things mobile, then it shifted towards building web systems. Nowadays, the focus is on cloud solutions and planet-scale architecture, as well as helping web developers be more productive.
Andreas is a Tech Lead at Voyado. On his spare time, he spends time with his family and is involved in OSS as an Aurelia Core Team member.
A
And
we
are
live
hello.
Everyone
welcome
to
our
next
meeting.
Today
we
have
andreas
with
us.
He
will
talk
about
azure
static
web
apps,
mostly
and
yeah.
We
want
to
talk
to
to
thank
our
sponsors,
the.net
foundation,
for
enabling
us
to
have
this
stream
and
also
to
jetbrains,
which
for
from
which
we'll
be
giving
away
to
subscriptions
to
their
products
so
yeah.
B
B
B
I
also
do
some
web
stuff
on
my
spare
time
open
source,
I'm
a
member
since
2017
of
the
aurelia
core
team.
I
know
at
least
miroslav
have
been
doubling
in
aurelia
for
quite
a
long
time,
and
hopefully
some
others
of
you
have
too
really
nice
web
framework.
Try
it
out.
If
you
have
a
new
project
coming
up
previous
to
voyodo,
I
used
to
work
for
a
small
company
called
microsoft.
I
was
in
the
azure
division.
B
You
can
reach
me
with
more
questions
if
you
have
that
I'd
love
to
talk
web
or
azure
or
static
web
apps,
or
whatever
just
contact
me
on
twitter
on
at
mobilemancer,
you
please
feel
free
to
connect
with
me
on
linkedin
and
also
have
a
blog
which
is
infrequently
posted
too.
It
happens
at
mobilemastery.com.
B
B
B
B
And
azure
function,
integration
which
you
can
run
inside
your
project,
which
is
really
really
smooth
github
integration
for
ci
cd.
So
you
get
some
of
that
devops
magic
just
for
free,
if
you're,
using
github
actions
and
github.
That
is,
it
supports
custom
domains
which
is
really
good,
and
it
has
some
rudimentary,
but
quite
okay,
auth
provider
integrations
and
all
these
are
of
course,
services
that
that
have
been
available
before
it's
nothing
new,
but
it's
collected
or
gathered
in
a
way
that
that
makes
it
really
easy
to
use.
B
B
It
used
to
be
difference
in
pricing
for
them.
I
think
they're
about
the
same,
but
there's,
of
course,
small
differences
in
how
many
endpoints
they
have
how
many
pops
microsoft
used
to
like
behind
there,
but
I
think
they're
catching
up
and
I've
tried
some
of
the
other
ones
before
in
other
projects,
and
I
must
say
this,
one
is
a
really
really
good.
I'm
I'm
impressed
by
it.
B
I
haven't
been
that
by
the
other
offerings
before,
but
I
think
they
actually
do
a
purge
of
the
files
and
make
sure
that
they
redeploy
as
soon
as
there's
a
new
build
out
and
that
can
actually
take
a
while.
Actually,
I
think
the
old
documentation
used
to
say
wait
for
four
hours
before
you
can
be
sure
that
all
of
the
files
are
populated
at
the
end
points
which
is,
of
course,
a
drag
when
you
want
to
get
content
out
the
door
asap.
B
B
Api,
the
api
support
is
just
an
actual
function,
app
that
you
can
have
inside
of
you
the
static
web
project
as
part
of
it
just
stash
it
under
the
api,
folder
or
folder
named
api
and
github
build
actions.
For
example,
if
you
use
github
will
just
see
it
recognize
it
figure
out
it's
an
api.
You
don't
even
actually
have
to
to
tell
it
what
what
language
it
is.
B
The
documentation
have
been
changed
recently.
It's
used
to
say
also
node,
I
think
and
powershell
when
it
was
out
in
in
just
preview,
but
that
seems
to
have
been
removed.
I
haven't
tried
it.
It
still
works.
I
suspect
it
actually
does,
but
just
that
the
documentation
says
it
doesn't,
but
if
you
want
to
try
those
feel
free
to
do
it,
but
there's
no
no
guaranteed
support.
I
guess
do
know
that
this
is
a
simple
version
of
azure
functions
that
only
supports
hd
http
triggers.
B
B
So
then
it
was
just
github.
That
was
the
only
way
to
to
get
your
code
up
from
running,
because
now
you
can
click
on
there
and
actually
issues
actually
devops.
You
don't
get
those
fancy
belts
and
whistles
that
you
actually
get
with
github,
but
at
least
it's
an
option.
I
was
actually
quite
well
not
upset
but
disappointed
when
they
didn't
support
azure
devops
from
from
the
get-go
in
the
preview.
B
If
you
have
your
code
in
github
and
you
create
an
azure
static
web
app
from
it,
then
they
will
actually
start
talking
in
the
there
will
be
a
token
created
in
github
which
will
be
able
to
or
which
will
be
used
to
authenticate
you
and
the
deploys
into
azure,
and
that
means
that
as
soon
as
you
push
code
or
you
do
pull
requests,
there
is
going
to
be
an
automatically
triggered
build
in
the
action
and
it
would
act.
It
will
also
push
the
code
for
you
to
your
instance,
which
is
really
cool.
B
B
You
will
get
a
new
address
for
that
one
and
you
can
actually
just
browse
to
that
site
and
see
that
your
your
bug
fix
or
your
new
feature
is
working
as
you
intended
and
then,
when
you
finish
the
pull
request,
it
dismantles
that
staging
version
and
you're
good
to
go
actually
a
really
nice
feature.
I
wish
I
had
that
for
all
the
pull
requests
going
through
our
accompanying
branches
all
day.
B
Do
not,
though,
that
if
you're
using
the
free
version
here,
there's
a
free
version
and
paid
here
we'll
get
into
that
and
pricing
and
everything
else
later
on.
But
if
you
are
running
the
free
version,
there
is
a
maximum
of
three
staging
environments
available
and
that
can
be
overwhelmingly
little
if
you're
a
big
team.
But
if
you're
just
a
one-man
or
a
two-man
shop,
then
it's
probably
fine
right.
B
However,
there's
another
caveat:
that
is,
that
github
and
the
pandabot,
which
are
super
cool
features
of
course,
checks.
Your
dependencies,
make
sure,
there's
no
security,
leaks
or
anything,
and
when
an
important
security
update
is
released,
dependable
will
actually
create
a
pull
request
for
you
into
your
repository
with
update
the
dependencies
and
that
pull
request
will
create
a
staging
environment,
which
means
that
if
you're,
not
touching,
your
app
for
all
depends
on
how
many
packages
you
have
and
how
many
leaks
are.
B
There
are
found,
of
course,
but
it
could
be
that
your
you
come
back
and
you
try
to
to
push
on
code
to
pull
request
and
you
sit
and
wait
for
it
to
build
and
it
doesn't
build
and
create
staging
version,
as
it
usually
does
then
make
sure
to
check
if
dependable
has
actually
created
three
staging
versions
before
you
before,
because
then
you
can't
have
a
fourth
and
your
build
will
actually
result
in
an
error
as
well.
I
think
custom
domains
really
nice
to
have
I.
This
has
probably
been
it.
B
It
has
been
the
most
requested
feature
for
azure
app
services
since,
like
the
beginning
of
dawn
of
man,
when
dinosaurs
roamed
the
earth
and
were
just
aching
to
get
free,
ssl
certificates
and
support
for
custom
domains
in
easy
way.
It
does
finally
come
to
to
app
services
as
well,
and-
and
it's
here
in
azure
static
web
apps
as
well,
really
good,
really
good.
One
new
thing
that
wasn't
there
in
the
preview
is
it
actually
supports
apex
domains
now,
which
is
even
more
epic,
and
for
those
of
you
that
doesn't
know
what
that
is.
B
B
B
B
B
B
B
It
would
like
to
drive
your
car
and
rename
your
children
that's
about
what
you're
accepting
to
it's
every
consent
they
have
and
then
some
which
is,
of
course
kind
of
scary,
but
I
don't
think
your
end
users
will
see
that
I
hope
not.
I
hope
that
was
just
a
first
click
to
get
the
identity
set
up
properly,
but
you
might
want
to
check
out
so
that
you
are
you,
don't
scare
your
customers
away
with
it.
If
you
decide
to
let
customers
in
there
a
managing
office
is
made
through
the
portal.
B
B
It
can
be
quite
good
to
know
that
one
of
the
hard
things
with
keeping
users
around
is
that
you
often
want
some
kind
of
unique
id
for
them,
depending
on
whatever
solution.
They
sign
in
with
it,
it
can
be
a
hassle
to
keep
track
of
them,
since
maybe
email
is
not
the
best
unique
id
since
it
can
be
changed,
lost,
hacked,
etc,
and
there
is
an
id
created
for
the
users,
but
as
soon
as
you,
if
you
remove
a
user
and
add
them
again,
it
might
be
under
another
or
with
another
provider.
B
B
B
You
can
also
use
that
same
document
actually
for
route,
read,
writes
and
and,
for
example,
you
can
use
it
to
block
some
of
those
providers.
If
you
don't
want
those
there,
you
can
do
read,
writes,
for
example,
say
I
try
to
log
in,
but
I'm
not
authenticated.
Well,
then
you
can
rewrite
that
route
to
redirect
to
a
login
page,
for
example,.
B
B
B
B
B
B
B
A
B
B
I
think
it's
a
be
one
tier
to
be
able
to
to
run
with
the
certificate
and
as
soon
as
you
have
a
certificate
up
and
running,
you're
like
on
the
same
tier
as
naturostatic
web
app,
although
it's
just
not
as
quick
yeah
and
that
will
cost
you
around
10
euros
a
month.
I
think
so.
This
ends
up
if
you're
running
the
standard
version,
seven
and
a
half
euro
a
month,
so
some
some
some
euros
below
for
about
the
same.
B
B
I
think
I
was
just
about
to
say
that
that
the
thing
that
will
be
the
deal
breaker
is
that
if
you
have
bandwidth
overage,
meaning
if
you
pass
those
hundred
gigabytes
a
month
per
your
entire
subscription
of
rushing
azure
static
web
apps,
then
the
documentation
currently
says
that
we
we
cannot
longer
service
your
application.
It
says
so
it
doesn't
say
what
will
happen.
Even.
C
B
B
B
B
B
Yes,
the
there
is
no
actually
storage
account
that
you
can
see
here,
so
everything
is
baked
into
one.
All
you
see
is
just
an
azure
static.
Web
app
instance
I'll
show
you
in
the
portal
real
soon,
so
it's
just
more
service.
It's
it's
a
lump
of
things,
but
all
these
things
that
we're
going
to
talk
about
in
the
pricing
and
quotas
slide
in
just
a
few
minutes.
We'll
will
describe
what
you
get
in
this
package
right.
B
B
A
B
A
B
But
but
you
can
clearly
see
that
there's
a
lot
of
focus
on
github
and
github
actions
etc
and
some
connections
I
I've
used
to
follow
and
they
moved
from
the
devops
work
to
github.
So
I'm
thinking
I
should
see,
I
see
the
or
rather
actual
devops
cicd
is
probably
going
to
look
the
way
it
does
for
the
foreseeable
future.
B
A
B
A
little
bit
more
about
quotas,
what
you
get
for
your
morning
here,
there's
a
different
set
of
custom
domains.
Two
for
free
five
for
standard
still,
not
quite
sure
why
you
need
so
many
domains
for
an
app,
but
it's
good
to
have.
Ssl
certificates
are
free
and
they're
managed
for
you,
which
is
super
cool.
If
you
used
to
handle
that
yourself
with
let's
encrypt
and
those
refresh
scripts,
what's
not
that
we're
not
microsoft
supported
before
and
knows
it
could
be
quite
a
hassle,
right,
authentication
solution.
B
We
discussed
briefly,
you
can
have
25
users
with
up
to
50
defined
roles
same
for
both
of
these
services
for
the
standard
version
it
says
in
the
documentation,
you
can
have
custom
authentication
well
whatever
that
means
they
don't
document
it
at
least
not.
When
I
checked
a
couple
of
hours
ago,
private
link
you
can
use
in
the
paid
version,
which
is,
of
course
super
good
and
the
necessity
necessity
if
you
have
all
the
company
stuff
defined
in
the
private
network
in
azure
storage.
B
B
B
So
what
you
get
there
is
you
have
a
maximum
of
500
megabytes
in
free,
which
is
quite
a
lot.
That's
a
big
site
in
my
opinion,
especially
when
it's
just
a
static
web
app.
You
know
server
side
call.
Well
maybe
some
small
api
functions,
but
that's
not
a
lot
right,
two
gigabytes
available
in
in
standard.
B
B
Azure
functions
for
the
free
one:
it's
it's
managed,
you
don't
have
any
option.
Just
use
one
inside
of
your
azure
static
web
app
and
it's
the
small
restricted
one
for
the
paid
version.
It
says
you
can
bring
your
own
and
there
is
no
real
good
documentation
of
that
that
I've
seen
though,
but
that
would
mean
that
you
can
use
proper
functionality
in
your
azure
apps
like
event
triggers
timers
whatnot
and
then
those
really
cool,
pre-production
or
staging
environments
that
you
can
only
get
access
to
when
you're
using
github.
B
So
let's
say
I
want
to
build
this
for
myself.
Instead,
what
would
that
mean
if
I
picked
together
all
the
pieces
and
built
this
out
of
other
azure
services?
What
would
we
end
up
with?
Well,
you
would
need
an
azure
functions
app.
You
would
need
storage
to
host
your
blog
or
app
deploy
size,
wouldn't
really
matter
for
that
one.
As
far
as
I
know,
it's
only
bandwidth
account
and
going
into
azure.
It's.
B
B
B
I
recommend
a
couple
of
extensions.
You
can
get
big.
One
is
azure
account
where
you
had
little
the
connection
to
azure
and
there's
an
extension
out.
I
think
it's
still
in
preview
for
azure
static,
web
apps
and
there's
also
an
extension
for
azure
functions.
If
you
want
to
use
that
to
create
your
api.
B
Later
on,
if
you
want
to
see
what
we
build
during
demo
time
later
on,
you
can
just
hit
my
github
repository
and
there's
a
demo
dash
static,
dash
web
apps
dash
bill
bit
available.
Well,
you
can
get
the
code
and
also
say
to
it
that
the
presentation
ends
up
there,
so
you
can
get
all
the
links
for
the
documentation
and
examples
and
demos
that
I
showed
you
before
so
now.
Finally,
demo
time
just
took
10
minutes
longer
than
what
you
expected.
B
So
we'll
start
out
from
this
very
simple
repository
practically
naked.
All
we
have
is
a
license
pretty
readme
file
and
favicon,
and
I
have
already
prepared,
I
hope
everyone
can
see
the
fonts
we
concluded
before.
We
started
that
that
I
have
a
too
large
of
a
screen
and
everything
was
super
small.
So
we
tried
to
to
blow
all
the
fonts
up
as
much
as
we
could
so,
please,
let
us
know
if
it's
not
visible
to.
B
B
C
C
B
B
B
If
you
have
some
kind
of
spa
framework,
you
probably
you're
going
to
have
build
artifacts
you're
going
to
go
through
a
build
setup
of
some
kind
and
there's
going
to
be
a
lot
of
artifacts
in
some
directory.
Be
it
build,
be
it
whatever
right,
but
we
don't
have
any
it's
just
index
file
in
root.
Super
simple,
so
we'll
just
say:
root
here
as
well.
C
B
B
And
we
don't
have
to
mess
around
with
that.
You
often
don't
have
to
to
muck
around
with
that.
It's
only
if
you,
if
you're
on
some
kind
of
complex
setup
where
you
have
a
lot
of
build
artifacts
and
you
decide
to
move
the
directory
that
we
gave
in
the
beginning,
for
where
your
build
artifacts
is
or
where
you
store
your
code
or
whatnot.
B
B
If
we
go
into
dash
portal
right
now,
you
should
be
able
to
see
a
new
resource
group
here
created
with
our
the
same
name
as
the
repository
in
it
is
our
static
web
app
that
was
just
created,
so
check
it
out
and
there's
an
url
for
it.
You
get
some
kind
of
cool
random
name,
they're,
usually
quite
cute
agreeable
june-
well,
not
so
sure
unis,
one
of
the
best
movies
ever
right.
So
pretty
good.
B
B
C
B
It's
so
big
for
me,
I
can
hardly
navigate
because
I
don't
I
don't
recognize
the
gy,
so
we'll
say
that
we
had
a
new
push
to
a
new
feature
branch
right,
super
cool.
If
you
want
to
compare
it
to
pull
requests.
Well,
yes,
please.
I
would
like
that
and
there
are
no
collisions.
We
can
automatically
merge
it.
B
A
B
So
I'd
say:
that's
a
big
blocker.
Otherwise
than
that.
I'm
not
sure
that
I
don't.
You
probably
know
that,
and
probably
why
you're
asking
the
question,
but
they
recently
had
a
big
crackdown
on
the
amount
of
three
minutes
you
got
for
github
actions.
It
used
to
be
unlimited
before
right,
but
then
some
crafty
sneaky
hackers
have
realized
that
you
can
actually
mine
bitcoin
in
github
actions.
B
B
B
B
B
C
B
Here
you
can
select
your
preferred
authentication
provider,
our
case
I'll,
go
with
twitter
and
try
to
invite
myself
and
if
I
try
to
generate,
I
can't
because
this
is
quite
sneaky,
you
need
you,
you
will
always
get
the
roles
of
or
you
will
get
authorized
and
authenticated
when
when
you
go
through
a
successful
authentication,
but
you
need
to
enter
something
else
here
right.
So
I
think
contributor
or
comma
reader
is
just
your
proposal,
but
to
me
it
looks
like
that
box
is
already
filled
in.
B
B
Go
to
link
just
you
need
to
grant
consent.
Of
course
we
trust
this
app
and
it
passes
me
along
right.
So
if
we
check
my
juicer
info,
you
can
see.
I
got
an
id
twitter
authenticated
me,
and
it's
saying
I
am
anonymous.
I
am
authenticated
and
I'm
also
an
administrator
which
feels
pretty
weird
that
I'm
anonymous
when
I'm
actually
extremely
known,
since
I'm
the
only
one
that
has
admin
and
I
have
been
invited
through
the
ui
and
I'm
still
anonymous-
oh
well,
so
at
my
page
it
was
accessible
before
right.
B
B
So
what
are
routes
well,
for
example,
say
that
this
kind
of
quirky
authentication
route
I
want
to
go
to.
I
want
to
hit
that
just
saying,
slash,
login.
Well,
I
will
do
that
with
the
rewrite
say.
I
want
to
only
allow
things
under
the
admin
under
slash
admin,
even
for
those
that
are
allowed
in
a
certain
role.
I
can
do
that
so
here.
We're
saying
that
the
admins
page
we
had
are
just
going
to
be
allowed
for
people
with
the
admin
role.
B
B
The
navigation
fallback
is
just
you
write,
something
that's
not
acceptable.
Like
humpty
dumpty.html
will
say
it
rewrites
and
sent
you
back
to
index.html
response
overrides
is,
if
I
get
a
certain
http
code
like
401,
I
mean
not,
authenticated
then
make
sure
we
redirect
that
person
to
the
slash
login
page.
B
B
B
C
B
B
B
B
B
B
Browser
to
remove
the
cache
somehow
and
basically
deploy
a
new
version
and
then
next
time
they
open
your
app
well,
it's
going
to
be
everything
is
going
to
be
refreshed
and
reloaded,
and
then
you
won't
have
the
admin
page
available
in
your
cache
and
you
won't
hit
it
when
the
user
request
it.
If
the
your
browser
has
cached
it
and
you
click
admin.
Well,
it's
just
going
to
check
the
browser
cache
right.
B
So
it's
not
going
to
go
down
to
the
server
and
look
at
the
route
json
file
and
see
that
well
you're
not
supposed
to
access
admin.
It's
just
going
to
be
able
to
show
you
what's
already
there,
but
that
entire
scenario
of
course
revolves
around
the
fact
that
you
usually
had
that
user
in
a
position
of
power
or
role
where
they
could
see
things.
And
then
you
somehow
diminish
that,
and
it
will
still
be
seen
until
you
refresh
or
force
the
refresh.
A
B
To
oh
well,
wait:
I
was
going
to
answer
the
wrong
thing.
It's
a
hard
question:
what
is
microsoft
identity
if
you're
thinking
about
the
azure
8d
connection,
there's
an
of
course
an
option
for
that
available
from
the
get
go
it
is
aad
is
the
route
so,
but
it's
still
just
the
same
thing
same
requirement.
Constraints
like
you
can
have
25
users.
That
is
it.
So.
I
suspect
that
there's
some
kind
of
epic
large
grand
scheme
shared.
B
B
B
B
Will
get
to
validate
and
configure
and
of
course
you
need
to
enter
a
text
record
type
at
your
domain
and
blah
blah
blah
and
after
this
propagates
through
dns
it
will
validate,
and
then
it
will
create
the
certificate
for
you
behind
the
scenes
and
set
it
up
super
smooth,
big
props,
to
whoever
fixed
it
over
at
microsoft.
It's
been
long
overdue,
especially
with
apex
domains.
Right,
I
think
it's
super
cool.
B
A
B
Web
apps
is
for
superior
to
everything
else
out
there,
because
no
just
kidding,
I
think
it's
it's
the
same.
Everything
is
the
same.
I
mean
there's
one
little
thing
here
and
one
little
thing
there
that
the
services
don't
provide,
but
let's
keep
it
real.
If
your
company
has
all
your
things
in
aws,
then
you
don't
want
to
go
deploy
stuff
in
azure
just
for
the
fun
of
it.
If
your
company
is
a
microsoft
based
shop,
well,
it
doesn't
make
super
some.
B
Decisions
to
to
deploy
over
in
google-
perhaps
so
just
go
with
what
you
feel
like.
I
don't
think,
there's
any
major
difference
to
to
anything.
It's
just
probably
the
amount
of
support
you
get
to
rather
community
support,
I
suspect,
because
the
aws
equivalent
it's
been
long
from
for
longer,
there's
more
community
support
called
out
there,
there's
probably
more
people
working
with
it.
B
A
A
B
So
should
we
create
a
an
api
that
is
well,
you
should
say
anything
is
super
simple
with
computers.
We
all
know
it's
not,
but
it's
relatively
simple,
so
we
need
for
this
to
be
able
to
build.
It
needs
to
be
in
a
folder
called
api
and
not
the
file,
of
course,
but
a
folder
sorry
about
that
here.
We
go
all
and
then
create
this
function
up
in
matter
ways,
of
course,
easiest
way,
I
think,
is
if
you
have
the
azure
functions,
we
just
do
the
code
extension
installed.
B
B
B
C
C
B
B
Become
rehearsed
but
it's
more
fun
that
way
right,
so
we
call
it
greeting
and
and
that's
api
greeting,
and
so
this,
unless
you
pass
something
into
this,
it's
just
going
to
return
a
text
response
like
this.
It
should
be
triggered
function
executes
it
successfully,
passing
a
name
or
something
if
you
want,
but
let's
just
see,
if
we
will
do
a
get
against
it
and
see
what
comes
out
right.
B
B
B
A
B
A
B
A
B
A
A
Yeah,
so
thank
you
a
lot
and
thanks
for
everybody
watching
thanks
for
nicole
and
jose,
I
sent
them
their
subscriptions.
They
were
the
most.
They
were
the
most
quick,
the
quickest
and
most
active
yeah
people
in
in
the
chat
so
well
deserved
and
yeah.
So
thanks,
everybody
and
yeah
see
you
on
the
next
meeting,
yeah
yeah.
Thank
you
thanks.
Everyone
bye
for
now.