Hey friends! Azure Static Web Apps is
a service that can automatically build
and deploy your full-stack web app
from a code repository to the cloud.
But did you know it also enables you
to achieve close to single-digit
millisecond response times for
your users anywhere in the world?
Simona Cotin is here to show me how
it all works, today on Azure Friday.
Hey friends! I'm Scott
Hanselman and it's Azure Friday.
I'm here Simona who's going to tell
me how to accelerate my websites
with Azure Static Web Apps.
How are you? Hi Scott.
Hi everyone, I'm doing well.
Thank you so much. How about you Scott?
I am very well.
I'm very well, you know.
I recently moved about nine of my
websites over to Azure Static Web Apps.
Everything is faster and better
and it's saving me money and it
sounds like you have some tips
to make it even better for me.
Yeah, and I'm so so happy that
everything worked out very
well with moving your websites.
I've moved some of mine as well
and I hear this story over and over
again and something else that we
usually talk about when we talk about Azure
Static Web Apps is site performance
and based on our customers feedback
we know that this is crucial when
they they're creating applications
for the modern web.
I know that it has a direct impact
on user experience.
It has a direct impact on search
engine rankings.
We all wanna be there on the first
entry on the first page of a search
engine and ultimately it does have a
strong impact on our business as well.
And with Azure Static Web Apps we
are committed to really building
a platform that helps you deliver
the best results for your users.
And as you know,
Azure Static Web Apps is a purpose-
built content delivery network (CDN)
that makes your global applications
fast and makes them highly available
and it really allows you to scale
as your users are coming in.
So what we usually do is we globally
distribute and cache your static
content across the world so that your
users can access your application
as fast as possible regardless of
where they are around the world.
And today I'm thrilled
to announce and demo the public
preview of Azure Static Web Apps
enterprise-grade edge,
which is powered by Azure Front Door
and it enables even faster page loads,
enhanced security and higher availability
for your global applications.
And this is a fully-managed experience
with absolutely no configuration
required or any other other additional
code that you might have to write so
I can go ahead and share my screen.
So I can show you how this works.
Alright, so what I have here
is a production application.
This is a Gatsby application that
is already running on Static
Web Apps at shoplamp.xyz,
and this is where this is an
application that we're going to
enable enterprise grade edge for it.
So as you can see here,
this is the usual portal screen that
you would see for your Static Web
App and we have this new menu item
here on the left hand side called
enterprise grade edge and when I
go to this page there's a couple
things happening before I can
enable this enterprise grade edge.
There's two prerequisites,
so one is we we build this feature
for production applications,
so you have to be on a standard
hosting plan in order to be able to
take full advantage of this feature.
But also you have to have your custom
domain setup as you can see here,
I've set up my shoplamp.xyz
custom domain and I'm ready to go and
enable the enterprise-grade edge by
checking this impressive checkbox.
So by default, when you make a,
you know a standard or a free or a
low SKU standard Static Web App,
where does it live?
Like for example,
I think mines like North Central,
so it's in Chicago somewhere, right?
And if someone is going to access that from,
you know from Europe somewhere this the
limit really is the speed of light,
right?
The electrons can only get there so fast,
so their latency is going to be.
It could be a couple 100 milliseconds,
it could be 50 milliseconds.
It's going to be whatever the
static you know,
whatever the work that has to happen
on the cloud is plus the speed of
light and their own connection
and all those kinds of things.
And those Static Web Apps are
hosted in one place, right?
By default? Is that correct?
So we we have a single place that we
attach the static web app serverless.
APIs and staging environments,
but then on deployment we
actually globally distribute
your static content across the globe.
So, you're Northern Europe,
or let's say your user from Switzerland
where I'm currently based will actually
access point of presence that's
closest to Switzerland rather than
the North America point of presence.
I see, okay,
fantastic and then you're going to and
when we click this Azure when this
magic button here the enterprise grade edge,
we're going to get that load balancing
across all the potential places.
Like you said,
118+ points of presence,
so literally whatever is closest
to my house is going to be where
that data is served from right
exactly and that's that's what
enterprise-grade edge is bringing us.
It's an enhanced or a bigger larger,
much larger number of points of presence,
and it's all backed by Microsoft
Global Edge Network.
Interesting and I see right there
it says powered by Azure Front Door.
I recently turned on Azure Front Door
for hanselman.com so when you visit my
personal website it's Azure frontier but
I had to go in and make a Front Door.
I had to configure it.
I had to move my search over there.
I basically did a bunch of set
up and it was very powerful.
But you know it took me some
time and it was a little bit.
It took some reading and some education.
Are you going to hit save and then
I'm going to have to go and do all
of that Front Door stuff and it's
going to be a bunch of configuring.
No, so once you hit save here and
you confirm that you want to enable
enterprise-grade edge for your application.
Then everything will be magically
managed for you,
so we will not have to create a new instance.
We will not have to configure,
let's say Azure Static Web Apps,
to restrict traffic only for
Azure Front Door.
We everything will need managed in the
background for you by Azure static Web Apps.
That's cool, OK,
so you're using Front Door,
but you're preventing me from having to
worry about your kind of hiding it from me.
You're you're you're,
you're letting us sit on top of that
check box and you're instituting best
practices for SSL offload acceleration.
CDNs you're including all those points
of presence I could do that manually,
but now I don't have to.
I just hit the checkbox.
That is exactly correct,
and I think we've learned from
our customers that and from our
users that through, for example,
the managed functions as well.
There's a lot of benefit in this
simplicity and having to or
having this ability of enabling
functionality that's relevant for
web applications that will improve
productivity and it will improve the
user experience with a single thing.
The power of a single checkbox.
I think that's that's very powerful,
and that's what we're doing here as well.
You know what I think is so great about
that is that we we talk about this single
checkbox or a slider bar somewhere in Azure,
and those are really encapsulating
best practices.
There's decades of thought in
how to do a global network,
and I I if I may.
I remember in the 90s we would fly a
consultant from Cisco or F5 Networks,
or someone who knew what they
were doing to come and pull wires
and install an appliance.
And we would have a round robin
load balancing something that you
can do in in Azure Front Door in
like a check it takes you 5 minutes.
We would have to fly a consultant in
to help us do that and I I used to
joke that I have a three page long
resume and that the second page was
scaling web apps and then now it's
a check box in Azure so I just pull
that second page out of my resume
because it's all encapsulated in
the best practices that we see in
the cloud and it's so amazing to
I hope that people appreciate.
That the power behind a single checkbox.
It is all the best practices of
years of doing apps at scale.
And it's so amazing.
You could check this and then go to
lunch and you've just made a global website.
Yeah, and and I I so love that story
because it does remind me of the
times when we had to do that as well.
And I think here what we're doing
is basically almost like renting a
tiny bit of the brain of everyone
else that has contributed to building
this awesome product.
And as you can see,
it does take a while to actually
enable this enterprise grade edge.
It usually takes about 20 minutes
and I did prepare a another
application that we can test.
What I really want to show you
here is the impact of enabling the
enterprise-grade edge on our Static
Web App and the way we're going to
test that the impact on performance
is using this tool called loader.io,
which allows us to track some
metrics like response times and response.
Accounts and bandwidth and I can
go ahead and
run an existing test which currently
basically spins up 100 clients
per second and it runs this test
for 30 seconds and it goes to
aswa.site.
So I'm going to go ahead and click run.
And what we'll see here is our
requests coming in.
There's usually a warm up time that
I see you while running these tests,
but beyond that warm out time,
we can see that for for 100 clients
we can consistently see this average
response time of 10 milliseconds,
11 milliseconds, which is basically.
Very impressive from my perspective
as a response time for a static web app.
And then that makes me think
about the speed of light, right?
Like and it kept coming back
to the speed of light, right?
How far can light go in 10 milliseconds,
right? You're getting it down to
as fast as can possibly be done,
and there's a lot of stuff happening.
But the idea that you can get a
response back from a get in 10
milliseconds is just fantastic.
Yep, and we can.
We can stress this further.
We can get up to maybe 1000
clients and we'll see that as
we're running this new test,
we're getting again 1000 clients,
but our speed and our response time
remains constant at 10 milliseconds.
Of course,
as we're going to increase and as as
our applications are becoming viral and
more and more people want to buy lamps.
Then we might experience
some lower response times,
but overall I think this these are very
impressive results and as you mentioned,
it's like almost a point point
of presence next to my door and
what's exciting about that is
that while these are static apps,
of course like you mentioned
that this was on Gatsby,
if someone wants to go and back this
application with an Azure function,
or some other serverless thing,
they're going to also have the activity,
and then maybe put Azure Cosmos DB.
Behind it,
so you're going to have a global database,
global,
serverless platform and static web apps.
It's so funny you know when you go
to a startup and they have like a
big TV in the lobby and it has a map
of the Earth up with a pin of all
the places that they do business.
It was always big companies
that could get up in oh,
we have an office in Zurich.
We have an office in Portland
now one and two person companies
can use Azure Static Web Apps,
Cosmos and Azure Functions and they
can put 118 pins all over the world
and say we are globally distributed
application and we're ready for any
traffic that the world can throw at us.
I I love it and I think this is
especially important in in the days
that we are now where everyone is
spending most of their time online
and it becomes more relevant to
have that kind of presence that
CDNs and Azure can offer us now.
I did mention though that I
have my own Front Door.
Can I bring my own Front
Door if I want more power?
If I want to control pathing?
Or maybe you know manage
certificates on my own?
Yeah,
absolutely.
So we actually have this other
option which you can consider your
bring your own Azure Front Door
option where you can manually
configure Azure Front Door so that
it uses Azure Static Web Apps as
a back end for your front end for
your Azure front or instance,
and you can configure your custom
domain your manage certificates
there as well and and then we have
this smooth integration as well
where you will see here that you can.
Update your Static Web Apps config so
that it only accepts traffic from and
requests from Azure Front Door and
you can configure that to be your own
instance of Azure Front Door, right?
That's a great point.
That allowed IP ad range is really
important because what you're saying is,
you know Azure Front Door is acting
as a reverse proxy and you don't
want people to go around front
door and get into your house.
Another way they gotta go through the
Front Door through the door, yes.
Very cool awesome.
So this is available now in preview.
Yeah, so it is available in public preview.
Ready for y'all to go check it
out either in the Azure portal.
Or you can also use Azure CLI to
enable this feature to disable it or.
Query for the status so I can go to docs
and check out Azure Static Web Apps.
Or if I already have an Azure
Static Web App as I do have nine,
I'll go into the portal and I can
just click on enterprise grade
edge and get started right away.
That is true.
And if you want to learn more about this,
you can check out the announcement
blog post at aka.ms/swaedge
or you can go try it yourself
directly into the Azure portal
as Scott mentioned he would do.
Fantastic, well thank you so much.
This has been great.
Thank you alright,
I am learning all about how to
accelerate my website with Azure
Static Web Apps, today on Azure Friday.
Hey, thanks for watching this
episode of Azure Friday.
Now I need you to like it.
Comment on it, tell your friends, retweet it.
Watch more Azure Friday.