1
00:00:00,450 --> 00:00:07,400
Welcome back. In this video we're finally going to put our front end application on a server so that

2
00:00:07,430 --> 00:00:15,780
everything is now off of our computer online and we can share our project with the world to get started.

3
00:00:15,780 --> 00:00:25,420
We can go back to Heroku and in our dashboard we can simply see that we have our server but we want

4
00:00:25,420 --> 00:00:36,220
to create a new app and this new app we can call it smart brain. We'll choose region in us we'll click

5
00:00:36,250 --> 00:00:45,370
Create app and it gives us really really nice commands how to set up everything we can just do Heroku

6
00:00:45,460 --> 00:00:47,530
login.

7
00:00:47,630 --> 00:00:51,250
So let's do that from our smart brain front end.

8
00:00:52,510 --> 00:00:57,140
I'm going to say Heroku login

9
00:01:04,060 --> 00:01:06,680
log in with my email and my password

10
00:01:09,510 --> 00:01:16,650
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

11
00:01:16,650 --> 00:01:25,320
our remote to Heroku gid remote smart brain right.

12
00:01:25,420 --> 00:01:31,630
If we do get remote dash V and these are the same steps that we ran with our API server as well.

13
00:01:31,690 --> 00:01:35,310
We see that we have Heroku next.

14
00:01:35,350 --> 00:01:40,720
We want to do git add commit and then push Hiroku Master.

15
00:01:40,740 --> 00:01:41,880
All right.

16
00:01:41,970 --> 00:01:47,580
And a reminder here that even though we haven't changed anything on the front end we do have to run

17
00:01:47,580 --> 00:01:51,870
and git add and git commit.

18
00:01:52,050 --> 00:01:55,140
Otherwise the changes won't appear on Hiroku.

19
00:01:55,140 --> 00:02:01,590
So let's just say deploy for now and then we can just to git push Heroku master.

20
00:02:05,850 --> 00:02:07,810
Seems a little bit too easy right.

21
00:02:07,920 --> 00:02:14,890
Well let's let this run and see once it is deployed if it's all working. All right, our deployment's done.

22
00:02:14,900 --> 00:02:17,130
And look at that we have a new link.

23
00:02:17,270 --> 00:02:20,050
So let's run Heroku open

24
00:02:23,840 --> 00:02:31,570
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

25
00:02:31,580 --> 00:02:35,970
Teddy at gmail dot com do one two three

26
00:02:38,680 --> 00:02:42,760
sign in.

27
00:02:42,850 --> 00:02:43,270
All right.

28
00:02:43,270 --> 00:02:46,780
And look at that. Teddy is loaded.

29
00:02:46,810 --> 00:02:52,050
He's already done a count before with the face. Let's do another one just to make sure it works.

30
00:02:54,650 --> 00:02:57,150
Click detect.

31
00:02:57,200 --> 00:03:04,450
No I don't want it to save Teddy's password but look at that everything is working.

32
00:03:04,450 --> 00:03:06,290
It seemed almost too easy right.

33
00:03:06,300 --> 00:03:07,210
So cool.

34
00:03:07,270 --> 00:03:17,790
Let's recap one more time what we just did. We've created three separate servers or three separate computers

35
00:03:18,360 --> 00:03:26,980
where each of these individual rectangles are running. We have a postgreSQL, a node server, and a front

36
00:03:26,980 --> 00:03:32,200
end and all of them are working exactly as they were on our computer.

37
00:03:32,200 --> 00:03:39,280
But this time in production. Live, into the world. And all we had to do, was just change some numbers to

38
00:03:39,280 --> 00:03:44,770
make sure that we're pointing these arrows so that the front end knows that this is where our server

39
00:03:44,770 --> 00:03:52,570
is and the server knows this is where our databases and these are just small configurations that is

40
00:03:52,570 --> 00:03:54,660
really dependent on each platform

41
00:03:54,700 --> 00:03:59,100
you work with, but the underlying concepts are the same.

42
00:03:59,100 --> 00:04:02,250
You're just pointing to the address to the location of these things.

43
00:04:02,550 --> 00:04:03,880
But oh boy.

44
00:04:04,650 --> 00:04:08,880
Well isn't that crazy how we've got all these things to work.

45
00:04:08,880 --> 00:04:16,370
I remember my first time in my career when I managed to connect the dots and actually build each one of these

46
00:04:16,740 --> 00:04:18,200
myself.

47
00:04:18,240 --> 00:04:19,430
It was an eye opener.

48
00:04:19,440 --> 00:04:26,100
It opened up a whole new world and it made me really understand how everything is connected and moving

49
00:04:26,100 --> 00:04:27,380
on from that point.

50
00:04:27,480 --> 00:04:38,100
I understood most things and every tool or new technology is just an addition to this pre-existing idea.

51
00:04:38,340 --> 00:04:45,990
And as long as you understand this underlying architecture, this underlying concept of different servers

52
00:04:45,990 --> 00:04:53,640
connecting to each other the rest is just extensions of this.

53
00:04:53,650 --> 00:04:56,170
So could we improve this app.

54
00:04:56,200 --> 00:04:57,130
Absolutely.

55
00:04:57,190 --> 00:04:59,800
You can do so many things with this app.

56
00:04:59,950 --> 00:05:07,570
We might want to be a little bit extra secure and perhaps not even have our API key in our code for

57
00:05:07,570 --> 00:05:09,760
our server.

58
00:05:09,850 --> 00:05:12,910
We can create something like environmental variables for this.

59
00:05:12,910 --> 00:05:23,590
For example on Heroku if we go to our smart brain app or let's go to our backend our radiant ocean now

60
00:05:23,590 --> 00:05:31,460
on here if we go to settings and go to reveal config VAR's we have our environmental variables here

61
00:05:32,030 --> 00:05:33,120
set for us.

62
00:05:33,170 --> 00:05:35,820
You remember postgres how we tried to connect to it.

63
00:05:35,840 --> 00:05:40,180
And we had a process dot env dot DATABASE_URL.

64
00:05:40,190 --> 00:05:46,770
Well we can add our own if we wanted to we can say API clarifai

65
00:05:51,420 --> 00:06:05,250
add the API key that we have in our backend into here click ADD and now we have this available to us

66
00:06:05,940 --> 00:06:18,900
as a process dot env dot API clarifai which is I believe what I call the and this is an extra layer of

67
00:06:18,900 --> 00:06:26,900
security you don't want anything sensitive like addresses or passwords or API keys in your codebase.

68
00:06:26,940 --> 00:06:28,650
So somebody can peek it.

69
00:06:28,800 --> 00:06:34,800
This is something that you'll get used to more and more and hopefully with what you know about environmental

70
00:06:34,800 --> 00:06:35,820
variables.

71
00:06:35,820 --> 00:06:36,920
This makes sense.

72
00:06:38,000 --> 00:06:47,120
But for now because this is a simple app we don't need to add any of this we'll revert the changes.

73
00:06:50,740 --> 00:06:59,820
And just be proud of ourselves for creating an awesome app and deploying it in real life.

74
00:07:01,790 --> 00:07:08,850
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

75
00:07:08,870 --> 00:07:10,380
in the next one.

76
00:07:10,440 --> 00:07:10,860
Bye-Bye.