So, what I want to is open up a new tab and google heroku or just go to heroku.com. Now once that's up you're not going to see much, so create an account and login. And what I want to do is, once you're in your account here.

Let's go to the documentation actually, so I'm going to click on this and I'm going to click on the documentation.

let's go ahead and select Node.js

so let's go ahead and click on this Get started with Node.js

and you will see that we are brought to Introduction

And then let's hit I'm ready to start and then we need to go into our code here and we need to look at our package.json. So open up your package.json and lets close out our terminal so you can see our package.json.

Then lets go to the scripts section and you'll see that we have this script called heroku-postbuild so let's go ahead and open up a terminal window so I'm going to hit command + j in VS code and I'm going to say

Terminal

npm run heroku-postbuild

so I'm going to run that and its basically going to run npm run build. So at this point what you need to do is just make sure you have heroku installed on your machine so just go ahead and download it and make sure it's installed and then what you want to do is run heroku login in your terminal.

Terminal

heroku login

So I'm going to go back to my terminal and you are going to want to type this into the terminal after you type that build command. So I'm going to clear my terminal and then I'm going to type in heroku login. Now I've already logged in so I assume its going to tell me but I guess it wants me to login again so I'm going to do that.

Alright so I'm logged in, make sure that you are logged in as well. Now what we can do is scroll down here on the heroku documentation. and we have already done this so just check your versions make sure that's all correct by putting these commands into your terminal.

node --version
npm --version
git --version

The node version should be above v8.11.1 and then npm should be above 5.6.0 and I have 5.8 so we are good with that one. And then with git if you went through the last guide we should be fine, so git should also be above 2.15.1, okay so just make sure thats all good.

Now what we want to do is say I've installed the Heroku CLI

and then it says prepare the app, so we need to do is not clone it but we need to basically just make sure we have it set up. So I just wanted to make sure we had heroku installed, so make sure you have that installed.

Then what we want to do is basically let's just go to our account, and what we want to do is hit new, and then create new app.

And then call it what ever you would like, I'm going to call it birthday and thats probably taken so I'll call it birthdaycountdown and then we want to click on create app.

So we have it installed, that was the last set of steps.

Now what we need to do is make sure that we are logged in, and then we need to push it up to our app. This will only work if you are logged in so make sure you put in the right name. So make sure you are logged into heroku here in the terminal.

And then what we want to do is basically copy this command so heroku git:remote -a birhtdaycountdown so I'm going to paste that in. Now obviously your name is going to be different so you are going to use heroku git:remote -a and then what ever your app name is.

Okay so we've set the remote and in the last video I told you about remotes a little bit. And we can only see origin but if we type in git remote you'll see that we have two remotes, you'll see both heroku and origin.

So basically we are pushing our remote to two different places, so there are two copies. Now all we have to do is just push it up, we've already made commits we don't need to do this add/commit right now we don't need to do it until we make new features and want to change them.

What we need to do now is push it up and it actually says that right here under the Existing Git repository. It says for existing repositories simply add the heroku remote. So all we needed to do was just run that last command for setting the heroku remote.

Now all we have to do is go into our terminal and say git push heroku and if you did those last steps correctly where you had the right dependencies and you logged into heroku then that should be working and this will push it up.

Okay so lets go to our application here in our chrome tab and lets hit open app here at the top.

it's likely not going to work yet it just says heroku welcome to your app.

A couple reasons for that are one we haven't even finish pushing and running our application yet, and another reason is that it takes a few seconds after we do that for it to be up on heroku.

So let's do this, okay sorry my software is updating thats where this software license agreement is coming from.

Okay so now that that's happened all we need to do is open it up in the browser, so put in your link you should be able to get to this from Heroku and you'll see that we now have basically the same thing we're running on our localhost, so the localhost and this new heroku tab look the same.

Okay, so that puts it up live on the internet go ahead and try going to it on your phone or another computer and you'll see that it brings the same content up to heroku.

I'm going to close out of heroku and I'm going to close out of this heroku app, and we're just going to put all this heroku stuff aside we know our applications running and just wanted to get you through that so you could learn how to do that initially but we're not going to be dealing with heroku until near the end of this application.

So I'm just going to close out all of my tabs in VS code. We didn't change any code so we don't need to make any commits, let's just move on to the next video where we will finally start building our application and talking about CSS grid.

Resources

Source code