alright let's head over to the azure
portal and go ahead and click the plus
sign here and we'll create a new Cosmos
DB database so we go to databases and
then scroll down and Cosmos DB that's
the one we want click create and then
we'll give it a name I'm gonna call my
now react cosmos DB and I've already
created once it's gonna tell me this
names already taken we'll ignore that
for a second then we need to choose an
API now cosmos DB is one of the first
databases that I've ever seen that has
multiple API s so you can use the SQL
API which they call document DB MongoDB
which is the one we're gonna use it's
very familiar gremlin and then a key
value store so we'll choose MongoDB for
now
I mean create a new resource group this
really can be anything it doesn't matter
we'll just call it Burke's react stuff
which also already exists so I can
really just use existing here Burke's
react stuff and then we'll select the
default location pin to dashboard click
create I'm not going to click create
because I've already created it you can
see it's over here on my dashboard right
here so once we've got that done we need
to install some dependencies for our
application be able to connect to the
database all right the first thing we're
to do is install NPM install Mongo DB
and save that Mongo DB is the NPM
package for connecting to Mongo DB so
we're gonna need that to connect to
cosmos DB because that's the API we're
using so it just reuses that same Mongo
package and then I also want us to
install something called Mongoose which
is an API that sits on top of Mongo and
makes it a whole lot easier to work with
Mongo databases and this also is going
to apply to cosmos DB so we're just
gonna use this Mongoose package to make
it very nice and easy for us as
developers ok with our packages
installed let's head over to Visual
Studio code and get cracking on this
database connection now we're gonna need
to define our database connection so
let's do that first I'm gonna create a
new file called Mongo and inside of this
file I'm going to bring in mongoose and
require that in from the mongoose
package another thing that i want to do
is i want to go ahead and override
mongooses default promise api and
replace that with a global promise api
the reason for this is that mongoose
originally had its own implementation
promises
now that they're part of the JavaScript
runtime we want to use the ones that are
built into node so that's what we'll do
and now I want to create something
called an environment variable and
inside of that we're gonna have a DB
name we're gonna have a key and we're
gonna have a port okay we'll put that to
zero for now and this is all of our
connections specific information stuff
we don't want anybody to see and I'm
putting this in an environment variable
so that we can hide it later and I'll
show you how to do that now we need to
fill in these properties so let's go
back to the azure portal and I'll show
you where you can find them if you go
into your cosmos DB database
scroll down to connection string here
click and you can see we've got the host
here the database name is just the first
part of this react cosmos - DB so we can
put that in here okay and then the key
is this password right here and we can
copy this right here with that button
that'll work and then just paste this in
again these are private things we don't
want anybody to see and same with the
port our ports one zero two five five
copy that in as well
okay now let's define the connection
string and I'm just gonna copy and paste
that in then we'll talk about it alright
here's our connection string let's go
ahead and collapse this we have more
real estate here it looks like this
MongoDB colon slash slash comes like
HTTP right and then the database name
colon and then the password at the
database name fully qualified documents.azure.com with another colon here at
the end and the port and then SSL is
true now if you ever get confused I
think I'm never gonna remember that
don't worry you don't have to back here
in the portal it's just right here I'm
just substituting out these things the
variables so I can switch them out okay
let's define a function that will enable
us to connect and we'll just call it
connect and then inside of that we'll
just return Mongoose and then say
Connect
there we go and then we'll provide the
Mongo URI and then we're gonna provide
some options here and we're gonna say
use Mongo client is true because we want
it to use the MongoDB package that we
pulled in to connect to Mongo and that's
what it will do if we provide this here
instead of the one that Mongoose comes
with and then let's just export this
stuff back out some module exports
equals and we have a connect function
and we have the Mongoose object which
we're gonna use later on and now we want
to revisit this environment variable
here now remember I said we want to keep
this stuff private and we don't want
anybody be able to see it and it's not
very private right here is it no it's
not so let's fix this I'm gonna cut this
out here and then I'm gonna create a new
file and I'm gonna put it actually let's
start with a new folder and call it
environment and then inside of that
let's do a new file called environment
okay now we could have environment -
prod environment - QA environment - dev
whatever but for our purposes we're just
gonna have one file that contains our
connection information and then we'll
just module.exports = env
okay now that we've split that out we
need to include it back in so let's just
come in and say up here at the top
const env = require and then
environment environments hard to spell
environment okay so now we're pulling
that file in from over here
same exact variable same structure just
being pulled in from a separate file and
now what we can do is we can in our git
ignore if we come down here we can say
we've got secret stuff that we will want
to ignore so we can just say environment
/environment.js and what the net
effect of this is we will not check this
file into source control so our secret
key all the confidential information can
end up in github where other people
could see it this is one method of
handling sensitive information cool our
connection is all set what we need to do
now is create a file which will model
for Mongoose what a hero object looks
like in our database a hero model so
let's do that so I'll create a new file
and let's just say that we'll call it
hero-model.js and drop it right in
the server folder I'm just gonna go
ahead and copy and paste this in so you
don't have to watch me type all this but
we're bringing in Mongoose again we're
bringing in schema which comes off the
Mongoose object which we brought in here
and then we're defining a new hero
schema it's a new schema and these are
just the fields that are in our schema
we have an ID which is a type number
it's required and it's unique and we
have a name and a sink so really we're
defining our database table here this is
where did we define the new model for
Mongoose here and then we just export it
back out and now we're ready to connect
to the database and read data create
data update delete all of that stuff and
that's what we'll do in the next episode
I'll see you then
