>> Hi there. I'm Christopher Harrison.
I'm a Senior Cloud Advocate at Microsoft.
What I want to take a look at in the next two videos
is a little starter project that you can use to get up and
running with Azure Static Web Apps and
a MongoDB API driven database using Mongoose as your back end.
Now this is all built around
a starter project which you can go grab from GitHub.
Eventually what we're going to do is we're going to simply hit
"Use this Template" to be able to create our own copy of this.
Now, before we actually do that,
I do want to explore the code a little
bit so you can see what it is that we'll be deploying.
I've already got this open inside Visual Studio Codespaces.
You'll notice that there's really
two key folders here, public and API.
Now, there are docs here as well,
so if you want to go through and
read about everything that you can do with this,
you can go check that out there.
But the two folders I'm going to focus in on are public and API.
Public contains our front end.
Now, if we take a look at this,
what you'll notice is my index is going to be set
up to display out a little task manager here.
We're going to have our list of tasks,
we'll have a little form that will display
out a textbox for you to then add on a task.
The tasks that are going to be
displayed will give you a little toggle checkbox that
you can use to go ahead and either
mark it as complete or not as complete.
This is all built around a Vanilla JS JavaScript file,
and you can go back and read this on your own,
it's very heavily commented,
an awful commenting code.
This is probably a little bit too much,
but I want to make sure that everybody
understands what's going on here.
Now the reason that I built this with Vanilla JS is because
this is designed for you to continue to build upon from there.
If you wanted to update this with view or felt or otherwise,
you could go ahead and do that.
What you'll notice if we scroll through this real quick
is there's a little function here to go load all of
our tasks and that's going to call an API that we're going
to set up that will give us all of our tasks.
We've got a couple little helper functions to update the display.
If I keep scrolling down,
you'll notice there's a little update task
that will then mark a task as completed or not.
Then finally, we've got our inline for
creating a brand new task right down here.
All of this is built around a little back-end
here that's going to be set up using
Azure functions inside of Azure Static Web Apps.
What you'll notice is we are going to use Mongoose here.
We're going to read in
the connection string as an environmental variable.
We're then going to set up our task here.
We've got our title and then we've got our completed,
which is going to be a Boolean.
Then if I scroll down a little bit further here,
what you're going to notice is we've got
all of our crud operations,
well, with the exception of delete,
so we've got get all tasks,
we've got create task,
and we've got update task.
All of those are using
the core syntax that you would use when you're using Mongoose
and that's one really nice thing about using
Azure Static Web Apps is the fact that if you're
already familiar with Mongo or Mongoose,
you can continue to use that.
There's the sample app that we're going to set up and deploy.
In the next video,
we'll see how we can create a copy of
that template and deploy this out into Azure Static Web Apps.
[MUSIC]