0
1
00:00:00,300 --> 00:00:00,630
All right.
1

2
00:00:00,630 --> 00:00:05,700
So at this stage you should have already downloaded the starting project and you would have installed
2

3
00:00:05,730 --> 00:00:07,940
all of the required NPM modules.
3

4
00:00:08,070 --> 00:00:13,230
If you haven't, make sure you take a look at the last lesson where we did this so that we're ready to
4

5
00:00:13,230 --> 00:00:14,250
proceed.
5

6
00:00:14,250 --> 00:00:18,980
Now once you're done then you're ready to tackle Challenge 1.
6

7
00:00:19,050 --> 00:00:25,280
So in order to complete challenge 1, you should be able to head over to localhost:3000
7

8
00:00:25,290 --> 00:00:33,540
and when you hit enter it should render the home page and it will have an h1 but just says Home.
8

9
00:00:33,750 --> 00:00:41,340
So in your home.ejs you'll need to create an h1 that says Home and by writing some code inside
9

10
00:00:41,370 --> 00:00:48,330
app.js, you should be able to get this to show up on localhost:3000.
10

11
00:00:48,360 --> 00:00:49,820
So that's Challenge 1.
11

12
00:00:49,860 --> 00:00:53,040
Pause the video and see if you can complete the challenge.
12

13
00:00:53,890 --> 00:00:59,410
All right so if you completed that challenge and you manage get the same result as I showed you when
13

14
00:00:59,410 --> 00:01:04,000
I introduced the challenge then that means you get a gold star for this challenge.
14

15
00:01:04,120 --> 00:01:08,400
Then you can skip the rest of this lesson and head over to the next lesson
15

16
00:01:08,410 --> 00:01:11,630
where I'll show you how I implemented the answer.
16

17
00:01:12,070 --> 00:01:18,070
Now if you're stuck on this challenge and you don't know how to proceed then after the spoiler alert
17

18
00:01:18,160 --> 00:01:20,520
there will be a five second countdown.
18

19
00:01:20,710 --> 00:01:26,380
Now you can either pause during the countdown, try and work out the challenge yourself or you can let
19

20
00:01:26,380 --> 00:01:29,710
the video play and I'll give you your first hint.
20

21
00:01:29,740 --> 00:01:31,250
So here comes the countdown.
21

22
00:01:35,670 --> 00:01:35,990
All right.
22

23
00:01:36,000 --> 00:01:38,830
So this is Hint number 1.
23

24
00:01:39,150 --> 00:01:42,450
So the first hint is we know that inside home.
24

25
00:01:42,660 --> 00:01:43,020
ejs
25

26
00:01:43,080 --> 00:01:49,210
we've got our h1. And this page is what we need to render from our server.
26

27
00:01:49,500 --> 00:01:55,320
So the place where we normally write our routes and where we render our EJS pages is between the app
27

28
00:01:55,320 --> 00:01:58,290
.set app.use and our app.listen.
28

29
00:01:58,290 --> 00:02:03,080
So we've got a gap right here that's already prepared for you to add your code.
29

30
00:02:03,120 --> 00:02:11,580
Now if you're remember, we create routes inside our server by saying app.get. And then we specify
30

31
00:02:11,790 --> 00:02:17,400
what route we want to target and then we add a callback function
31

32
00:02:17,430 --> 00:02:27,530
so a req and a res. And we open up a set of curly braces and inside the set of curly braces is where
32

33
00:02:27,530 --> 00:02:30,140
we render our Web page.
33

34
00:02:30,140 --> 00:02:36,530
So have a think about what you need to put in between these quotation marks in order to render the home
34

35
00:02:36,530 --> 00:02:40,590
page and then have a think about what you need to write inside here
35

36
00:02:40,790 --> 00:02:43,730
in order to render our home.ejs.
36

37
00:02:44,150 --> 00:02:51,320
So pause the video now and use that hint to complete the challenge. Still stuck?
37

38
00:02:51,540 --> 00:02:52,020
OK.
38

39
00:02:52,040 --> 00:02:54,070
Here's hint number 2.
39

40
00:02:54,400 --> 00:03:01,070
In between the quotation marks we need to specify the route that we want to target. And in our case we
40

41
00:03:01,070 --> 00:03:05,190
need to target the home route or what's known as the root route.
41

42
00:03:05,240 --> 00:03:11,770
So when we have something like "www.facebook.com/", that is the root route.
42

43
00:03:11,810 --> 00:03:15,020
So in our case that's just localhost:3000.
43

44
00:03:15,050 --> 00:03:21,800
So that means inside here, all we have to write is just a single forward slash to specify that we want
44

45
00:03:21,800 --> 00:03:23,960
to target this route.
45

46
00:03:24,250 --> 00:03:29,300
Now inside our app.get is where we're going to render our home.
46

47
00:03:29,520 --> 00:03:30,400
ejs.
47

48
00:03:30,440 --> 00:03:32,630
And the method for that is res.
48

49
00:03:32,660 --> 00:03:38,960
So this is the result that we are going to send back from the server to the user who's requesting this
49

50
00:03:38,960 --> 00:03:46,660
page and we're going to use the render method that Express gives us to be able to render our home.
50

51
00:03:46,700 --> 00:03:47,700
ejs.
51

52
00:03:48,170 --> 00:03:54,500
So have a think about what else you might need to put in between those parentheses in order to get this
52

53
00:03:54,500 --> 00:03:55,710
code to work.
53

54
00:03:55,880 --> 00:04:01,910
Have a play around with the code and pause the video now to see if you can now complete the challenge.