0
1
00:00:00,280 --> 00:00:05,110
All right so now it's time for challenge 4. And what I want you to do
1

2
00:00:05,170 --> 00:00:11,520
inside Atom is that is I want you to create a new folder inside the views folder.
2

3
00:00:11,700 --> 00:00:17,100
So click on view and hold down Shift + A and you should be able to create a new folder that we're going
3

4
00:00:17,100 --> 00:00:18,950
to call partials.
4

5
00:00:19,170 --> 00:00:24,190
And inside this folder we're going to drag our header and footer.ejs files.
5

6
00:00:24,300 --> 00:00:26,410
So we're going to put it inside here.
6

7
00:00:26,670 --> 00:00:32,250
So now we have our main web pages and then we have our partials
7

8
00:00:32,280 --> 00:00:38,970
so partially complete HTML files inside a folder called partials. Now out there in the wild
8

9
00:00:39,000 --> 00:00:46,380
when you come across Node Express EJS apps, this is usually the structure that you will see. But because
9

10
00:00:46,380 --> 00:00:53,460
it's no longer inside the views folder, our current code where we're at including a header and footer will
10

11
00:00:53,460 --> 00:00:55,170
now stop working.
11

12
00:00:55,170 --> 00:01:01,560
So if I go to my web page I hit refresh, we're going to get some errors. And it's telling us that it could
12

13
00:01:01,560 --> 00:01:08,110
not find the include file which is called header and it points to the line where there's a error.
13

14
00:01:08,430 --> 00:01:14,520
To complete this challenge try and fix your code so that your header and footer partials still get
14

15
00:01:14,520 --> 00:01:21,110
applied and we get the same result as we saw previously with our nav bar and with our footer.
15

16
00:01:21,120 --> 00:01:24,910
Pause the video now and see if you can fix the code.
16

17
00:01:24,920 --> 00:01:28,230
All right so this is my first hint for you.
17

18
00:01:28,640 --> 00:01:32,920
The string that we put inside here that's called header
18

19
00:01:33,110 --> 00:01:34,700
used to work.
19

20
00:01:34,700 --> 00:01:41,180
And it was because this file could header.ejs was directly inside our views folder.
20

21
00:01:41,390 --> 00:01:48,810
And this is the place where EJS will look to try and render any of these files or partials.
21

22
00:01:48,880 --> 00:01:54,460
So now that this header file has moved into a subfolder called partials,
22

23
00:01:54,460 --> 00:02:02,410
can you fix this part of the code so that it works again and we stop getting errors when we try to load
23

24
00:02:02,410 --> 00:02:03,370
up our web page?