1
00:00:00,270 --> 00:00:05,820
In the last video I mentioned that in this one we would be exploring handlebars of partials.

2
00:00:05,820 --> 00:00:10,830
Now we are still going to cover partials but I'm pushing that back to the next video.

3
00:00:10,830 --> 00:00:17,870
In this one I want to take a quick moment to talk about how we can customize how handlebars is set up.

4
00:00:17,970 --> 00:00:23,370
I want to do that first because in the next video we're gonna have to do that further to actually get

5
00:00:23,370 --> 00:00:24,910
partials to work.

6
00:00:24,930 --> 00:00:31,560
So the goal in this very quick video is to learn how we can customize the location and the name of the

7
00:00:31,620 --> 00:00:33,360
views directory.

8
00:00:33,360 --> 00:00:35,760
Right now it has to be in that location.

9
00:00:35,790 --> 00:00:40,980
The route of the project and it has to have the name views to get started.

10
00:00:41,010 --> 00:00:44,820
Let's go ahead and change the directory name and watch things fail.

11
00:00:44,850 --> 00:00:50,670
So right here I'm going to rename views over to something like templates.

12
00:00:50,670 --> 00:00:53,850
Now both directory names let you know what's inside.

13
00:00:53,850 --> 00:00:58,270
The problem is that express is not looking for a templates directory.

14
00:00:58,320 --> 00:01:04,470
So if we were to go ahead and refresh any of the pages on our site that use a template we would see

15
00:01:04,470 --> 00:01:11,670
an error message like the following error failed to look up view help in views directory and it's pointing

16
00:01:11,670 --> 00:01:18,330
to where it's expecting the views directory to live at is in the root of the web server project in a

17
00:01:18,330 --> 00:01:19,830
folder called views.

18
00:01:19,830 --> 00:01:22,710
We had that previously which is why things worked.

19
00:01:22,710 --> 00:01:26,580
We no longer have that which is why things are failing.

20
00:01:26,580 --> 00:01:32,130
Now this is just the default location that express expects your views to live in.

21
00:01:32,130 --> 00:01:37,360
You can always customize that but to customize it you have to tell express where to look.

22
00:01:37,470 --> 00:01:41,490
And this is going to require us to create a brand new path.

23
00:01:41,490 --> 00:01:48,150
So let's go ahead and define one similar to how we defined public directory path right here I'm going

24
00:01:48,150 --> 00:01:51,970
to define a constant which I'll call views path.

25
00:01:51,990 --> 00:01:57,390
And I'm going to set this equal to an absolute path to that views folder which I've called the templates

26
00:01:57,660 --> 00:02:04,410
so I'll use path dot join like I did up above and we'll start with underscore underscore dir name and

27
00:02:04,410 --> 00:02:07,500
remember that is the path to the folder.

28
00:02:07,530 --> 00:02:11,040
This file lives it which would be the source directory.

29
00:02:11,040 --> 00:02:12,320
That's not what we want.

30
00:02:12,360 --> 00:02:16,440
So we'll go ahead and provide another argument to alter that path.

31
00:02:16,530 --> 00:02:21,780
We're gonna use dot dot to go up a directory like we did when we needed to point to the public folder

32
00:02:22,200 --> 00:02:26,750
and then instead of forward slash public it is forwards slash templates.

33
00:02:26,790 --> 00:02:34,200
Perfect now that we have this in place we need to tell express to use this path and we do that by using

34
00:02:34,200 --> 00:02:36,830
a another app dot set call.

35
00:02:36,870 --> 00:02:43,890
So just down below app dot set and we're going to go ahead and set up a another setting for Express

36
00:02:44,100 --> 00:02:46,230
and this one is called views.

37
00:02:46,230 --> 00:02:48,870
We don't have to set it in order to use handlebars.

38
00:02:48,870 --> 00:02:50,440
We've already proven that.

39
00:02:50,490 --> 00:02:54,680
But if we do set it it's to the views directory we'd like to use.

40
00:02:54,750 --> 00:03:01,170
And in this case we just created a variable that stores that path now that we are correctly pointing

41
00:03:01,170 --> 00:03:03,550
express to our custom directory.

42
00:03:03,570 --> 00:03:09,990
Things are gonna start working again down below after saving the file the server did restart over here.

43
00:03:09,990 --> 00:03:16,530
I'll refresh the page and what do I get I get my template rendering once again like it was when we had

44
00:03:16,530 --> 00:03:17,940
the views directory.

45
00:03:17,940 --> 00:03:24,180
The only difference is that we've customized its name and we can now further customize its location

46
00:03:24,330 --> 00:03:30,330
putting it in a nested directory if we wanted to we could put it anywhere we want as long as we update

47
00:03:30,390 --> 00:03:34,020
the view's path to point to it now that we have this in place.

48
00:03:34,020 --> 00:03:38,550
Let's take a quick moment to organize our Express configuration a little more.

49
00:03:38,550 --> 00:03:43,680
I'm gonna break out these two lines into their own little section adding a comment to remind us what's

50
00:03:43,680 --> 00:03:44,790
going on here.

