All right. 1
So at this stage you should have already downloaded the starting project and you would have installed 2
all of the required NPM modules. 3
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
proceed. 5
Now once you're done then you're ready to tackle Challenge 1. 6
So in order to complete challenge 1, you should be able to head over to localhost:3000 7
and when you hit enter it should render the home page and it will have an h1 but just says Home. 8
So in your home.ejs you'll need to create an h1 that says Home and by writing some code inside 9
app.js, you should be able to get this to show up on localhost:3000. 10
So that's Challenge 1. 11
Pause the video and see if you can complete the challenge. 12
All right so if you completed that challenge and you manage get the same result as I showed you when 13
I introduced the challenge then that means you get a gold star for this challenge. 14
Then you can skip the rest of this lesson and head over to the next lesson 15
where I'll show you how I implemented the answer. 16
Now if you're stuck on this challenge and you don't know how to proceed then after the spoiler alert 17
there will be a five second countdown. 18
Now you can either pause during the countdown, try and work out the challenge yourself or you can let 19
the video play and I'll give you your first hint. 20
So here comes the countdown. 21
All right. 22
So this is Hint number 1. 23
So the first hint is we know that inside home. 24
ejs 25
we've got our h1. And this page is what we need to render from our server. 26
So the place where we normally write our routes and where we render our EJS pages is between the app 27
.set app.use and our app.listen. 28
So we've got a gap right here that's already prepared for you to add your code. 29
Now if you're remember, we create routes inside our server by saying app.get. And then we specify 30
what route we want to target and then we add a callback function 31
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
we render our Web page. 33
So have a think about what you need to put in between these quotation marks in order to render the home 34
page and then have a think about what you need to write inside here 35
in order to render our home.ejs. 36
So pause the video now and use that hint to complete the challenge. Still stuck? 37
OK. 38
Here's hint number 2. 39
In between the quotation marks we need to specify the route that we want to target. And in our case we 40
need to target the home route or what's known as the root route. 41
So when we have something like "www.facebook.com/", that is the root route. 42
So in our case that's just localhost:3000. 43
So that means inside here, all we have to write is just a single forward slash to specify that we want 44
to target this route. 45
Now inside our app.get is where we're going to render our home. 46
ejs. 47
And the method for that is res. 48
So this is the result that we are going to send back from the server to the user who's requesting this 49
page and we're going to use the render method that Express gives us to be able to render our home. 50
ejs. 51
So have a think about what else you might need to put in between those parentheses in order to get this 52
code to work. 53
Have a play around with the code and pause the video now to see if you can now complete the challenge.