>> Hi everyone. My name is Yohan and I'm
a Senior Cloud Developer Advocate working at Microsoft.
In this video, we'll see how you can create
a function's API in your Azure Static Web App.
First, what is Azure Static Web Apps?
It's a service that provides globally distributed
static website hosting that's deployed
from a single GitHub repository with
a CI/CD pipeline using GitHub Actions.
Among other nice features that it provides,
you can easily add
a serverless API to your website with functions.
We start by creating a new app and deploy it to Static Web Apps.
For that, you'll need a GitHub and an Azure account,
both are free to create.
Look at the links in the video description
if you need to create one.
Now, let's open this URL
so we can create a new repository from this template.
Enter repo name, for this example,
I'll put My Static Web Apps API,
make it public, and then
select ''Create Repository From Template.''
When you're new repository has been created,
we'll clone it locally.
We copy the repo URL here,
then go back to the terminal.
Git clone, that's the URL,
wait a bit, and now we can open this project in VSCode.
What we'll do first is install
the Azure Static Web Apps extensions
and then we'll deploy this app.
In the extension's tab,
search for Static Web Apps and install this extension.
Now open the common palette with F1 and type Azure sign-in.
It will move you to the browser,
prompt you to enter your credentials. We arrived in.
Now we're going back to VSCode,
if you look at this project,
it's a bit unusual as it contains
the same client web app but built with different frameworks.
You can see that there's Angular,
Vue, React and the belt apps.
I picked React for this example,
but you can choose whatever that's more familiar to you.
Now open the command palette again with
F1 and search for Create Static Web App.
Type a name for your app.
I'll put for mine My Static Web App API.
Select custom for the build presets as our repo,
as I explained before,
as a bit of general structure.
For the location of your code,
you select manually into a location,
then type in React App.
If you choose to deploy
a different version of the application with a different framework,
just use whatever is suitable for you.
Other API, choose skip for now,
as we'll see that later.
Now it needs to know the location of the build outputs.
It is fine for our React app,
but it may be a bit different depending
of the framework you've chosen.
Finally, select a location near where you live.
As for me I'll choose West Europe.
Then it will create the app.
Once the app is created,
you'll see this notification,
select ''Open actions in GitHub'' and it
will take you to the GitHub workflow pages.
The deployment will take
a few minutes from now so in the meantime,
we'll take a look at what the GitHub Actions workflow looks
like that was created by the VSCode extensions.
You can see directly in GitHub
the logs for all the steps that are being executed.
That may be really helpful if anything goes wrong at any point.
After the workflow is finished,
you can go back to VSCode and open the Azure tab.
In the Static Web Apps sections,
right-click on my-swa-api and choose Browse Site.
It will open the website in the browser
and now we have our static web app.
But as you can see, it's stuck on this loading message,
that's because there is no API yet.
Now we focus on creating this API.
First, let's pull the changes by clicking on the refresh icon
in the status bar to bring in the workflow file that was created.
Now, it's time to create the missing API.
Rename the folder API Starter into API.
This folder contains the function projects that
will get deployed alongside your Static Web App.
Now, we need to create a new function.
Open the command palette again with F1 and type
in Azure Functions Create Functions.
Choose HTTP Trigger.
For the function's name, type,
products-get, and choose Anonymous for the authorization level.
Now, instead of
this Hello World boilerplate function that we have here,
I just copy paste this function code.
What it does is get the list of
products that could come from a database and return it.
Otherwise, it just will return an error.
For now if we look inside the data,
the product data is just a plain JavaScript object.
You may change that later to plug in into a database,
but that will do for this example.
Now open the file functions the JSON.
This file contains all our function's settings.
In there, as we want to implement a get function,
we don't need that post here in the methods list.
We'll add a new parameter that's called
Root with the URL products.
That's where we want to be able to call these functions.
Now, it's time to commit everything that we
did and push our changes to GitHub.
If we look at the GitHub workflow,
you can see that by default it finds
an API folder and that's what will be used during the deployment.
Now let's go back to our GitHub Action tab there.
You can see that because we pushed new code,
a new deployment workflow has started.
When the workflow is finished,
let's take a look at our website again.
Just a small trick, right from within the logs you can
scroll down here in the build sections,
and you can find the URL for your website in case you
just forgot it or if you don't have VSCode at hand.
There we have the list of products displayed.
That's it. You've now seen
all the basics to create your own full-stack,
server apps web apps.
You can find everything I've used
in this video in the description below.
If you want to learn more about Static Web Apps and API,
take a look at the learning tutorial that's linked there.
See you. [MUSIC]