51
00:03:44,790 --> 00:03:46,320
We'll add other paths later.

52
00:03:46,560 --> 00:03:53,590
So for now we can title this little section something like define parts for Express config.

53
00:03:53,880 --> 00:03:56,240
Down below we have these three lines.

54
00:03:56,250 --> 00:03:59,230
Now the first two are specific to handlebars.

55
00:03:59,310 --> 00:04:01,480
And the last one is more general.

56
00:04:01,530 --> 00:04:11,040
So I'm gonna take those first two lines and add a comment for them setup handle bars engine and Views

57
00:04:11,490 --> 00:04:12,600
Location.

58
00:04:12,930 --> 00:04:18,510
And then finally we could add a comment for this line if we want to remember what it does as it's not

59
00:04:18,510 --> 00:04:20,630
very often we're going to end up changing it.

60
00:04:20,640 --> 00:04:26,100
And it could be easy to forget something like setup static directory to serve

61
00:04:28,600 --> 00:04:29,660
Excellent.

62
00:04:29,680 --> 00:04:33,250
Now that we have things in place our application is looking really good.

63
00:04:33,250 --> 00:04:39,340
And the last thing I want to do is walk you through the express documentation really quick so you can

64
00:04:39,340 --> 00:04:41,990
learn how to use it to figure out all of this stuff.

65
00:04:42,010 --> 00:04:48,370
Well we figured out throughout the videos the Express documentation as we explored earlier is over at

66
00:04:48,370 --> 00:04:53,200
Express J S dot com express J S dot com.

67
00:04:53,320 --> 00:04:58,390
And once we're here we are looking for the API reference page.

68
00:04:58,420 --> 00:05:05,800
Now the API reference walks through every single thing available and it's a really nice set of documentation.

69
00:05:05,800 --> 00:05:09,210
So over here we have a few very high level things.

70
00:05:09,280 --> 00:05:14,380
We have the express function which we've already used as we can see here there's not a whole lot to

71
00:05:14,380 --> 00:05:14,760
it.

72
00:05:14,800 --> 00:05:18,870
We simply call it to generate a new instance of the application.

73
00:05:18,880 --> 00:05:20,560
We also have application.

74
00:05:20,590 --> 00:05:24,610
This refers to our app variable over here.

75
00:05:24,610 --> 00:05:29,820
And if I were to click on that down below under methods we can see all of the methods we've used.

76
00:05:29,820 --> 00:05:36,610
We have app dot get app dot listen and others like app dot set an app dot use as you can see there are

77
00:05:36,610 --> 00:05:42,520
plenty of others but the reason I'm bringing you here is to quickly pull up documentation for app dot

78
00:05:42,520 --> 00:05:43,420
set.

79
00:05:43,420 --> 00:05:49,120
Now we already know how it works we call it we pass in the name of the setting we're trying to set and

80
00:05:49,120 --> 00:05:50,760
the value we want to set.

81
00:05:50,860 --> 00:05:57,860
But down below it also contains a table of all of the built in settings that can be set that express

82
00:05:57,850 --> 00:06:00,220
is actually going to do something with.

83
00:06:00,220 --> 00:06:06,520
There are about a dozen or so and near the bottom under V we have views and we have view engine both

84
00:06:06,520 --> 00:06:09,270
of which we've already used in our application.

85
00:06:09,340 --> 00:06:15,250
The documentation is fantastic it walks you through exactly what value should be set and what exactly

86
00:06:15,280 --> 00:06:17,290
the setting is going to do.

87
00:06:17,410 --> 00:06:24,520
Now we also have request response and router we're going to explore router later in the class request

88
00:06:24,520 --> 00:06:28,910
and response contain documentation for the request and response.

89
00:06:28,960 --> 00:06:32,750
Objects that are callbacks for a route get passed.

90
00:06:32,770 --> 00:06:37,610
So if I click on request we can see all of the things we can do with that object.

91
00:06:37,720 --> 00:06:43,240
And if I click on a response we can see all of the options we have here including a couple that we've

92
00:06:43,240 --> 00:06:43,690
used.

93
00:06:43,690 --> 00:06:45,380
Response dot send.

94
00:06:45,460 --> 00:06:49,190
We could learn how to use that even though we already know how to use that.

95
00:06:49,270 --> 00:06:55,600
And we also have response dot render just up above and here it talks about how to use Express with a

96
00:06:55,600 --> 00:06:57,340
template engine.

97
00:06:57,370 --> 00:07:02,980
So I just wanted to take a quick moment to walk you through the documentation for expect excuse me for

98
00:07:02,980 --> 00:07:09,760
Express so you can get a feel for how exactly it works and how you can use it to discover new features

99
00:07:09,790 --> 00:07:12,670
and customize your application further.

100
00:07:12,670 --> 00:07:19,480
That's where we're gonna stop for this video in the next video as I promised previously we will actually

101
00:07:19,480 --> 00:07:22,610
explore how to work with handlebars partials.

102
00:07:22,660 --> 00:07:23,890
I'm excited to get to that.

103
00:07:23,920 --> 00:07:25,690
So stay tuned and I'll see you then.