- [Instructor] Okay, now that we've got our front end
and backend running on the same server,
the next thing we're going to do
is set up Heroku to host our app
and MongoDB Atlas to host our MongoDB database.
So the first thing we're going to do
is create a MongoDB Atlas account,
which you can do
by just going to mongodb.com/cloud/atlas.
If that URL changes,
just Google for MongoDB Atlas
and you should find it.
And then what we're going to do
is we're going to click on start free
and I'm just going to use Sign up with Google
and I'm going to click accept privacy policy
in terms of service
and click Submit.
And that'll show us a fun little animation
and then bring us to what sort of cluster we want to use.
Now, I'm assuming that you want
to do this tutorial for free,
so what we're going to do
is select this Create a cluster
starting at free thing,
and we're just going to leave the default values,
click Create Cluster,
and it's going to take a little while
to deploy our actual clusters.
So while it's doing that,
let's head over to Heroku
and create an account there,
which you can do by going to signup.heroku.com,
and unfortunately this one doesn't seem
to have a login with Google option,
so I'm just going to put in my information real quick,
and we're going to select Node js
from this primary development language thing,
although I'm not actually sure
that that makes a difference.
And finally, once we filled all that out,
let's click CREATE FREE ACCOUNT
and of course,
we just have to go over to our email
and verify that we actually own that email address.
So I'm going to do that in another window here
and over in my other window
it's asking me to create a new password,
which I'm just going to do here
so you won't see it,
and then I'm going to click on set password and login.
Okay, and once we get through those many steps,
that's going to bring up this dashboard here.
And what we're going to do
is click on Create a new app,
and for this app name
we're going to call it something like full stackvue.
You can call it whatever you want,
and if that name's not available,
then you might just have to add some numbers after it.
And you'll want to choose
a region that's closest to you
and then click on Create app.
Okay, so now that we've done that,
let's check back on our MongoDB Atlas thing,
and it looks like that's all set up.
So what we need to do now
is we need to actually populate this Mongo database,
the same way that we did
for our local database
running on our local machine.
So in order to do that,
what we need to do
is click on Connect
and we're going to need to whitelist
our connection IP addresses.
So what we're going to do
is click on Allow Access from Anywhere
and we're going to click on Add IP Address
and the next thing we're going to do
is create a database user.
For the database user here,
I'm going to just call it fsv-back-end
since that's what we'll be making the requests.
And for the password,
I'm not going to use anything super secure
or complicated
although if you plan on keeping this app around
after you create it,
you should definitely choose a secure password.
And then let's click Create Database User
and now that we've done that,
let's click on this,
Choose a connection method button down here,
and we're going to click
on Connect with the mongo shell.
Basically, what we're going to do
is we're going to connect
to this Mongo database instance
through our terminal
on our local machine.
So we're going to click on,
I have the mongo shell installed
since we've been using that,
and in order to find your mongo shell version,
you're just going to have to go back to your terminal
and type in mongo--version
and that'll give you your version number
which you should select from the dropdown.
And once we've done that,
it's going to give us this connection string
that we're going to copy
and paste into the terminal, okay?
And we're going to want to go back in here
and connect to a specific database name.
What we're going to do is call ours
vue-db, just like that,
and for the username
is going to be fsv-back-end
and it's going to ask us
for the password that we had,
I'm going to enter that now
and that'll run,
and we should be successfully logged in
to the mongo shell
for the cluster that we created on Mongo Atlas.
So this is no longer a database
that's running locally on our computer.
So what we want to do,
and this is going to be
a bit of a tedious process unfortunately,
but what we're going to do
is we're going to populate our instance again,
just like we did via the command line.
So what we're going to do
is say db.products.insertMany, okay,
and I'm going to copy
and paste the objects
that we had from before.
Feel free to search those out
and copy and paste them in here,
just like before.
Okay, and once we've done that,
we should see that the 12 products
were successfully inserted into the database
and then we just need to insert our user object as well.
So we're going to say db.users.insertOne
and the ID here is going to be 12345
just like before
and the cart items
is going to be an array
with the IDs 123,
234
and what the heck,
we'll do 789.
And there we go.
That should tell you
that it's successfully inserted
one record into the user's collection.
Okay, so that's all we need to do
with our Mongo instance.
So we can press Control + C to exit out of it,
and once we've done that,
the last thing we're going to do
is install the Heroku CLI,
which will allow us
to interact with the Heroku app
that we created here through the command line.
This will be very important
for actually pushing our code to Heroku.
So the way that we do that on a Mac
is by saying brew tap,
remember that we installed Homebrew earlier,
we're going to say brew tap
heroku/brew
&& brew install heroku,
and hit Enter,
and that'll install the Heroku CLI for us.
And it looks like my permissions
might be a little messed up
so let me run this command
that they tell me to run
and let's try that again.
Okay, so it looks like that worked successfully.
Now another way to install the Heroku CLI
would be by running npm install -g heroku,
and this might be nice for you
if you're working on say windows.
Okay.
So once we've done that,
we're going to have to actually log in
to the Heroku CLI
in order to show it
that we actually have permissions
to operate on that project.
And to do that,
we're going to say heroku login
and then it'll say,
press any key to open up the browser,
and it'll bring up this page for us in our browser
and just click Log In,
and there we go.
So it should say now successfully logged in as
with your email.