Hey everyone, my name is Anthony and I work on
a brand new service at Microsoft called "Azure Static Web
Apps". And today we're going to look at how we
can
build and deploy a Hugo website along with a Python
serverless API.
Azure Static Web Apps provides a way to host your
static site.
This could be a single page application that's built with
something like React, Vue, or Angular.
Or something built with a static site generator like Hugo
or Gatsby.
We also allow you to add any backend logic
that you might need
using serverless APIs, and these APIs can be built with
Python as well as JavaScript or C#.
And then you take both your web app and your
API, and put them in the same GitHub repository.
And then we take care of building and deploying them
to the cloud using GitHub Actions.
And the static assets are globally distributed,
so your site is going to be super fast from
anywhere in the world.
And the serverless APIs scale dynamically,
so they'll perform great no matter how busy your site gets.
And let's take a look at a few other features
of Azure Static Web Apps... I already talked about the globally
distributed hosting of your static assets, as well as the
serverless APIs, and the GitHub Actions integration
that's going to go and build and deploy your application every
time you make a commit to your repository.
And as with, you know,
really any site that you want to build,
you probably want to bring your own a custom domain.
You can do that with Azure Static Web Apps and
we give you a free SSL certificate when you do
that.
And Azure Static Web Apps has a really good local
development story.
There's a VS Code extension that allows you to deploy
your app to the cloud,
and there's also a local CLI that allows you to
run both your frontend application along with your back-
end API's,
if you have any, together on your local machine and
you can test out things like routing, as well as
authentication,
all without deploying your app to the cloud.
And there's also support for staging environments,
so every time you make a pull request against your
repository, we'll actually stand up a staging environment for you
so that you can preview your site before merging your
code to your production branch.
And there's also things like built-in authentication and custom routes,
so if you want to integrate with authentication providers like
GitHub or Twitter and things like that,
you don't have to write any code!
We handle that all for you.
And there's also a bunch of enterprise features in
Azure Static Web Apps as well.
Alright, enough slides. Let's look at some code.
What I have here is a very basic Hugo
application.
And I'm going to use the Azure Static Web Apps
VS Code extension to deploy it to Azure.
So first thing it's going to ask me for is whether or
not I want to upload it to a new GitHub
repository.
I'm going to say "yes" to that and I'll give
it a name.
And I can decide whether this is a public or
private repository.
And then I give my site a name. And out of the
box,
we know how to build from quite a few different
frameworks.
I'm going to choose Hugo.
And then I need to tell Azure Static Web Apps
where my Hugo app lives.
It's in the folder called "blog",
so that's what I'm going to fill in here,
and it asked me for a location for an API.
I don't have an API in my project right now,
but I want to add one later,
so I'm just going to fill in "api" as the folder.
And by default, Hugo outputs the final content to be
deployed into a folder called "public",
and then I'm going to choose a region.
As I said, the app is actually globally distributed,
but the region decides where the function app lives.
And then, just like that, I'm done.
And then, as you can see,
the GitHub Action has already kicked off.
And as we kind of browse around our GitHub repo,
you can see that Azure Static Web Apps has added
a GitHub workflow on our behalf that contains a very
simple GitHub Action that's got the settings that we entered
earlier.
And then going back to our action,
we can actually see that it's finishing up right now...
...And it's done!
And then back in VS Code we can just click
on browse website, and we can take a look at
the app live on Azure.
So now back in VS Code.
Let's take a look at our app.
Like I said, it's a super simple Hugo app.
I've basically created one page here, and in the page
I have a form that's using this kind of like
this magical way of rendering form onto my page.
I don't really have to do anything.
The theme provides the form for me,
but the form needs to send an email,
right? And I need something to send that email,
so I'm going to set up a serverless API using
Python to do this.
And to do this, I'm going to use the Azure
Static Web Apps VS Code extension again.
This time we're going to choose "Create an HTTP function".
And I'm going to choose "Python".
And then I get to choose my version of Python.
And then I'm going to call my function "contact".
And here we go. This is our function.
And we can quickly try out this function just by
pressing F5.
It's going to go and start up the local emulator
for us.
And then I can click on the URL... and here
it is.
Here's my function. It's really simple
hello world thing that's provided to us.
You can see that I put in my name and
it's saying hello back to us.
And the next thing that we want to do is
to change this function so that it can send an
email.
So Azure Functions has a concept of
input and output bindings, and you can use these bindings
to talk to external services without writing any code.
You can see in my function.json,
I have an HTTP trigger defined.
But I can add more bindings here. And what I'm going to
do is
I'm going to add an output binding to SendGrid by
just right clicking
on the file and saying "Add binding".
And then I'm going to go ahead and choose "SendGrid"
as the output binding,
but you can see the other bindings that we have
supported here as well.
I'm just going to name it "message".
And then I need to create a new app setting... and
this app setting is for saving the SendGrid API key
so that we don't
actually, you know, store that as hardcoded in
the code and check it into source control.
I'll call this setting "SENDGRID_API_KEY".
That sounds like a good name.
And then I'll go ahead and paste in the value.
And then in the email that I send,
I also need to provide a To address as well as
a From address.
I'll give it a subject,
let's call it "Contact form".
And then I'll just leave that message text blank,
because we're going to fill that out in the function
itself.
So there you go. You can see that it's added
the output binding for us in this function.json
so we don't really have to worry about,
you know, like the format of this or how to
type this out.
Alright, so now we're going to modify our function to
use that output binding.
We're going to pass that in as a parameter.
We're going to create some message text to send in
the body of the email. And to send something, we
just have to pass a piece of JSON that represents
our message to the output binding,
and then, lastly, we're going to redirect the user back
to our homepage.
And another thing that we have to do is we
have to make sure that we modify our form to
call our function.
And the URL of the function is "/api/contact".
And that's all we really need to do.
So the next thing we want to do now is...
...let's build our site using Hugo.
And just by typing the word "hugo",
it's built it, and if we look into our "public"
folder you can see that this is the output of
the site.
And then, as I mentioned earlier,
Azure Static Web Apps has a CLI that you can
download.
You can get it from npm.
I already have it installed and you can just type
"swa"
to use it.
So to start up our emulator locally,
I'll type "swa start", and then I need to give
it the "public" folder.
That's the static assets that we wanted to serve, as
well as our "api" folder.
And when we run it,
it's going to start up.
And the emulator is going to be accessible locally on
port 4280.
And let's go open our browser and go to
http://localhost:4280.
And there it is. There's our site.
We're going to click on our post and here's our
form.
We're going to quickly fill it out.
And click "Send".
Looks like it's worked. Let's go and check my email
to really confirm that it's actually working.
And there it is. There's the email,
awesome!
So what we got to do now is deploy
this new version of our site with the API
to Azure.
And the only thing that we have to do is
to make a commit to our Git repo, and then
just push it to GitHub, and the GitHub Action
is going to fire and it's going to build and deploy our
site.
And we actually need to do one more thing,
which is to configure the SendGrid key in Azure as
well.
So there's a gesture in VS Code to do this,
and this will do right now.
And then let's check out the site. It's already
live, and I will just try filling out the form.
And then pressing "Send". And then fingers crossed...
...looks like it worked! Let's check our email really quick.
And there it is. There's our message. And that's how
easy it is to deploy a Hugo site along with
a Python API using Azure Static Web Apps.
Please go and check out the service and let us
know what you think.
Thank you! <3