>> Our application has now
been deployed or at least the front-end has.
Let's see how we can set up that back-end database.
I'm going to go back into Azure,
and I'm going to click "Home"
here and I'm going hit "Create a new resource",
and I'm going to choose "Cosmos DB".
Cosmos DB is a new little document database
that has a few different APIs that we can
use and a serverless tier
so that way we only pay based on consumption.
I'm going to click "Create",
and I'm going to put this into
that resource group that I set up earlier,
which is that tasks-demo.
On the account name,
I'm going to call this tasks-demo.
Give that just a second to validate. There we go.
On the API, we want MongoDB API.
That MongoDB API, you can
actually just use the MongoDB API if you wanted to.
Or in our case,
we can use Mongoose and that's what we'll be doing.
We'll put this into West US 2.
One big thing when it comes to performance in Azure
is making sure that all of
your resources are in the same location, in the same region.
So we'll put that into West US 2.
I'm going to scroll down here and choose "Serverless",
and then click "Review and Create",
and then click "Create".
We'll give this just a couple of moments to create.
This might take it a minute or two.
But again, because of the fact that you are watching the video,
you'll notice that it will complete about now.
With our database created,
now let's go in and configure our application to use it.
I'll need to go grab the connection string,
which I can do by clicking "Go to resource",
going to "Quick start" here,
and then clicking "Nodejs" because that's what we're using.
Then grabbing this connection string right here.
I'm going to click "Copy" here,
that will copy that to the clipboard.
Now let me update my application,
so I'm going to do this on Azure.
Let me open up that tasks-demo Static Web App.
Let me click on "Configuration" here.
I'm going to add in
a brand new configuration setting called connection string,
and then paste in that value here.
Let me hit "Okay" and let me hit "Save".
What that did is it created
a brand new environmental variable called connection string.
If I go back and take a look at my code here real quick,
what you'll notice is if I
scroll back up inside of my Azure Function,
that's what we're looking for here,
is that connection string.
So process.env.CONNECTION_STRING.
That's how we're grabbing the connection string.
Let's open up the right window. There we go.
That's the value that we created,
so connection string, and there's the value.
Now, let's go back to our application.
Let me hit "Refresh" here, give this a moment.
Now, nothing will happen because we don't
have any tasks yet inside of our database.
Let me create a brand new task,
maybe like record videos since that's what I'm doing right now.
I'm going to click "Add task",
and then now that appears on the screen.
I'm going to go ahead and put the little check there.
That's going to cross that out.
If I refresh the page here just to
prove that it is saving behind the scenes,
you'll notice that that's now checked out.
I could go ahead and uncheck that.
Again, hit "Refresh" just to
prove that it's coming from the database.
There it is, and away we go from there.
Over those three videos,
what we saw was how we could
create a project that's going to use Vanilla JS
in Mongoose to create an application
that uses a MongoDB API driven database.
We saw how we could use that template to create
that copy inside of GitHub
and then deploy that out to Azure Static Web Apps,
and finally, how we could create the database and update
our application to then use that database.
[MUSIC]