Welcome back. In this video we're finally going to put our front end application on a server so that
everything is now off of our computer online and we can share our project with the world to get started.
We can go back to Heroku and in our dashboard we can simply see that we have our server but we want
to create a new app and this new app we can call it smart brain. We'll choose region in us we'll click
Create app and it gives us really really nice commands how to set up everything we can just do Heroku
login.
So let's do that from our smart brain front end.
I'm going to say Heroku login
log in with my email and my password
and going back to the readme we see that we make sure that our git is set up which it is and we can add
our remote to Heroku gid remote smart brain right.
If we do get remote dash V and these are the same steps that we ran with our API server as well.
We see that we have Heroku next.
We want to do git add commit and then push Hiroku Master.
All right.
And a reminder here that even though we haven't changed anything on the front end we do have to run
and git add and git commit.
Otherwise the changes won't appear on Hiroku.
So let's just say deploy for now and then we can just to git push Heroku master.
Seems a little bit too easy right.
Well let's let this run and see once it is deployed if it's all working. All right, our deployment's done.
And look at that we have a new link.
So let's run Heroku open
All right, look at that we have a new link on our front end but let's see if it works if I sign in with
Teddy at gmail dot com do one two three
sign in.
All right.
And look at that. Teddy is loaded.
He's already done a count before with the face. Let's do another one just to make sure it works.
Click detect.
No I don't want it to save Teddy's password but look at that everything is working.
It seemed almost too easy right.
So cool.
Let's recap one more time what we just did. We've created three separate servers or three separate computers
where each of these individual rectangles are running. We have a postgreSQL, a node server, and a front
end and all of them are working exactly as they were on our computer.
But this time in production. Live, into the world. And all we had to do, was just change some numbers to
make sure that we're pointing these arrows so that the front end knows that this is where our server
is and the server knows this is where our databases and these are just small configurations that is
really dependent on each platform
you work with, but the underlying concepts are the same.
You're just pointing to the address to the location of these things.
But oh boy.
Well isn't that crazy how we've got all these things to work.
I remember my first time in my career when I managed to connect the dots and actually build each one of these
myself.
It was an eye opener.
It opened up a whole new world and it made me really understand how everything is connected and moving
on from that point.
I understood most things and every tool or new technology is just an addition to this pre-existing idea.
And as long as you understand this underlying architecture, this underlying concept of different servers
connecting to each other the rest is just extensions of this.
So could we improve this app.
Absolutely.
You can do so many things with this app.
We might want to be a little bit extra secure and perhaps not even have our API key in our code for
our server.
We can create something like environmental variables for this.
For example on Heroku if we go to our smart brain app or let's go to our backend our radiant ocean now
on here if we go to settings and go to reveal config VAR's we have our environmental variables here
set for us.
You remember postgres how we tried to connect to it.
And we had a process dot env dot DATABASE_URL.
Well we can add our own if we wanted to we can say API clarifai
add the API key that we have in our backend into here click ADD and now we have this available to us
as a process dot env dot API clarifai which is I believe what I call the and this is an extra layer of
security you don't want anything sensitive like addresses or passwords or API keys in your codebase.
So somebody can peek it.
This is something that you'll get used to more and more and hopefully with what you know about environmental
variables.
This makes sense.
But for now because this is a simple app we don't need to add any of this we'll revert the changes.
And just be proud of ourselves for creating an awesome app and deploying it in real life.
Now go share this link with all your friends and family and tell them how awesome of a dev you are. I'll see you
in the next one.
Bye-Bye.