- [Instructor] Okay, so now that we've got Heroku
and MongoDB Atlas set up,
it's time to make a few changes to our server
to make it take into account the new locations
of our resources.
So the first thing we're going to do
is we're going to go over to our fsv-back-end
and open up a terminal there.
And the first thing we're going to do
is inside this terminal, we're going to run heroku create.
And what that'll do is create a new Heroku application
and connect our app to it.
So before we actually deploy our back-end,
there's going to be a few things that we want to do.
Because first of all, not only did the location
of our Mongo database change,
but it's also now protected by a username and password
and the database name may well not be the same.
Although in our case it is, but in many cases it's not.
So what we're going to do
is set some environment variables on Heroku
that our server can look at and know exactly
where it's supposed to send its requests for Mongo.
So in order to do that,
we have to run the command heroku config:set,
and then the name of the environment variable we want to set,
in this case it's MONGO_USER
and the value that we want to set it to.
In this case, we called it fsv-back-end.
And then we'll hit Enter,
and that'll set that environment variable for us.
The next one we have to do
is set our password environment variable.
So we're going to say heroku config:set,
MONGO_PASS equals, and this was the password that I put in,
although yours definitely should not look like that.
The only reason I did it this way is
because I knew you were going to see it in this step
and let's hit Enter, and it'll set that.
And last but not least, we need to set the name
of our Mongo database.
So in order to do that,
we're going to say heroku config:set,
MONGO_DBNAME equals,
and our database name was vue-db.
Okay, so now that we've set those,
what we're going to have to do
is open up our server.js file
and make our server actually take
into account those environment variables
when it does stuff like connect to the database.
So the first thing we're going to have to do
is everywhere that we call await MongoClient.connect,
we're going to have to change this URL here,
since we're no longer connecting
to Mongo DB running on local host.
So specifically what we're going to want to do
is go back to the Mongo DB Atlas console,
and click on Connect
and then click on Connect your application, okay?
And we're going to select Node.js here, 3.6 or later.
And then we're going to copy this URL that it gives us
that's the URL that we want to use instead
of the local host URL.
So here's what we're going to do.
We're going to create a template string here,
and we're going to paste that URL that it gave us.
And then we need to go back through
and replace the password and username and database name,
all those kinds of things.
Except the way that we're going to do that now
is not just by hard coding them,
we're going to actually insert the value
of process.enviroment.MONGO_PASS, right?
Which is the environment variable
that we set a little earlier with our password.
And then we're going to go over here to dbname
and we're going to set that to process.env.MONGO_DBNAME.
And while we're at it,
the username is hard coded into here,
but let's just change that to
process.env.MONGO_USER, okay?
So this will work,
but now we can actually run our server locally
without connecting to our production database
and that's definitely not ideal.
So what we're going to do instead
is we're going to use a turnery operator here
to check if these environment variables
are actually set.
So in our case, just for simplicity,
we're just going to check and see if MONGO_USER is set.
And we'll also check if Mongo pass is set.
So process.env.MONGO_PASS
and if those are, if those environment variables exist,
we're going to try and connect to our production database,
which is this big, long URL here.
Otherwise, what we're going to do is connect
to our local database,
which again is going to be Mongodb://localhost:27017.
Okay, and then down here where it says client.db,
instead of that we're going to say, process.env.MONGO_DBNAME
or vue-db.
Okay, so we're going to check to see if a DBNAME is set,
if it's not, we're just going to try and connect vue-db.
This'll allow us to still connect
to our local vue-db database.
So now that we've done that,
the only thing we have left to do
is replace this for all of our end points.
So that might sound a little tedious,
but I'm going to show you a little trick.
We're just going to copy this, okay?
And then we're going to do Find and Replace.
And what we're going to do
is search for mongodb://localhost:27017.
Make sure you get that exactly right there
with the comma and everything after it.
And we're going to paste what we just copied
into this Replace box.
And we'll probably just want to go through it one at a time.
For example, we don't want to replace that one,
but the next one we want to replace, so we'll replace it.
Next one, we'll replace that.
Next one, we'll replace that
and the last one we replace that too.
Okay, so we've replaced those.
The only other thing we have to replace now
is this const db, this big thing that we replaced there.
So let's go down to one of these and just copy that.
Okay, and we'll use the same technique.
So we'll find it
and then we'll copy this new version
that we want to change it to.
And that'll replace all of those calls with that.
So let's go through and replace them,
replace, replace, replace.
There we go.
Okay, so there is just one more thing that we have to do.
You see Heroku wants to be able
to tell our app what port it should run on.
And because of that,
it provides an automatic environment variable called port
that it wants our app to take into account.
So for app, listen here.
What we're going to do is say process.env.PORT or port 8,000.
So if this port environment variable is set,
as it will be on Heroku, then it'll run on that port,
otherwise it'll run on port 8,000.
So let's save our server file,
and that should be all we need to do for now.