>> Do you know how easy it is to deploy
a Serverless API with Azure Static Web Apps VS Code extension?
Very easy.
My name is Aysegul, I'm a Cloud Developer Advocate at Microsoft,
and I will show you how to deploy your Serverless API in minutes.
Go to start with a code template from
Azure Static Web Apps Learn module.
You can find the module at
aka.ms/learn/staticwebapp or on
GitHub at aka.ms/github/staticwebapp.
Once you create your repository from the template,
you can clone and download your repo or use Codespaces.
To learn more about the Codespaces,
go to aka.ms/github/codespaces.
I will be using the code spaces and VS Code
remote Dev container for functions and node.
Whichever you prefer, what we will do
to create the API is going to be the same.
Once you have your code in VS Code,
let's install the dependencies and run the React App.
Put up an internal terminal by using the shortcuts
Control Shift P and selecting create new internal terminal.
Change directory by typing CD React App, on your terminal.
Once you are in the React App folder,
you can npm install and run the app with npm run start command.
If you are running on your local environments,
you can see your app by navigating to localhost at port 3000.
If you're using Codespaces,
it will automatically open a new tab with the code running.
As you can see, the product data is not loading.
We will write to get GetProducts API function to
get the products data from our Serverless backends.
Let's rename the API starter folder as API.
By typing the command git mv for move for move API started to API,
or the root folder,
change directory to API and run,
funk start, to run the functions.
Oops, says no such command.
That means you don't
have the function's core tools installed on your machine.
There are two ways to add the tools to your local environments.
You can install the tools on
your machine at aka.ms/downloads/functionscoretools.
Or you can use a remote development container.
I will use the container.
Control Shift P to open the command palette and
type in add development container configuration file.
From the dropdown options select more
and sign the functions node configuration.
Now we have a new container configuration
I will need to rebuild to see the changes.
Let's go into our API folder again and run
the funk start commands and woah, it all works.
You can see the port or
ridded lists for functions on the port stab as well,
numb to functions are running on your local dev environments.
We need to avoid them to Azure,
let's start by selecting the subscription.
We will deploy it to by Control Shift P and select Subscription.
You might need to sign into Azure account if you already haven't.
Now I install Azure Static Web App extension,
as well as functions extension.
I want the JavaScript and TypeScript extensions
too think about remote DO container is
that I can install only the extensions I want for
this project and fade into the demo container dot JSON.
That way, my VS Code is much
faster and when I share this project with you,
you can have exactly the same extension and install.
If I'm working on a different machine,
still, I have exactly the same settings.
Now let's check everything is working.
Go into React App folder and run start
command to see, oops, another error.
The solution is logged down.
We need to run npm rebuild, node SaaS,
and start the app again,
and it all works again.
Let's deploy this app as an Azure Static Web App.
Control Shift P for the command palette and create Static Web App.
I will choose advanced options.
We are prompted to type in a name for our app,
then choose a resource group or create one.
If you're not sure whether resource group is,
it is very much like a folder to
hold of your related resources together.
You can create as many as you want.
Then choose free or standards if you like.
Choose the project type.
I'm deploying the React App but you can
choose to deploy any other framework on this folder.
Enter the app location,
it is react-app folder in my case.
Enter location for function app,
which is the API folder.
Finally, the location is the closest location to you.
I'm going to choose West US 2 because I'm in San Francisco.
Now the Open actions in GitHub button pops up.
Let's see what our actions are doing.
I can see it log deployment process is
running that I didn't need to worry about.
It is all set up for me by Azure Static Web App extension.
This is really making me happy.
It is like having a co-worker who takes care of all
of the continuous deployment processes for you.
I can also right click on my Azure Static App extension to view
our app on Azure Portal or on the browser if it's done deploying,
you can see the unique URL that
the Azure Static Web App created for our app.
You can later use your specific domain name for the site.
If we click on the URL,
we see that everything is deployed and working except we
haven't written the function that gets the products data.
Let's go into API folder.
We have delete posts and put API endpoints,
and we need to write GetProducts.
Again, Control Shift P,
or you can use a F1 function for command palette,
choose functions, extensions, create function commands.
Choose HTTP trigger for
templates because we will respond to an HTTP,
GET requests for products call.
Name it products-debt for clarity.
An authorization level, I will
choose anonymous for the demo purposes,
but you can implement authentication later on.
Now we have a new products get folder under API
and a simple function that responds to an HTTP request.
Let's look at the functions that JSON file.
This is where we configure our function as a default.
It has two different methods, GET and POST.
We want this function to respond only to request
because we have another function for POST request already.
I will delete posts and add
a route parameter with the value of products.
By default, when you create a function for an HTTP trigger
the function is addressable with
the route that ends with the function name.
Here we are specifying it to be
the products instead of products get.
Finally, I will change the
index.js function logic to get the data from
the shared products data file in respond
to the request by sending to data is a JSON.
For a 500 error message.
You won't have to worry about cores when
you are publishing to Azure Static Web Apps.
Azure Static Web Apps automatically configures your apps so it
can communicate with your API on Azure using a reverse proxy.
But when you're running locally,
you need to configure cost to allow your web app,
an API to communicate.
Create a filename api/local.settings.json,
and add a host course value to be localhost 3000.
Note that localhost settings.json is ignored in Git ignore file,
which means that it will not be pushed to your GitHub.
This is because you could store your secrets in this file.
Since we are assigning into Azure Static Web Apps extension,
we don't have to worry about our secrets
or API endpoints configuration here.
Now we can run the API by typing funk start in API folder.
We hand the data coming in from
our HTTP request response and filling in the products.
Still, the functions are running on our local environmental.
We need to deploy it.
One of the thing I want to show you is how we
get an automatic preview or our me have
a pull request to the branch that is automatically
deploy in our GitHub actions.
Let's check out a new branch called API and
commit and push to origin API branch.
When we make a pull request to the main branch,
CD actions are running a deployment scripts again.
When the deployment is done,
you can see the link to the URL with your new branch changes.
Come on, this is really cool.
Anyone doing a code review can easily see
you're running code changes too,
no more it works on my machine arguments.
Now I merge the changes to
the main branch and they are automatically deployed to production.
This is the lot of automation that
I didn't have to worry about writing.
Happy deployment to you all.
[MUSIC]