1
00:00:00,510 --> 00:00:00,920
All right.

2
00:00:00,930 --> 00:00:04,560
So let's get started by deploying a really simple application.

3
00:00:04,560 --> 00:00:09,770
Again it's just going to have two routes to templates really really simple.

4
00:00:09,900 --> 00:00:12,710
The first thing I want to do is just make that application.

5
00:00:12,990 --> 00:00:14,790
So I'll do that really quickly.

6
00:00:14,790 --> 00:00:17,770
I made a new folder called deploying demo.

7
00:00:18,060 --> 00:00:21,670
First thing I'll do is NPM and.

8
00:00:22,740 --> 00:00:27,410
And I'm just going to go through most of these pretty quickly.

9
00:00:27,570 --> 00:00:30,540
J.S. as my entry point.

10
00:00:31,460 --> 00:00:34,980
Otherwise that's all we need to do.

11
00:00:34,980 --> 00:00:47,190
The next thing that I'll do is NPM install Express and you also do E.J. s dash dash save and dash dash

12
00:00:47,190 --> 00:00:47,210
.

13
00:00:47,220 --> 00:00:51,280
Save is especially important right now when we're deploying.

14
00:00:51,390 --> 00:00:55,200
We want to make sure that our package that Jason go ahead and open that up

15
00:00:59,610 --> 00:01:05,160
we want to make sure that it has all of our dependencies because what happens is we're going to send

16
00:01:05,430 --> 00:01:11,250
our code and our package that Jason over to her Roku using get actually is how we do it we're going

17
00:01:11,250 --> 00:01:18,690
to send it to Heroku servers and then Heroku is going to run NPM install and install whatever's in the

18
00:01:18,690 --> 00:01:19,610
package stuff Jason.

19
00:01:19,620 --> 00:01:25,440
So in this case Ejay us and express So if we are missing something if we didn't have expressed in this

20
00:01:25,440 --> 00:01:28,660
package that Jason Heroku wouldn't know to install it.

21
00:01:28,950 --> 00:01:35,670
So the key is that we're not actually sending the node modules directory over.

22
00:01:35,670 --> 00:01:41,160
That doesn't go all the way to Roku because there's no reason to do that that's a point of NPM instead

23
00:01:41,160 --> 00:01:47,470
of sending these giant files and the entire directories the entire module of Express.

24
00:01:47,580 --> 00:01:52,940
All we do is send the package that Jason that contains the instructions or the recipe we need Express

25
00:01:52,940 --> 00:01:53,370
we need it.

26
00:01:53,370 --> 00:01:53,860
Yes.

27
00:01:53,910 --> 00:01:57,990
Sort of a shopping list and then Heroku will go and download all of that.

28
00:01:58,020 --> 00:02:00,230
So we just want to make sure everything is here.

29
00:02:00,510 --> 00:02:05,430
In this case it's really short and simple but when we get to Yelp camp we do want to do a thorough check

30
00:02:05,430 --> 00:02:07,170
to make sure everything is there.

31
00:02:07,260 --> 00:02:10,220
If you do forget something it's not the end of the world.

32
00:02:10,260 --> 00:02:13,040
I'll show you how to do that I'll deliberately break it.

33
00:02:13,170 --> 00:02:16,770
Once we put up camp so you can see how you fix it.

34
00:02:16,770 --> 00:02:24,540
All right so next thing I want to do is make my app J J.S. and then I'm also going to make a View's

35
00:02:24,540 --> 00:02:25,710
directory.

36
00:02:26,130 --> 00:02:31,890
And then while I'm here let's make views slash and we'll just do home dad E.J..

37
00:02:31,910 --> 00:02:33,120
Yes.

38
00:02:33,420 --> 00:02:39,610
And the other one will call about that E.J. Yes.

39
00:02:40,050 --> 00:02:40,640
Great.

40
00:02:40,800 --> 00:02:43,120
So just two views.

41
00:02:43,170 --> 00:02:45,240
We'll fill them in with really simple stuff.

42
00:02:45,240 --> 00:02:46,990
So what we're going to deploy again.

43
00:02:47,370 --> 00:02:51,740
One application with two routes two templates that are just going to be hideous.

44
00:02:51,740 --> 00:02:54,760
Knowsley assess just the absolute bare minimum.

45
00:02:55,170 --> 00:03:00,690
But you could take this and you know deploy a portfolio site or deploy a blog site or whatever you do

46
00:03:00,690 --> 00:03:02,980
that doesn't require a mongo backend.

47
00:03:03,360 --> 00:03:05,850
So let's open this up and start with their app J us

48
00:03:09,390 --> 00:03:10,530
and up top.

49
00:03:10,530 --> 00:03:21,510
First thing you want to do is say express equals require express and then we'll do that equals Express

50
00:03:21,990 --> 00:03:24,070
running that function.

51
00:03:24,750 --> 00:03:35,580
While we're here we'll say at the outset view engine to Ejay us and then all that we should need to

