All right.
In this video we'll be wrapping up this section by actually getting our task manager app deployed to
production and when it's deployed to production and running on Heroku it'll be connecting to our production
database we created in the last lesson.
Now to get started let's just clean up our workspace a little bit.
The only file I'm going to leave open is a dev dot EMV so I'll right click that I will click close others
and then we're gonna go ahead and collapse all of the expanded directories using this little guy right
here.
Now we're still going to work in the task manager app though I just wanted to start with a simpler setup
without all of those open files cluttering the workspace.
Now the first thing I'd like to take a quick moment to do is to delete some stuff in the task manager
project that we're not going to commit and push up.
That is the playground directory which contains a couple of examples we worked through earlier in the
class.
Now you can leave the playground folder in the root of the node course directory in place.
I'm specifically deleting in the playground directory in the task manager directory.
So right here I'll go ahead and remove that and from here we're now going to initialize this project
as a repository.
And if you remember from a few sections ago we do that using get in it from the terminal.
Now from here we see that over on the right hand side we're getting a warning from Visual Studio code.
It's complaining that we have too many active changes and that only some of the features that VRC supports
will work.
And this is just because currently we are set up to track node modules.
We'll fix that by ignoring it in just a moment for the moment though.
Let's take a quick second to run and get status and we can see all of the stuff that would be committed
should we add it and run get commit right here.
We want to ignore node modules like we had done before with the weather application and we also want
to ignore the config directory.
The whole purpose of breaking those values out into environment variables was to make sure that they
don't get into the wrong hands.
So those are not something that we're going to commit and push.
If someone else wants to download our project and work on it they'll have to set up their own config
directory with Dev dot EMV to define these four values.
So what does that mean for us.
Well that means in the task manager project we're going to create dot get ignore to set up those directories
we want to ignore.
And the first is node modules
now after node modules we're also going to ignore config.
Then we can save the get ignore file and we can see that in the sidebar both of those are now grayed
out.
So the only things we'll be actually adding to the repository are these three files right here.
And whatever is inside of the source directory down below in the terminal.
Let's go ahead and actually create our very first commit.
Once again I'll run and get status just to take a look and make sure everything is working and right
here I no longer see node modules or config which is good.
Then we'll run get ad dot to go ahead and add everything in the entourage files area to the staging
area.
And finally we'll use get commit to create the commit.
So that would be.
Get commit with the M flag to provide our message right here inside of quotes and for an initial comment.
I usually use in it commit as my message.
Now let's go ahead and actually commit all of those changes.
And with that in place we're ready to take this project and actually push it up to services like get
hub and Heroku.
We're gonna start by setting things up on github and then we'll switch over to Heroku.
First up we have to create a new repository for our project on Github.
So I'm going to navigate over to the browser.
And like we did a few sections ago we'll go over to get hub dot com.
Now it sends the last time I worked with get hub in creating a repository in this class.
Private repositories have been added to that free plan which means you can convert your other get Hub
projects over to private even if you're not paying get hub anything.
And this new one you create could be created as a private repository as well.
So I'll use that plus sign with new repository to create it.
Let's go ahead and pick a name I'll use Task Manager API.
We can leave the description empty and down below.
I'll switch this over to private and I will create the new repository.
Now as we saw a few sections ago there are three ways we can get started.
And we wanted this one push an existing repository from the command line.
We just need to run these two commands.
Now we already explored what exactly these do.
So we can just go ahead and copy and paste them this time around.
I'll take the first command and bring it over here.
I will paste it into the terminal and run it.
That sets up the correct remote letting get know where it should push the code.
Then the second command is the command that actually pushes the code to the server for the very first
time.
I'll paste that in and run that as well.
Now once that's done we should be able to head back over to get hub.
We should be able to refresh the page and we see our actual code showing up which is great.
Right here we do have this as a private repository.
And I can see my source directory with my other configuration files.
So now that we have things in place with get hub we want to switch our attention over to Heroku.
Now in general the process is going to be pretty similar to what we did the last time we deployed to
Heroku.
The only additional consideration is that our application code now relies on these environment variables
actually existing and currently they're not going to exist on the Heroku app for us.
There's some commands we can run from the terminal to set those up so let's get started by creating
the Heroku application down below from the terminal.
I'll use clear to clear the terminal output and then after that we'll go ahead and use Heroku create
to create our new app.
Now as you remember you can provide a name right here for your application.
Otherwise Heroku will just pick a random one for you.
I'm going to use Mead hyphen task manager.
And remember this name needs to be unique across all Heroku applications not just those in your account.
So typically I'll prefix my app name with either my last name if it's a personal project or the company
name if it's for a client.
Now right here we can see that everything has been created successfully.
We have the U.R.L. that we'll be able to visit in the browser to view the application and we have the
repository remote which has already been set up for us.
We now have the origin remote to push our code to get hub.
And we have the Heroku remote to push our code up to her Roku.
Now before we push to Heroku we do want to set up those environment variables and we're going to do
that from right here in the terminal using a command known as Heroku config so we can use the config
command to set environment variables read our existing environment variables and delete values.
So right here to set them we use Heroku config colon set followed by those key value pairs.
So key equals value just like we have up above.
Now if we actually run this command it is going to set up the environment variable called key with the
value value and you can always see exactly what environment variables you have configured by just running
Heroku config with no other characters afterwards.
Right here I can see that for my application I just have one configured variable key with added value
value.
Now let's go ahead and remove this example one and set up the three real ones we actually need right
here to remove an environment variable.
We use Heroku config again this time though instead of colon set it is colon unset followed by the name
of the environment variable here it's key.
So if I run that it is going to remove it and if I rerun Heroku config to view the entire list we're
gonna see there are none.
Now let's go ahead and use Heroku config set once again to set up the real ones we actually need.
So right here Heroku config colon set.
We're going to start with JWT underscore secret and this name needs to match up perfectly with the name
up above.
Otherwise the code is not going to be able to find it when your app runs on Heroku.
Right here we're gonna set that equal to whatever value we'd like.
We can go ahead and just pick a random series of characters or use a password generator.
And next up we're gonna go ahead and set up the send grid API key.
So right here we can actually copy that from up above.
If we wanted to.
So I'm going to take this entire line.
Copy it to the clipboard and paste it down below.
So after a space we can set up another key value pair we want to configure I'll go ahead and paste these
send grid one in I'm going to fire that off and that's going to set those two environment variables
and we can see them right here and everything is looking good so far.
The last one we need to set is Mongo D.B. U.R.L..
And for that one.
Once again we need the connection string that Mongo DB Atlas provided us.
That means we need our connection string.
Once again we're going to head back over to the browser go back over to Atlas and we're going to navigate
away from the user's page and back to overview.
So we're switching from security to overview and we'll just click connect once again.
Now here we have those three options.
This time we're trying to connect to our database from our application and we will use these short s
our v connection string.
And down below we can copy that to the clipboard.
Now once again the user password is not embedded in this string.
We're gonna have to manually provide that.
So for the moment let's go ahead and actually add this up here in dev dot EMV.
And just so we can edit the string it's not going to live here.
Then we'll use it in another Heroku config set command down below.
So right here everything between the colon and the at sign that is where the password needs to go.
So I'll remove the place holder and I'll type my actual password my D.B. pass 0 7 followed by two exclamation
marks.
Now this has since been changed.
So if you try to connect using these credentials it is not going to work as expected but this is indeed
my connection string.
So I'm going to highlight the entire thing.
Copy it to the clipboard and then delete it from dev dot EMV.
So now that I have the finalized connection string we're gonna use Heroku config colon set.
Once again we're setting up Mongo D.B. underscore U.R.L. typed exactly like we had it above and we're
setting that equal to the following.
Now if you have a special characters inside of your U.R.L. you're gonna have to wrap it in quotes if
you're on Mac or Linux you're likely going to want to use single quotes if you're on Windows you're
going to want to use double quotes.
So right here I'll open up a single quote I will paste in the U.R.L. and add the closing single quote
on the end.
Now if we take a look at the U.R.L. structure we'll notice that we have a forward slash test right after
Mongo D.B. dot net.
That means we're gonna be working with a database called test and that is not what we had used before.
If we want to pick a different name for the database I can just remove test setting up something like
what we were using locally.
So over inside of the local host database we had what did we have.
It's right up here.
Task Manager API so I'll use the same thing right here.
Task Python manager Python API then we have a little query string which was added on setting something
called retry right.
True.
That's just gonna make sure that if a right does fail it's attempted again until it works and that's
exactly what we want.
Now we can actually go ahead and run this command and to set the environment variable and we're gonna
use clear to clear the terminal output and I'll use Heroku config.
One more time just to make sure all three environment variables are showing up and they are.
Which is fantastic.
Now up above you'll notice that we have important to find but we have not defined a port down below.
And once again that is because Port is maintained and managed by Heroku itself.
It's not a custom environment variable that we would need to set.
Now that we have this in place the only thing left to do is to push our code up to the server to do
that.
We'll use get push ups.
I'm currently typing up here.
Let's go ahead and not edit that file from the terminal get push her Roku master.
Now the Heroku remote was set up for us when we ran Heroku create.
So this is gonna get all of our code on the Heroku servers then Heroku is going to install all of those
dependencies and get our app up and running.
Now the first time this runs it'll take a little while just because it's the first time we're deploying
the app so it actually has to go ahead and grab all of the NPM modules later on it'll be able to use
ones in the cache and right here I can see that the process is almost complete and total it should take
maybe 30 seconds to go through.
Now if you do get any errors along the way and you open up a question in the course Q and A.
Be sure to include as much information as possible copying and pasting the output from the terminal.
Right here it looked like everything went well and we can see the are L where we can access our application.
What I'm gonna do is take that entire U.R.L. and I am going to copy it to the clipboard.
We're then going to head over to postmen and try to interact with the production version of our task
manager API.
Let's go ahead and move over to the postman app location.
Now if you remember when we first set up postman we did create environments.
I have task manager API in both dev and pride now for Dev.
We set up the U.R.L. but for production we never had an actual value to provide.
But now that's changed.
So over here we'll click manage environments.
We'll go over to the production environment and we'll set the current value for that you are El variable.
We created much earlier in the class.
So we have initial value and current value.
Initial value is used when you are collaborating with teammates which is not something we're doing with
postman.
So we can just paste the U.R.L. right in current value.
And the only thing we want to do is remove that trailing forward slash.
We want to end with her Roku app dot com.
Now if we click update and we closed down the manage environments mobile we can switch over to the production
environment by clicking the dropdown and selecting it.
Now from here we're actually running requests against our production instance.
And if I fire off a read profile request what do I get I get please authenticate now it should have
failed I haven't created a single user in the production database.
So this is a good sign.
It lets us know that our application is up and running and responding correctly.
Now let's go ahead and actually create a user in the production environment.
So I'm going to go over to create user from here I'll create Andrew 3 in the production setup I fire
that off and down below I get a 2 0 1 and I have my user and their token showing up.
Now let's go ahead and fire off read profile once again I should be logged in to the production server
and right here I can get my data back which is fantastic.
Now that we're able to read and write using our production API and the production database let's use
Mongo DB compass to view the data in the database and make sure everything works there as well.
So I'll navigate over to mongo DB compass and remember we have our local host favorite and our production
favorite.
We want to take a quick moment to connect to the production database down below.
I'm going to connect and we should be able to view our single collection.
Excuse me are single database.
Right here we have our databases and we now have a task manager API showing up we can see we have our
collection.
So let's go ahead and click on the database to check out our users we have just a single document.
And if I crack that open it is the exact data that we had just setup over inside of postmen.
Now from here we could go ahead and do other things such as creating tasks.
So back in postman I'll go over to create task and I'll go ahead and fire that off.
Now in body I have description fourth and completed false.
I'll go ahead and switch that up to something else something like store in production database I'll
send that off and we'll make sure that it actually shows up in the production database.
So once again navigating back over to the gooey.
And from here we can head back to our database and we can see our collections.
Now it's not showing up by default but if I do use command R it will refresh the data.
We can now see our tasks showing up and I can click over there to view the brand new task that we just
created.
So there we go.
We have a production database set up and we have our production application on Heroku with all of the
environment variables configured allowing it to do things like generate those JWT secrets manage the
production database and send emails when users create accounts or delete their accounts.
So now that we have this in place we have a production version of our task manager API up and running
and that's where we're going to stop for this section in this section.
We started by focusing on email sending with postmark and we wrapped up with a production deployment.
Now we're not quite done yet.
There is still one more section for the task manager app in the next section.
We're going to focus on how we can setup automated testing for our no J.S. code.
So we'll learn how to write test cases for our code to test all sorts of things.
I'm really excited to get to that topic because it is an important one.
So let's jump right into the section introduction for that.