WEBVTT

0
00:00.280 --> 00:05.110
All right so now it's time for challenge 4. And what I want you to do

1
00:05.170 --> 00:11.520
inside Atom is that is I want you to create a new folder inside the views folder.

2
00:11.700 --> 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
00:17.100 --> 00:18.950
to call partials.

4
00:19.170 --> 00:24.190
And inside this folder we're going to drag our header and footer.ejs files.

5
00:24.300 --> 00:26.410
So we're going to put it inside here.

6
00:26.670 --> 00:32.250
So now we have our main web pages and then we have our partials

7
00:32.280 --> 00:38.970
so partially complete HTML files inside a folder called partials. Now out there in the wild

8
00:39.000 --> 00:46.380
when you come across Node Express EJS apps, this is usually the structure that you will see. But because

9
00:46.380 --> 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
00:53.460 --> 00:55.170
now stop working.

11
00:55.170 --> 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
01:01.560 --> 01:08.110
not find the include file which is called header and it points to the line where there's a error.

13
01:08.430 --> 01:14.520
To complete this challenge try and fix your code so that your header and footer partials still get

14
01:14.520 --> 01:21.110
applied and we get the same result as we saw previously with our nav bar and with our footer.

15
01:21.120 --> 01:24.910
Pause the video now and see if you can fix the code.

16
01:24.920 --> 01:28.230
All right so this is my first hint for you.

17
01:28.640 --> 01:32.920
The string that we put inside here that's called header

18
01:33.110 --> 01:34.700
used to work.

19
01:34.700 --> 01:41.180
And it was because this file could header.ejs was directly inside our views folder.

20
01:41.390 --> 01:48.810
And this is the place where EJS will look to try and render any of these files or partials.

21
01:48.880 --> 01:54.460
So now that this header file has moved into a subfolder called partials,

22
01:54.460 --> 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
02:02.410 --> 02:03.370
up our web page?