52
00:03:35,580 --> 00:03:38,570
do now is declare our ropes.

53
00:03:38,670 --> 00:03:42,570
So let's start with apt get just the home page or the route route

54
00:03:47,160 --> 00:03:51,060
and we'll just do a rest render.

55
00:03:52,140 --> 00:04:00,660
And we'll just what is our template home redstart render home just like that will do the same thing

56
00:04:00,900 --> 00:04:04,370
except for slosh about and will result render.

57
00:04:04,380 --> 00:04:06,510
About right.

58
00:04:06,510 --> 00:04:10,060
So two routes with two different templates.

59
00:04:10,170 --> 00:04:11,970
Now we need to fill in those templates.

60
00:04:12,240 --> 00:04:14,940
So let's do home first

61
00:04:19,080 --> 00:04:20,390
and fill that out.

62
00:04:20,610 --> 00:04:27,420
So I'm going to just do an H-1 home page and we can add some thing later but let's just start with that

63
00:04:27,720 --> 00:04:32,220
and do the same thing for about H-1

64
00:04:35,960 --> 00:04:38,090
about Paige.

65
00:04:38,100 --> 00:04:38,650
All right.

66
00:04:38,910 --> 00:04:40,630
So we'll start there.

67
00:04:41,400 --> 00:04:46,920
And the very last thing that we need before we can start our server is our after listen at the very

68
00:04:46,920 --> 00:04:48,300
end.

69
00:04:48,300 --> 00:04:54,330
All right so this is our super simple app should all be review from pretty early on in the Express portion

70
00:04:54,330 --> 00:04:55,150
of this course.

71
00:04:55,380 --> 00:04:57,020
So let's make sure things work.

72
00:04:57,330 --> 00:04:59,180
Try running node apps.

73
00:04:59,280 --> 00:05:02,100
Yes.

74
00:05:03,390 --> 00:05:04,440
We didn't put a message out.

75
00:05:04,440 --> 00:05:09,510
So it's working just doesn't look very nice or doesn't really tell us that it's working but it is then

76
00:05:09,510 --> 00:05:13,630
let's go and preview our application.

77
00:05:14,460 --> 00:05:19,640
Oop looks like we have a small issue no default engine was specified no extension was provided.

78
00:05:19,710 --> 00:05:21,250
What do we have at the outset.

79
00:05:21,450 --> 00:05:22,500
View engine.

80
00:05:22,620 --> 00:05:24,840
And of course I messed that up.

81
00:05:24,990 --> 00:05:28,980
It's not supposed to be a dash their view space engine.

82
00:05:29,540 --> 00:05:29,780
Right.

83
00:05:29,790 --> 00:05:32,730
So let's try that one more time.

84
00:05:34,440 --> 00:05:39,090
Hopefully some of you caught that can refresh.

85
00:05:39,160 --> 00:05:44,280
You can also quick This right here to open up in the browser.

86
00:05:44,610 --> 00:05:49,500
You can see here we get our application think we can actually get rid of all of that.

87
00:05:49,500 --> 00:05:50,140
There we go.

88
00:05:50,340 --> 00:05:53,500
And if I go to slash about I get about page.

89
00:05:53,610 --> 00:05:57,330
So are two super simple wraps and that's all that we're going to do.

90
00:05:57,330 --> 00:05:59,340
Maybe we'll add in a link.

91
00:05:59,340 --> 00:06:08,620
So if we go to home let's add in an anchor tag A-Trak should just be slash about.

92
00:06:09,210 --> 00:06:16,620
Go to the About page and then we'll put this back or copy that over to the About page and have a link

93
00:06:16,620 --> 00:06:18,480
to just the route.

94
00:06:18,480 --> 00:06:21,110
Go home.

95
00:06:21,900 --> 00:06:22,680
OK.

96
00:06:23,310 --> 00:06:28,470
So let's verify that that works.

97
00:06:28,470 --> 00:06:29,510
Go to the About page.

98
00:06:29,550 --> 00:06:30,720
Go home.

99
00:06:30,750 --> 00:06:31,260
Great.

100
00:06:31,500 --> 00:06:33,200
So we have two routes.

101
00:06:33,570 --> 00:06:35,550
Our application is done.

102
00:06:36,060 --> 00:06:37,910
Awesome application right.

103
00:06:37,950 --> 00:06:42,280
So I'll shut this down here believe.

104
00:06:42,300 --> 00:06:43,350
There we go.

105
00:06:43,920 --> 00:06:47,400
And the next thing that we'll do is actually work on deploying this.

106
00:06:47,520 --> 00:06:50,390
So we're done with the app itself.

107
00:06:50,580 --> 00:06:57,240
Again not exciting but it's it's the exact same idea if you're doing a beautiful well styled application

108
00:06:57,300 --> 00:07:00,400
or a super simple to route express app.

109
00:07:00,600 --> 00:07:04,990
The concepts are the same exact same code as far as the deployment is concerned