Awesome.
Now we can start deploying to Heroku.
Please keep in mind though that this setup is not difficult.
However it is somewhat tedious.
The smallest mistake the smallest typo and you're gonna have to redo it.
And when I say this.
Trust me I've made more than enough errors myself.
So it comes from the place of experience and I'm going to head over to a Google search and we're going
to look for strappy documentation again.
So we're gonna go with strappy and then we're going to look for deployment so we're gonna go strap video
documentation and essentially we're just gonna follow the guides that they provide.
We're going to look for the guides that we have deployment and we're looking for a roll call.
Again you can follow the Digital Ocean if you'd want or Amazon a W us but Oracle probably is gonna be
the most straightforward one.
So first they say how you should set up Morocco which by the way we already have.
So they said get installed free Morocco.
Count on all that.
And then of course we do need to log in.
Then we would need to create a new stroppy project which we do.
We already have our project so we don't need to create a new one.
And before we do anything we just need to make sure that in our gate ignore we add package lock Jason.
So let's head over back to our application again.
Back in application.
I know I said this before but I'm gonna keep on repeating.
And then we just need to add our package.
Jason So we're looking for the file and we're gonna copy that and paste it and I'm gonna get ignored
is just a file that tells our version control which files are gonna be ignored.
All right.
So we have our package Jason.
Some design we would need to set up our initial commit.
So we're gonna head over back to our backend and we're going to clear everything in a console.
We're going to try to get in it.
So we're gonna initialize it as a get repository.
Then we're gonna say get add command.
So we're gonna add essentially all the files to a staging area.
Notice I have a dot that means all the files ones we have added all the files to a staging area.
Then we're gonna run get commit to commit all those files and then obviously we're also have some kind
of message.
That's the reason why I have high for them and we're just gonna type initial comment something like
that.
And once I run the command I'm going to clear the console and we're gonna head over back to strappy
documentation and we're gonna take a look at what we need to do next.
We would need to run Heroku create but just don't run the command yet.
What I would want is to run it with Heroku create and then whatever your project name.
Otherwise you're just gonna get some default name and even though you can change it later.
I think it's a bit more easier if we right away name our project so we're gonna head over to our application.
We're gonna write her a roll call create and then whatever your wildest fantasies.
I mean in my case I'm just gonna go with a react store and let's say API something like that.
I'm going to create a new project.
Awesome.
And then once we have created the new project then we need to make a decision and the decision is very
simple.
If you have set up your database in the strappy as Mongo DV So if you didn't follow the guidelines of
quick start then you need to follow the Mongo D.B. setup instructions.
If you have the normal one like we use the quick start then we're just using this posters again please
keep in mind you cannot mix and match.
You cannot use the quick start and then follow the Mongo DP guidelines.
Well technically you can do it but your app is gonna fail so we're gonna follow the post dress.
Again I know I'm going to repeat this probably again 47 times but we're gonna use the post office and
again that is one of those mistakes that I made myself.
So again I'm not trying to be condescending but I'm trying to make sure that we all are on the same
page.
And then we need to have a add on.
So we're gonna need to run this Heroku add ons and then we're looking for this supposed dress hoppy
dev and let's copy the command.
And as you see there's just a bunch of copying pasting.
And while I was talking I didn't notice that the name was already taken.
So let me try it one more time.
Roll Call create.
I'm gonna go with tech vintage tech sorry vintage tech store react API so hopefully that name is not
gonna be taken it is creating the new app and awesome now I have the app and in this case I am going
to copy and paste the command and we just talked about the Heroku items and then once we copy and paste
that command and once everything is done then we're gonna need to run a Roku config and essentially
Heroku config returns a string and we just need to pick environment variables from that string.
So we're gonna need to have a database user named variable so we'll just grab the first one up to a
colon.
Then after that we have a password and as you can see here they have a very nice explanation of where
our environment variable values are located.
So just make sure once you add those values you are doing it correctly without any typos.
Again I might send typos and then your deployment fails.
Right now my preferred method is using dashboard instead.
So even though you can do it from the terminal I prefer using the dashboard and I'm going to show you
how we're going to access that.
So first I'm going to head over to our dashboard and then within the dashboard I'm looking for my app.
Notice how I created the app and then if I want to setup environment variables I need to head to settings
and then within the settings we're looking for reveal config pass and once we're on the Heroku config
then you right away are gonna see the URL here.
You can assign the values for environment variables directly within the dashboard here but I'm also
gonna run one more time in my terminal because I just find it easier to grab those values because if
I would want to grab them here then I would need to make each and every time the window bigger and then
close it and open it.
And again I just find it easier to run Heroku config in my terminal config in the terminal but I'm gonna
setup my environment variables right away in a dashboard.
So again this would be my user name.
Then this is gonna be my password and then the rest of the environment variables.
And like I said already before there's just gonna be a bunch of copying pasting.
But please just make sure that you don't make any typo because the whole deployment is gonna go bananas
if you make the smallest typo.
I'm gonna head over to strappy documentation and then one by one we're just gonna grab our environment
names so our environment variable names.
We're gonna have database username password hosted as well as the port name.
So let's head to our dashboard and then let's assign our first variable and of course that's not what
I wanted.
Let me make sure that I copy and paste I'm going to head to my dashboard database user name and I'm
just gonna add the variables first.
So one by one I'm gonna add the variables and then we're gonna sign the values from our terminal.
So we're going to look first for the user name of course and then the password and rest them.
So next one up we have database password like so let's set it up and then we have the host.
So let's grab the host to navigate again to that board host added.
And then we have two more.
The port and the name so port and name port.
Here we go.
And then lastly we have the database name and once we copy and paste that to our environment variables
should be good to go where we need to set up our values and the values.
Like I said I'm gonna be looking in a console but if you would want to check where we are getting the
values again just head over to a strappy documentation and then look for explanations.
So the first one is user name and password is right after the colon.
Then the host is right after the ad.
Then again port is between the colons.
So we have port then one call the second column and last one is a database name so that's all we can
in fact access those values.
I start with my ones first one was the user name so all the way up to the colon.
Well let's call it and then in this case I need to click on it.
So we need to click on it and we need to copy paste.
That was my year.
Then next I have the password so password is gonna be this guy.
All the way up to a at symbol.
So from the colon not including the colon and all the way up to a at sign.
What's that.
All right.
Next we have a database hosted.
And again if you need to double check how you would get the host.
Again we wouldn't have the ad but then we would grab everything after the app and all the way to dot
com.
So Amazon a double U.S. dot com should be our ending.
So let me grab it.
I have Amazon a double yes.
Dot com then vintage tech that is going to be my host.
And then in this case notice something interesting where we're copying pasting and we're setting up
two lines and that is in fact incorrect.
What we would want is to make sure that everything is in one line.
So let's save those changes and then we have the port and then we have database name.
The port is the five four three two or maybe in your case is gonna be different.
So we're going to have the port again let's edit and save it.
And then lastly we have of course a value for the database name.
So again we're going at it I'm going to copy and paste and we're going to save the changes once we add
the environment variables then head back to strategy documentation and then let's look what else we
need to do and we would need to update our database.
Jason and it is located in the config environments production and database Jason.
And what we're going to do is wipe out the file clean and then just copy and paste whatever data they
have here.
So let's copy and paste.
And then again remember we need to head over to config environments production so config.
Let's look for config environments.
Production and then we have the file by the name of database Jason.
So let's open up that file.
Let's select everything that we have currently in there that's wiped clean and let's copy and paste
info from these strappy docs.
Now we set up the proper database.
Jason then we also would need to install a post just note module so let's run our command.
We're going to do it again in our backend copy and paste.
We're going to install the module.
And lastly we would need to commit all the changes that we added.
So let's say in this case you're going with a message of update database config but first as always
you can have whatever message you'd want.
And last we're gonna have get push Heroku master and then it's gonna take a few minutes but our app
should be up and running.
So let's add these commands.
We're gonna have first get add.
Again we're going to add all the files the staging area I'm going to clear Get comment and I'm going
to write.
Ready to deploy.
And then once I have my message of course I'm going around the command and remember the last one was
get push but we have Heroku master.
All right get push Roku master.
Now it's going to take a few minutes so longer to stop the video and I'm going to resume the video once
the deployment is complete and once our deploy is complete we are going to head over to our Heroku dashboard
and then we're gonna take a look at our application.
So I'm gonna head over to a dashboard and then within the dashboard of course I have vintage tech story
act API that is my app and I would want to open up a app.
So I'm going to open up the app and then I see my familiar screen with an admin.
So of course we can head over to an admin and then like I said once we push our project to production
we're gonna have to set up our admin from scratch.
So in this case probably go with a more difficult password which I'm gonna change later just so we can
speed up things and then I'm gonna type in again my password and last.
Let's set up the email so learn code tutorial.
And then gmail dot com.
And in this case I'm going to click to ready to start and this is gonna be our familiar dashboard where
we can make all the changes to our API.