WEBVTT 0 00:00.300 --> 00:00.630 All right. 1 00:00.630 --> 00:05.700 So at this stage you should have already downloaded the starting project and you would have installed 2 00:05.730 --> 00:07.940 all of the required NPM modules. 3 00:08.070 --> 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 00:13.230 --> 00:14.250 proceed. 5 00:14.250 --> 00:18.980 Now once you're done then you're ready to tackle Challenge 1. 6 00:19.050 --> 00:25.280 So in order to complete challenge 1, you should be able to head over to localhost:3000 7 00:25.290 --> 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 00:33.750 --> 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 00:41.370 --> 00:48.330 app.js, you should be able to get this to show up on localhost:3000. 10 00:48.360 --> 00:49.820 So that's Challenge 1. 11 00:49.860 --> 00:53.040 Pause the video and see if you can complete the challenge. 12 00:53.890 --> 00:59.410 All right so if you completed that challenge and you manage get the same result as I showed you when 13 00:59.410 --> 01:04.000 I introduced the challenge then that means you get a gold star for this challenge. 14 01:04.120 --> 01:08.400 Then you can skip the rest of this lesson and head over to the next lesson 15 01:08.410 --> 01:11.630 where I'll show you how I implemented the answer. 16 01:12.070 --> 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 01:18.160 --> 01:20.520 there will be a five second countdown. 18 01:20.710 --> 01:26.380 Now you can either pause during the countdown, try and work out the challenge yourself or you can let 19 01:26.380 --> 01:29.710 the video play and I'll give you your first hint. 20 01:29.740 --> 01:31.250 So here comes the countdown. 21 01:35.670 --> 01:35.990 All right. 22 01:36.000 --> 01:38.830 So this is Hint number 1. 23 01:39.150 --> 01:42.450 So the first hint is we know that inside home. 24 01:42.660 --> 01:43.020 ejs 25 01:43.080 --> 01:49.210 we've got our h1. And this page is what we need to render from our server. 26 01:49.500 --> 01:55.320 So the place where we normally write our routes and where we render our EJS pages is between the app 27 01:55.320 --> 01:58.290 .set app.use and our app.listen. 28 01:58.290 --> 02:03.080 So we've got a gap right here that's already prepared for you to add your code. 29 02:03.120 --> 02:11.580 Now if you're remember, we create routes inside our server by saying app.get. And then we specify 30 02:11.790 --> 02:17.400 what route we want to target and then we add a callback function 31 02:17.430 --> 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 02:27.530 --> 02:30.140 we render our Web page. 33 02:30.140 --> 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 02:36.530 --> 02:40.590 page and then have a think about what you need to write inside here 35 02:40.790 --> 02:43.730 in order to render our home.ejs. 36 02:44.150 --> 02:51.320 So pause the video now and use that hint to complete the challenge. Still stuck? 37 02:51.540 --> 02:52.020 OK. 38 02:52.040 --> 02:54.070 Here's hint number 2. 39 02:54.400 --> 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 03:01.070 --> 03:05.190 need to target the home route or what's known as the root route. 41 03:05.240 --> 03:11.770 So when we have something like "www.facebook.com/", that is the root route. 42 03:11.810 --> 03:15.020 So in our case that's just localhost:3000. 43 03:15.050 --> 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 03:21.800 --> 03:23.960 to target this route. 45 03:24.250 --> 03:29.300 Now inside our app.get is where we're going to render our home. 46 03:29.520 --> 03:30.400 ejs. 47 03:30.440 --> 03:32.630 And the method for that is res. 48 03:32.660 --> 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 03:38.960 --> 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 03:46.700 --> 03:47.700 ejs. 51 03:48.170 --> 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 03:54.500 --> 03:55.710 code to work. 53 03:55.880 --> 04:01.910 Have a play around with the code and pause the video now to see if you can now complete the challenge.